jQuery：jQuery选择器

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>