jquery基础

基本选择器

<div class="outer">
    <div class="inner">
        <p>p3</p>
        <div>DIV</div>
    </div>
    <p>p2</p>
</div>
<p>p1</p>

<script>
//    让p2/p3变红
    $(".outer p").css("color", "red")
//让p2变红
    $(".outer>p").css("color", "red")
</script>

基本筛选器

<ul class="box">

    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>

</ul>

<script>
//     $(".box .item:eq(3)").css("color","red")  //等于
//     $("ul li").eq(x).css("color","red");      // 推荐写法
//     $(".box .item:lt(4)").css("color","red")  //小于
//     $(".box .item:gt(3)").css("color","red")  //大于
//     $(".box .item:odd").css("color","red")    //奇数
       $(".box .item:even").css("color","red")   //even 偶数，指的是索引为偶数

</script>

//     $("li").first()  //取第一个

属性选择器

<div egon="aaa">egon</div>
<div egon="aaa" class="c1">egon2</div>

<script>
//    $("[egon]").css("color","red")　//or 　$("[egon='aaa']").css("color","red")
    $("[egon='aaa'][class]").css("color","red")  //只有egon2会红
</script>

<input type="text">

<script>
    $("[type='text']").css("border","1px solid red");
    $(":text").css("border","1px solid green");　　　　　　//仅仅是input中type的简写
</script>

查找筛选器（参考苑昊的博客）

子标签：         　　$("div").children(".test")  找所有子代    $("div").find(".test")  找所有后代
                               
向下查找兄弟标签：    $(".test").next()  下一个标签               $(".test").nextAll()     下面所有的兄弟标签
                   $(".test").nextUntil() 　　指定开区间的标签
                           
向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                   $("div").prevUntil()   
查找所有兄弟标签：    $("div").siblings()  所有的兄弟标签
              
查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil() 

导航筛选器

jquery支持链式操作
<p class="item" id="d1">p3</p>
<p class="item">p3</p>
<p class="item">p3</p>

<script src="jquery-3.2.1.js"></script>
<script>
     $("#d1").next().css("color","red").next().css("color","green");
</script>

查找筛选器：

nextUntil 取开区间
<p class="item" id="d1">p3</p>
<p class="item">p3</p>
<p class="item">p3</p>
<p class="item" id="d4">p3</p>

<script>
     $("#d1").nextUntil("#d4").css("color","red");
</script>

父标签

<div class="c1">
    <div class="c3">
        DIV
        <div class="c4">

            <p class="p1">P1</p>
        </div>
    </div>
    <p>P2</p>
</div>

    console.log($(".p1").parent().parent().attr("class"))        attr获取属性的值
    console.log($(".p1").parents().attr("class"))                parents所有父标签
    $(".p1").parents().css("color","red        　　　　　　　　　　 整个网页都变红，并不是因为继承，而是对直接对标签进行处理
    $(".p1").parentsUntil(".c1").css("border","1px solid red")

　　$(".c1").children("p").css("border","1px solid red");　　　　  子标签
　　$(".c1").find("p").css("border","1px solid red")　　　　　　   后代标签

事件委派：

为什么用用事件委派：
    <ul id="box">
    <li class="item">111</li>
    </ul>
    <button class="add">ADD</button>

    $(".item").click(function () {
        alert(123)
    });
    
    $("button").click(function () {
        $("#box").append("<div class='item'>444</div>")
    });

给父标签绑定事件， // 在选择元素上绑定一个或多个事件的事件处理函数。

$("#box").on('click','.item',function () {　　　　　　//$("父标签").on(事件,[触发事件的标签（子标签）],函数() {}
    alert(123)
});