jQuery选择器

于 2022-12-10 17:36:17 发布
阅读量440 收藏 1
点赞数
分类专栏： jQuery 文章标签： jquery 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51435825/article/details/128263630
版权

目录

一、基本选择器

 二、层次选择器

三、过滤选择器

四、内容过滤选择器

五、属性过滤选择器

六、表单对象选择器

一、基本选择器

1、id选择器--> $("#")

2、class选择器--> $(".")

3、元素选择器--> $("元素标签")

4、*匹配所有元素--> $("*")

5、多元素选择器 --> $("选择器A,选择器B,.....")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				/* # id选择器 根据id选择元素 id唯一的不能重复*/
				$("#btn1").click(function(){
					$("#one").css("background-color","red");
				});
				
				$("#btn2").click(function(){
					/* .  class选择器 */
					$(".mini").css("background-color","#00ff00");
				});
				$("#btn3").click(function(){
					/* 元素选择器  选中div*/
					$("div").css("background-color","#00ffff");
				});
				$("#btn4").click(function(){
					/* *  匹配所有元素*/
					$("*").css("background-color","#00aaff");
				});
				$("#btn5").click(function(){
					/*多个选择器*/
					/* 选中元素为span 以及id为two的元素 */
					$("span,#two").css("background-color","#aa55ff");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="id选择器" id="btn1">
		<input type="button" value="class选择器" id="btn2">
		<input type="button" value="元素选择器" id="btn3">
		<input type="button" value="匹配所有元素" id="btn4">
		<input type="button" value="多个选择器" id="btn5">
		<br>
		<span>爱国1。。。</span>
		<div id="one" class="one">
			id one
			<div class="mini">class mini</div>
		</div>
		<div id="two" class="one">
			id two
			<div class="mini">class mini</div>
			<div class="mini">class mini</div>
		</div>
		<h3>我爱中国</h3>
		<span>爱国2。。。</span>
	</body>
</html>

 二、层次选择器

1、某元素下的所有元素--> $("选择器A 选择器B")

2、某元素下的子元素--> $("选择器A>选择器B")

3、某元素紧跟着的元素--> $("选择器A+选择器B")

4、某元素的同级别元素--> $("选择器A~选择器B")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					/* 找body下所有的div元素 */
					$("body div").css("background-color","red");
				});
				$("#btn2").click(function(){
					/* 选中body下的所有div子元素 只能选中儿子 不能选中孙子 */
					$("body > div").css("background-color","#00ff00");
				});
				$("#btn3").click(function(){
					/* 选中id为one后面紧跟着的div元素*/
					$("#one+div").css("background-color","#00ffff");
				});
				$("#btn4").click(function(){
					/* 选中和#one同级别的div元素 其他层次的不选中*/
					$("#one~div").css("background-color","#00aaff");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="选择body内的所有div元素" id="btn1">
		<input type="button" value="选择body内的所有div子元素" id="btn2">
		<input type="button" value="选择id为one紧跟着的div元素" id="btn3">
		<input type="button" value="选择id为one的同辈div元素" id="btn4">
		<br>
		<span>爱国1。。。</span>
		<div id="one" class="one">
			id one
			<div class="mini">class mini</div>
		</div>
		<div id="two" class="one">
			id two
			<div class="mini">class mini</div>
			<div class="mini">class mini</div>
		</div>
		<h3>我爱中国</h3>
		<span>爱国2。。。<div>span div</div></span>
		<div class="mini">mydiv</div>
	</body>
</html>

三、过滤选择器

1、选择第一个元素--> $("选择器A:frist")

2、选择最后一个元素--> $("选择器A:last")

3、不为此元素的其他元素（取否定）--> $("选择器A:not(选择器B)")

4、偶数元素--> $("选择器A:even")

5、奇数元素--> $("选择器A:odd")

6、大于指定索引值元素（等于指定索引值元素、小于指定索引值元素）--> $("选择器A:gt(索引值)")，$("选择器A:eq(索引值)")，$("选择器A:lt(索引值)")

7、选中h1-h6标题元素--> $(":header")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤选择器</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					/* 选择第一个div元素 */
					$("div:first").css("background-color","red");
				});
				$("#btn2").click(function(){
					/* 选择最后一个div元素 */
					$("div:last").css("background-color","#00ff00");
				});
				$("#btn3").click(function(){
					/* 选中class不为one的所有div元素  取否定*/
					$("div:not(.one)").css("background-color","#00ffff");
				});
				$("#btn4").click(function(){
					/* 选择为偶数的   索引为0开始 从0开始计数  0 2 4 6 8*/
					$("li:even").css("background-color","#00aaff");
				});
				$("#btn5").click(function(){
					/* 选择为奇数的   索引为0开始 从0开始计数  1 3 5 7 9*/
					$("li:odd").css("background-color","#ffff00");
				});
				$("#btn6").click(function(){
					/* 选择索引值大于2的所有li元素 (不包含索引值2的元素)  eq()等于 lt()小于(不包含索引值的元素)*/
					$("li:gt(2)").css("background-color","#00aa00");
				});
				$("#btn7").click(function(){
					/* 选中h1~h6的标题标签*/
					$(":header").css("background-color","#ff007f");
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>aaaa</li>
			<li>bbbb</li>
			<li>cccc</li>
			<li>dddd</li>
			<li>eeee</li>
		</ul>
		<h2>你好中国</h2>
		<input type="button" value="选择第一个div元素" id="btn1">
		<input type="button" value="选择最后一个div元素" id="btn2">
		<input type="button" value="选择class不为one的所有div元素" id="btn3">
		<input type="button" value="选择li为偶数的元素" id="btn4">
		<input type="button" value="选择li为奇数的元素" id="btn5">
		<input type="button" value="选择li索引大于2的元素" id="btn6">
		<input type="button" value="选择标题元素" id="btn7">
		<br>
		<span>爱国1。。。</span>
		<div id="one" class="one">
			id one
			<div class="mini">class mini</div>
		</div>
		<div id="two" class="one">
			id two
			<div class="mini">class mini</div>
			<div class="mini">class mini</div>
		</div>
		<h3>我爱中国</h3>
		<span>爱国2。。。<div>span div</div></span>
		<div class="mini">mydiv</div>
		<h4>我爱中国</h4>
	</body>
</html>

四、内容过滤选择器

1、元素含有内容元素-->$("选择器A:contains('文本')")

2、选择空元素-->$("选择器A:empty")

3、含有某元素的元素-->$("选择器A:has(选择器B)")

4、含有子元素或文本元素的元素-->$("选择器A:parent")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容过滤选择器</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					/* div元素中含有di内容的所有元素 */
					$("div:contains('di')").css("background-color","red");
				});
				$("#btn2").click(function(){
					/* div为空的元素  返回值为数组对象  Array<Element(s)>*/
					var div = $("div:empty");
					alert(div.length);
				});
				$("#btn3").click(function(){
					/* 含有class为mini的div元素*/
					$("div:has(.mini)").css("background-color","#00ffff");
				});
				$("#btn4").click(function(){
					/* 选择含有子元素或文本元素的div*/
					$("div:parent").css("background-color","#00aaff");
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>aaaa</li>
			<li>bbbb</li>
			<li>cccc</li>
			<li>dddd</li>
			<li>eeee</li>
		</ul>
		<h2>你好中国</h2>
		<input type="button" value="选择内容含有di的div元素" id="btn1">
		<input type="button" value="选择不包含子元素或文本元素的div空元素" id="btn2">
		<input type="button" value="选择含有class为mini元素的div元素" id="btn3">
		<input type="button" value="选择含有子元素或文本元素的div元素" id="btn4">
		<br>
		<span>爱国1。。。</span>
		<div id="one" class="one">
			id one
			<div class="mini">class mini</div>
		</div>
		<div id="two" class="one">
			id two
			<div class="mini">class mini</div>
			<div class="mini">class mini</div>
		</div>
		<h3>我爱中国</h3>
		<span>爱国2。。。<div>span div</div></span>
		<div class="mini">mydiv</div>
		<h4>我爱中国</h4>
		<div></div>
		<div></div>
	</body>
</html>

五、属性过滤选择器

1、含有属性元素-->$("选择器A[属性]")

2、属性值等于文本的元素-->$("选择器A[属性='文本']")

3、属性值以文本开头的元素-->$("选择器A[属性^='文本']")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性过滤选择器</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					/* 属性含有title的div元素 */
					$("div[title]").css("background-color","red");
				});
				$("#btn2").click(function(){
					/*  选择属性值等于test的div元素*/
					$("div[title='test']").css("background-color","#ff557f");
				});
				$("#btn3").click(function(){
					/* 选择属性值以t开头的div元素  $=以什么结尾 *=包含*/
					$("div[title^='t']").css("background-color","#00ffff");
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>aaaa</li>
			<li>bbbb</li>
			<li>cccc</li>
			<li>dddd</li>
			<li>eeee</li>
		</ul>
		<h2>你好中国</h2>
		<input type="button" value="选择属性含有title的div元素" id="btn1">
		<input type="button" value="选择属性含有title 属性值等于test的div元素" id="btn2">
		<input type="button" value="选择属性含有title 属性值以t开头的div元素" id="btn3">
		<br>
		<span>爱国1。。。</span>
		<div id="one" class="one" title="tt">
			id one
			<div class="mini">class mini</div>
		</div>
		<div id="two" class="one" title="test">
			id two
			<div class="mini">class mini</div>
			<div class="mini">class mini</div>
		</div>
		<h3>我爱中国</h3>
		<span>爱国2。。。<div>span div</div></span>
		<div class="mini">mydiv</div>
		<h4>我爱中国</h4>
		<div></div>
		<div></div>
		<div title="tttt">yyyy</div>
	</body>
</html>

六、表单对象选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单对象选择器</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					/* 拿到文本框 .val()方法有参数则设置值，无参数则取值*/
					$(":text:enabled").val("zhangsan");//只能给可用的赋值 enabled访问可用文本框
					$(":text:disabled").val("lisi");//只能给禁用的赋值 disabled访问不可用文本框
				});
				$("#btn2").click(function(){
					alert($(":checkbox:checked").length);//获取选中的个数 :checked属性为选中
					alert($(":checkbox:checked")[0].value);//$(":checkbox:checked")返回值为数组 dom元素
				});
				$("#btn3").click(function(){
					var chks = $(":checkbox:checked");
					for(var i = 0; i < chks.length; i++){
						console.log(chks[i].value);
					}
					console.log("-----------------------")
					chks.each(function(){
						console.log(this.value);
					});
				});
				$("#btn4").click(function(){
					var options = $("select option:selected");
					alert(options.length);
					options.each(function(){
						console.log(this.innerHTML);//this指代当前options options是DOM
					});
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="给文本框赋值" id="btn1">
		<input type="button" value="获取多选框选中的个数" id="btn2">
		<input type="button" value="获取多选框选中的内容" id="btn3">
		<input type="button" value="获取下拉框选中的内容" id="btn4">
		<br>
		<input type="text" name="" id="">
		<input type="text" name="" id="" disabled="disabled">
		<input type="checkbox" name="loves" checked="checked" value="sport">运动
		<input type="checkbox" name="loves" value="internet">网络
		<input type="checkbox" name="loves" checked="checked" value="music">音乐
		下拉框
		<select name="city" multiple="multiple" style="height: 100px;" id="select">
			<option value="sh">上海</option>
			<option value="sz" selected="selected">深圳</option>
			<option value="nb">宁波</option>
			<option value="hz" selected="selected">杭州</option>
		</select>
	</body>
</html>

杪＆秋
关注
专栏目录
jq的选择器
KingRH的博客
11-19 958
jq选择器 文章目录jq选择器选择器1基本选择器2层次选择器3过滤选择器 选择器 我们先复习一下js的选择器都有些什么 常见的有 id选择器，类选择器，属性选择器，标签名选择器 随便一个id选择器 <script> var p=document.getElementById("id") p.onclick=function(){ console.log("这是js写法") } </script> 如代码所示获得的i
jQuery选择器中的特殊符号处理方法
12-29
一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，因为根据W3C规定，HTML文档中属性的值是不能包含有这些个特殊字符的，但是在实际应用中，偶尔也会遇到表达式中含有“#”和...
JQ选择器
03-09 116
1、基本选择器 <script> $(function(){ $ ("#btn1").click(function(){ $("#one").css("background-color","pink"); }); $ ("#btn2").click(function(){ $("...
jquery内容选择器
weixin_45799003的博客
02-25 261
选择器用来选择元素: <body> <div>我是div</div> <div><span></span></div> <div><p></p></div> </body> :contains(text) 找到包含指定文本内容的指定元素。 var $div=$(“div:contains('我是div')”); :empty 找到既没有文本内容也没有子元素的指定
【JQuery】:text表单文本选择器
O(∩_∩)O
03-31 649
该选择器的功能是获取表单全部单行文本输入框，对textarea和按钮不起作用。 修改多个单行输入框元素的背景色 Button $("#frmTest :text").addClass("b
jq入门--选择器
srfx465454的专栏
05-16 166
JQuery霹雳：二、选择器 2010年01月08日 星期五 09:21 （原创：灰灰虫的家http://hi.baidu.com/grayworm） 选择器是JQuery一大特色，所有的DOM操作、事件操作、Ajax操作都离不开选择器。熟练掌握JQuery的选择器，可以节省很多代码，很大程序上简化我们的脚本编程工作。 JQuery的选择器很类似于样式表的选择器。 JQuery选择器...
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
jQuery选择器官方文档中文
playfish05的专栏
12-28 212
jQuery的选择器是CSS 1-3，XPath的结合物。jQuery提取这二种查询语言最好的部分，融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS（绝大部分WEB开发者都用到的），那么你学起来就很容易了。 同时使用CSS和XPath 看几个例子： 隐藏所有包含有链接的段落： $("p[a]").hide(); 显示页面的第一个段落： $("p:...
jQuery选择器——内容过滤选择器
十一的博客
06-18 323
实例：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
jQ选择器
u013464954的专栏
11-01 647
1.基本选择器 *(所有元素) .class(类选择器) element(标签选择器) #id(id选择器) selector1, selectorN, ...(并列选择器) 2.层次选择器 parent > child(下一层的子元素) ancestor descendant(所有的后代) prev + next(下一个兄弟节点) prev ~ siblings(下面所有的兄弟节点)
JQ 选择器
weixin_55032665的博客
11-28 489
JQ 选择器 $("*") 选择所有的元素 $(“#id ”) #符号后面加ID名称，ID选择器 $(“.class”) .符号后面加类名，类选择器 $("p") 标签选择器 $(". class. class ") 多重选择器 :first 例：$("p:first") 选择第一个 p 标签 :last 例：$("p: last") 选择最后一个 p标签 :even 例 $(“p:even”) 选择偶数 p标签 :odd 例 $(“p:odd”) 选择奇数 p标签 :e...
jq选择器
朝立的博客
10-27 1240
前言：jq的选择器非常强大很简单的语句即可选中复杂的dom节点 基本选择器： .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杪＆秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值