1 基本选择器
基本选择器包括：
标签选择器
类选择器
ID选择器
并集选择器
交集选择器
全局选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 标签选择器 | element | 根据给定的标签名 匹配元素 | $("h2" ) 选取所有h2元素 |
| 类选择器 | .class | 根据给定的class 匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id 匹配元素 | $(" #title")选取id为title的元素 |
| 并集选择 器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后 一起返回 | $("div,p,.title" )选取所有 div、p和拥有class为title 的元素 |
| 交集 选择 器 | element.class或element#id | 匹配指定class或id 的某元素或元素集合 | $("h2.title")选取所有拥有 class为title的h2元素 |
<p>中国</p> <p>武汉</p> <p class="jy">加油</p> <p id="wan">祖国万岁</p> <h3 class="jy">祖国万岁</h3> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("p").css("color","red"); // 标签选择器，获得所有的p //$(".jy").css("color","red"); //类选择器 //$("#wan").css("color","red"); //ID选择器,更具备唯一性 //$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan $("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素 </script>
2 层次选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有 descendant（后代）元素 | $("#menu span" )选取 #menu下的元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子） 元素 | $(" #menu>span" )选取 #menu的子元素 |
| 相邻元 素选择 器 | prev+next | 选取紧邻prev元素之后的next元素 |
$(" h2+dl " )选取紧邻 元素之后的同辈元素 |
| 同辈元 素选择 器 | prev~sibings | 选取prev元素之后的所有siblings 元素 |
$(" h2~dl " )选取 元素之后所有 的同辈元素 |
<h3>000</h3> <div id="x"> 111 <p>p1</p> <div> <p>p2</p> </div> </div> <h3>222</h3> <h3>333</h3> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("#x p").css("color","red"); // 后代选择器，忽略层级 //$("#x>p").css("color","red"); // 子代选择器，只负责子级 //$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3 $("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3 </script>
3 属性选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 属性选择器 | [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元 素 |
| [attribute=value] | 选取等于给定属性是某 个特定值的元素 | $(" [href =‘#‘]" )选取href属性值为 “#”的元素 | |
| [attribute !=value] | 选取不等于给定属性是 某个特定值的元素 | $(" [href !=‘#‘]" )选取href属性值不 为“#”的元素 | |
| [attribute^=value] | 选取给定属性是以某些 特定值开始的元素 | $(" [href^=‘en‘]" )选取href属性值以 en开头的元素 | |
| [attribute$=value] | 选取给定属性是以某些 特定值结尾的元素 | $(" [href$=‘.jpg‘]" )选取href属性值 以.jpg结尾的元素 | |
| [attribute*=value] | 选取给定属性是以包含 某些值的元素 | $(" [href* =‘txt‘]" )选取href属性值 中含有txt的元素 | |
| [s1] [s2] [sN] | 选取满足多个条件的复 合属性的元素 | $("li[id][title=新闻]" )选取含有id和 title属性为新闻的<li>元素 |
<a href="www.lagou.com">拉勾网</a> <a href="www.sina.com.cn">新浪网</a> <a href="http://www.163.com">网易</a> <p href="x">哈哈1</p> <p href="x" title="x">哈哈2</p> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("[href]").css("color","red"); // 选取拥有href属性的元素 //$("[href=‘x‘]").css("color","red"); // 选取拥有href=x的元素 //$("a[href!=‘x‘]").css("color","red"); // 选取a标签中href不等于x的元素 //$("[href^=‘www‘]").css("color","red"); // 选取href属性以www开头的元素 //$("[href$=‘com‘]").css("color","red"); // 选取href属性以com结尾的元素 //$("[href*=‘a‘]").css("color","red"); // 选取href属性包含a的元素 $("p[href][title=‘x‘]").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素 </script>
4 过滤选择器
| 语法构成 | 描述 | 示例 |
| :first | 选取第一个元素 |
$(" li:first" )选取所有 元素中的第一个 元素 |
| :last | 选取最后一个元素 |
$(" li:last" )选取所有 元素中的最后一个 元素 |
| :even | 选取索引是偶数的所有元素（index从0开始） | $(" li:even" )选取索引是偶数的所有元素 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的所 有元素 |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)" )选取索引等于1的元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1） |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1） |
<h2 id="h2#x">修仙小说</h2> <ul> <li>凡人修仙传</li> <li>遮天</li> <li>神墓</li> <li>残袍</li> <li>大主宰</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("li:first").css("color","red"); // 第一个li //$("li:last").css("color","red"); // 最后一个li //$("li:even").css("color","red"); // 偶数行的li //$("li:odd").css("color","red"); // 奇数行的li //$("li:eq(2)").css("color","red"); // 下标为2的li //$("li:gt(1)").css("color","red"); // 下标大于1的li //$("li:lt(2)").css("color","red"); // 下标小于2的li $("#h2\\#x").css("color","red"); // 使用转义符 </script>