jQuery四大选择器（基本，层次，内容，属性）超级详细

Wzh小吴

已于 2022-04-02 10:33:08 修改

阅读量1.7k

点赞数

分类专栏： jquery 文章标签： javascript

于 2022-04-02 10:18:23 首次发布

本文链接：https://blog.csdn.net/m0_49569569/article/details/123913916

版权

jQuery 选择器过滤器 CSS样式 DOM操作

关键词由CSDN通过智能技术生成

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.基本选择器

body里面的代码

<body>
    <h1 id="movie">电影名称</h1>
		<ul class="uls">
			<li>战狼</li>
			<li id="aa">英雄本色</li>
			<li>红海行动</li>
			<li>夏洛克只梦</li>
		</ul>
</body>

记得要导入jQuery的包，目前我用的是这一个，可以去镜像库里面找
<script src="./jquery-3.1.1.js"></script>

js里面的代码
<script>
    //id选择器
    $("#movie").css('background-color','red');
    //class类选择器
    $(".uls").css('background-color','yellow');
    //元素选择器
    $('li').css('font-size','20px');
    //通配符选择器
    $('*').css('color','blue');
    //同时选择多个，用，分割
    $('h1,#aa').css('font-weigt','800')
</script>

2.层次选择器

body里面的代码

<body>
    <h1 id="movie">电影名称</h1>
		<ul class="uls">
			<li><span>战狼</span></li>
			<li id="aa">英雄本色</li>
			<li id="bb">红海行动</li>
			<li><span>夏洛克之梦</span></li>
			<span>更多电影详情</span>
		</ul>
</body>

要导入jQuery里面的包
<script src="./jquery-3.1.1.js"></script>

js里面的代码
<script>
/*ancestor descendant	选取ancestor元素里面的所有descendant（后代）元素	集合元素	$(“div span”)选取<div>里的所有的<span>元素
parent>child	选取parent元素下的child（子）元素	集合元素	$(“div>span”)选取<div>元素下的<span>子元素
prev+next	选取紧邻元素prev元素之后的next元素	集合元素	$(“.one+div”)选取class为one的下一个<div>同辈元素
prev~siblings	选取prev元素之后的所有siblings（同辈）元素	集合元素	$(“#two~div”)选取id为two的元素后面的所有<div>同辈元素*/

//后代选择器  空格
$("ul span").css('font-size','20px');
//子选择器  >
$('.uls>span').css('color','red');
//相邻元素的下一个元素 相邻的兄弟元素  +
$('#aa+li').css('background-color','green');
//所有的同辈元素  ~
$('#aa~li').css('font-family','新宋体')
</script>

3.基本过滤器-2

body里面的代码
<body>
    <h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<h1 id="movie">电影名称</h1>
		<ul class="uls">
			<li><span>战狼</span></li>
			<li id="aa">英雄本色</li>
			<li id="bb">红海行动</li>
			<li><span>夏洛克之梦</span></li>
			<li>西游记之女儿国</li>
			<li></li>
			<span>更多电影详情</span>
		</ul>
        <input type="text" autofocus="autofocus" />
</body>

jquery要导入的包
<script src="./jquery-3.1.1.js"></script>

js里面的代码
<script>
/*:first	选取第一个元素	单个元素	$(“li:first”)选取所有<li>元素中的第一个<li>元素
:last	选取最后一个元素	单个元素	$(“li:last”)选取所有<li>元素中的最后一个<li>元素
:not(selector)	选取去除所有与给定选择器匹配的元素	集合元素	$(“li:not(.demo)”)选取class不是demo的<li>元素
:even	选取所有索引值是偶数的元素（索引值从0开始）	集合元素	$(“li:even”)选取索引值是偶数的所有<li>元素
:odd	选取所有索引值是奇数的元素（索引值从0开始）	集合元素$(“li:odd”)选取索引值是奇数的所有<li>元素*/

// :first	选取第一个元素	单个元素
$('li:first').css('background-color','aqua');
// :last	选取最后一个元素	单个元素
$('li:last').css('background-color','yellow');
// :not(selector)	选取去除所有与给定选择器匹配的元素
$('li:not(#aa)').css('font-size','20px')
// :even	选取所有索引值是偶数的元素（索引值从0开始）	集合元素
$('li:even').css('color','blue');
// :odd  选取所有索引值是奇数的元素 （索引值从0开始）
$("li:odd").css('color','red')
</script>

4.基本过滤器-3

body里面的代码
<body>
    <h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<h1 id="movie">电影名称</h1>
		<ul class="uls">
			<li><span>战狼</span></li>
			<li id="aa">英雄本色</li>
			<li id="bb">红海行动</li>
			<li><span>夏洛克之梦</span></li>
			<li>西游记之女儿国</li>
			<li></li>
			<span>更多电影详情</span>
		</ul>
		<input type="text" autofocus="autofocus" />
</body>

jQuery要导入的包
<script src="./jquery-3.1.1.js"></script>

js里面的代码
<script>
    /* :eq(index)  选取索引值等于index的元素(索引值从0开始)
       :gt(index)  选取所有索引值大于index的元素(索引值从0开始)
       :lt(index)  选取所有索引值小于index的元素(索引值从0开始)、
       :header     选取所有标题元素，如h1~h6
       :focus       选取当前获取焦点的元素*
    */
   //document.ready(function(){})
   $(function(){
       $('li:eq(2)').css('background-color','yellow');
       $('li:gt(3)').css('background-color','red');
       $('li:lt(2)').css('background-color','orange');
       $(':header').css('color','blue');
       $(':focus').val('搜索一下')
   })
</script>

5.内容过滤器

body里面的代码
<body>
    <h1>电影名称</h1>
		<hr />
		<ul>
			<li >红花二</li>
			<li class="movie">红海行动</li>
			<li class="movie"><span>战狼</span></li>
			<li>三国演义</li>
			<li></li>
		</ul>
</body>

jQuery要导入的包
<script src="./jquery-3.1.1.js"></script>

js里面的代码
<script>
    // :contains(text) 选取包含给定文本的元素
    // :empty   选取不包含子元素或者文本的空元素
    // :has(selector)   选取含有选择器所匹配的元素的元素
    // :parent  选取含有子元素或文本的元素
    $(function(){
			$("li:contains('红海')").css("font-size","30px");
			/*$("li:empty").html("我是空标签");*/
			$("li:has('span')").css("background-color","lightgreen");
			$("li:parent").css("color","red");
		})
</script>

6.属性过滤器

body里面的代码
<body>
    <ul>
        <li title="红海行动" class="demo1">红海行动</li>
        <li title="战狼" class="demo2">战狼</li>
        <li title="西游记" class="exam01">西游记</li>
        <li title="三国" class="exam02">三国</li>
        <li title="水浒传" id="aa">水浒传</li>
        <li></li>
    </ul>
</body>

jQuery要导入的包
<script src="./jquery-3.1.1.js"></script>

js里面的代码
<script>
/*		[attribute]	选取包含给定属性的元素
		[attribute=value]	选取属性的值为value的元素
		[attribute!=value]	选取属性的值不等于value的元素
		[attribute^=value]	选取属性的值以value开始的元素
		[attribute$=value]	选取属性的值以value结束的元素
		[attribute*=value]	选取属性的值含有value的元素
		[attribute1][attributeN]	选取满足所有属性选择器的元素
*/

        $("li[id]").css("font-size","30px");
		$("li[title='三国']").css("background-color","lightseagreen");
		$("li[class!='demo1']").css("font-family","新宋体");
		$("li[class^='demo']").css("background-color","yellow");
		$("li[class$='2']").css("color","red");
		$("li[class*='xa']").css("border","1px solid red");
		$("li[title][id]").css("background-color","blue");
</script>