JQuery基础

JQuery是什么：

是一套js方法包

JS框架 前端框架

Node.js 开发环境

ID选择器：

$("#a1")

class选择器:

$(".a1")

标签选择器：

   $("div")

组合选择器 并列：用逗号隔开

$("#a1,#a2,#a3").click(function () {
        alert("aa");
    });

组合选择器 后代：用空格隔开

$("#a1 div").click(function () {
        alert("aa");
    });

过滤选择器 首个：

 $(".a1:first").click(function () {
        alert("aa");
    });

过滤选择器 末尾个：

$(".a1:last").click(function () {
        alert("aa");
    });

等于：需要加上索引号

$(".a1:eq(1)").click(function () {
        alert("aa");
    });

另一种方式:

$(".a1").eq(2).click(function () {
        alert("aa");
    });

大于：大于相应索引号的都执行

$(".a1:gt(1)").click(function () {
        alert("aa");
    });

小于：

$(".a1:lt(1)").click(function () {
        alert("aa");
    });

排除：括号里需要加选择器

 $(".a1:not(#a3)").click(function () {
        alert("aa");
    });

奇数：索引为奇数或偶数

 $(".a1:odd").click(function () {
        alert("aa");
    });

偶数：

 $(".a1:even").click(function () {
        alert("aa");
    });

属性名过滤：

<div id="a2" class="a1" ss="a"></div>
<div id="a3" class="a1"></div>
<div id="a4" class="a1"></div>
<script>
    $(".a1[ss]").click(function () {
        alert("aa");
    });
    

</script>

属性名对应的值过滤：等于=  不等于！=

         <div id="a2" class="a1" ss="a"></div>
         <div id="a3" class="a1" ss="b"></div> 
<script>
    $(".a1[ss=a]").click(function () {
        alert("aa");
    }); 
</script>        

内容过滤 包含文字：

<div id="a1" class="a1">
            <div style="width:50%;height:50%;background-color:green;">444</div>
        </div>
         <div id="a2" class="a1" ss="a">1111</div>
         <div id="a3" class="a1" ss="b">222</div>
         <div id="a4" class="a1">333</div>
<script>
    $(".a1:contains(4)").click(function () {
        alert("aa");
    }); 
</script>

包含子元素：has后面跟选择器

<script>
    $(".a1:has(div)").click(function () {
        alert("aa");
    }); 
</script>

<script>
    $(".a1:has(#aa)").click(function () {
        alert("aa");
    }); 
</script>

 

jQuery事件：