jQuery 选择器
1 元素选择器 2 $(".div1").css("color","red"); // class是div1 的css 3 $("#div2").css("color","red"); // id是div2 的css 4 $("div1").css("color","red"); // 标签的div 的css 5 $(".div3,#div2").css("color","red"); // class是div3 和id是div2的css 6 $(".div p1").css("color","red"); // class下的 p1 标签的css 7 $(".div>p").css("color","red"); // class 相毗邻的P标签 8 $("p.p1") //选取所有 class="p1" 的 <p> 元素。 9 $("p#p1") //选取所有 id="p1" 的 <p> 元素。 10 属性选择器 11 12 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 13 $("[href]") //选取所有带有 href 属性的元素。 14 $("[href='#']") //选取所有带有 href 值等于 "#" 的元素。 15 $("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素。 16 $("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。 17 其他 18 $(this) 当前 HTML 元素20 $("p.intro") 所有 class="intro" 的 <p> 元素 21 $(".intro") 所有 class="intro" 的元素 22 $("#intro") id="intro" 的元素 23 $("ul li:first") 每个 <ul> 的第一个 <li> 元素 24 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 25 $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
属性筛选器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> </ul> <script> //$("li:even").css("color","green"); //li的标签为偶数的索引 ,注意索引都是从0开始算的,所以在我们看来是奇数选择 // $("li:first").css("color","green"); //第一个li标签 // $("li:last").css("color","red"); //最后一个li标签 // $("li:eq(2)").css("color","red"); //直接通过索引去找li,第一个索引值是0 //$("li:lt(3)").css("color","red"); //找出所有小于索引值3的的li //$("li:gt(3)").css("color","red"); //找出所有大于索引值3的的li
// $("li").gt(3); // 也可以写成这样的形式 可以传参数
// $("li").first();
//$("li").hasClass("text"); //还可以判断是否有属性为text的li 返回一个布尔值
</script> </body> </html>
查找筛选器 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <div class="div1">hello 1 <div class="div8">hello 8</div> <div class="div9">hello 9</div> <div class="div10">hello 10</div> <div class="div2">hello 2 <div class="div3">hello 3</div> </div> <div class="div4">hello 4</div> <div class="div5">hello 5</div> <div class="div6">hello 6</div> <div class="div7">hello 7</div> </div> <p>hello p</p> <script> // $(".div1").children().css("color","red"); //class为div1下的所有的标签的css改变 他是只找儿子辈 ,但是由于孙子辈因为没CSS样式也会影响 //$(".div1").find(".div3").css("color","red"); //class为div1下的div3的标签的css改变 他是所有后代都找到 //$(".div2").next().css("color","red"); //class为div2后面的兄弟的标签的css改变 只找一个 div4 //$(".div2").nextAll().css("color","red"); //class为div2后面的所有兄弟标签的css改变 div 4567 //$(".div2").nextUntil(".div6").css("color","red"); //class为div2后面的所有兄弟标签到class=div6区间的css改变 div45 不包括6 //$(".div2").prev().css("color","red"); //class为div2上面的一个兄弟标签css改变 div10 //$(".div2").prevAll().css("color","red"); //class为div2上面的所有兄弟标签css改变 div10 9 8 //$(".div2").prevUntil(".div8").css("color","red"); //class为div2上面的所有兄弟标签到class=div8区间的css改变 div10 9 不包括8 //$(".div2").parent().css("color","red"); //找到class为div2的父级,改变他的css样式. 结果是div1-10全变 //$(".div2").parents().css("color","red"); //向上找到class为div2的父级爷爷辈一直找到BODY 改变的css样式. 结果是div1-10 和<P>都变 //$(".div3").parentsUntil(".div1").css("color","red"); //同上也是一直找到,先找到div2 然后准备找到div1 发现被限制 结果是div3和div2改变 //$(".div2").siblings().css("color","red"); //找到div2的所有兄弟标签改变css 但是自己不变 所以是div 4567 8910改变 </script> </body> </html>