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>