标签：until blog test nts pen ack 简写 获取 function
基本选择器
<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> <li class="item">111</li> <li class="ite,m46">111</li> </ul> <script> $(".item").click(function () { alert(123) }); </script>
为什么用用事件委派：
<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)
});
标签：until blog test nts pen ack 简写 获取 function
原文地址：http://www.cnblogs.com/linuxws/p/7518826.html
