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)
});

 

posted @ 2017-09-14 08:41  linuxws  阅读(215)  评论(0编辑  收藏  举报