Jquery选择器大全

主要看我怎么使用的我下面案例就不贴效果图了

基本选择器

名称	语法构成	描述	返回值	示例
标签选择器	`<div>`	匹配标签名称	元素集合	$(“div”) 选取所有的div元素
类选择器	.class	匹配指定的class属性	元素集合	$(“.tit”)选取所有class=tit的元素
id选择器	/#id	匹配指定的id	单个元素	$(“/#tit”)选取 id=tit的元素
并集选择器	sekec1,selfa2,……	将每个选择器匹配的元素合并后一起作用	元素集合	$(“div,.tit,p”)选取div p 元素和class=tit的所有元素
全局选择器	/*	匹配所有元素	集合元素	$(“/*”)选取所有的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			
		<div id="idxz">	
		
		<ul>
			<li>ADHKASJHD</li>
			<li><a href="#" class="dianj"> 我是a标签 </a></li>
			<li class="dianj">HDGSFSAD</li>
		</ul>
		
		</div>	
		
		<div id="bj">
			<li>法法</li>
			<li>散发</li>
		</div>
			<script src="./jquery-3.4.1.js" type="text/javascript"></script>
			<script> //使用标签选择器 $(document).ready(function(){ $("li").css("color","red"); $("a").css("text-decoration", "none"); }) //使用类选择器 $(document).ready(function(){ $(".dianj").css("background", "peachpuff") }) //使用id选择器 $(document).ready(function(){ $("#idxz").css({ "width":"300px","height":"300px","border":"1px lavender solid"}) }) //并集选择器 $(document).ready(function(){ $("li,#bj").css("list-style","none") }) //全局选择器 $(document).ready(function(){ $("*").css( "font-size", "30px") }) </script>
			
	</body>
</html>

层级选择器

名称	语法构成	描述	返回值	示例
后代选择器	root offspring	选取root元素里的所有offspring(后代元素)	元素集合	$(“/#menu span”)选取/#menu下的所有`<span>`元素
子选择器	parent>chiId	选取parent元素下的chiId(子)元素	元素集合	$(“/#menu>span”)选取/#menu下的子元素`<span>`
相邻元素选择器	prev+next	选择相邻prev元素之后next元素	元素集合	$("h2+dl”)选取紧邻`<h2>`元素之后的同辈元素`<dl>`
同辈元素选择器	prev~siblings	选取prev元素之后的所有siblings(同辈)元素	元素集合	$(“h2~dl”)选取`<h2>`元素之后所有同辈元素`<dl>`

后代选择器和子选择器的区别

1、nav>ul只选择nav下一级里面的ul元素，

2、nav ul选择nav内所包含的所有ul元素，
3、nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div id="idxz">
			<ul>
				<li>A</li>
				<li>    <a href="#" class="dianj"> B </a>  <p>B</p>   </li>
				<li class="dianj">C</li>
			</ul>

		</div>

		<div id="bj">
			<li>
				<a href="#" id="cc"> ASFASFAS </a>
				<p>喵</p>
				<p>旺</p>
				<p>呵</p>
			</li>
			<li>哈希</li>
		</div>
		<script src="./jquery-3.4.1.js" type="text/javascript"></script>

		<script>
			//后代选择器
			$(document).ready(function() {
				// #idxz 内 所有 li 
				// $("#idxz li").css("color","red")
			})

			//子选择器
			$(document).ready(function() {
				//这样就不行了 必须 是元素下是第一级子元素
				//$("#idxz>li").css("color","red")
				
				//这样就可以 ul 下的li 就是第一级
				//$("ul>li").css("color","red")
			})

			//相邻元素选择器 
			$(document).ready(function() {
				//所有 a 标签 同级别 后 相邻的 第一个 p标签
					$("a+p").css("color","red")
			})

			//同辈元素选择器 (只能元素之后)
			$(document).ready(function() {
				// #cc 后的所有p元素
				// $("#cc~p").css("color", "red")
			})
		</script>

	</body>
</html>

你测试的时候可能会发现 a标签颜色为啥没有变化而p表标签就有变化这就是一个bug

你需要直接指定到 a标签里比如: $("/#idxz li a") 还可以使用其他的选择器反正很多解决办法自己试试就行了

属性选择器

名称	描述	返回值	示例
[attribute]	选取包含指定属性的元素	元素集合	$(“[href]”)选取含有href属性的元素
[attribute=value]	选取等于指定属性是某个特定值的元素	元素集合	$(“[href=’/#’]”) 选取href=”/#”的所有元素
[attribute!=value]	选取不等于指定属性是某个特定值的元素	元素集合	$(“[href!=’/#’]”)选取href属性值不等于”/#”的元素
[attribute^=values]	选取指定属性是以某个特定值开始的	元素集合	$(“[href^=’en’]”)选取href属性值以”en”开头的元素
[attribute$=values]	选取指定属性是以某些特定值结尾的元素	元素集合	( “ [ h r e f (“[href(“[href=’.jpg’]”)选取href属性值以”.jpg”结尾的元素
[attribute/*=values]	选取指定属性值包含某些值的元素	元素集合	$(“[href/*=’text’]”) 选取hred属性子内包含” text”的元素

还可以使用css里的结构选择器 $("body p:nth-of-type(1)").css("background", "khaki")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			{
				
			}
		</style>
	</head>
	<body>
			
		<div id="idxz">
			
		
		<ul>
			
			<li>aaaaa</li>
			<li class="dianj">
			<a href="#" > 我是a </a>
			<p>xxx</p>
			</li>
			<li class="di2anj.1">bbbb</li>
		</ul>
		
		</div>	
		
		<div id="bj">
			<ul>
				
			
			<li>
				<a href="#" id="cc"> wol</a>
				<p>啊</p>
				<p>吧</p>
				<p>此</p>
				</li>
			<li>为啥</li>
			</ul>
		</div>
			<script src="./jquery-3.4.1.js" type="text/javascript"></script>
			
			<script>
			//选取包含指定属性的元素
			$(document).ready(function(){
				// $("#idxz a[href]").css("color", "red")
			})
			//选取等于指定属性是某个特定值的元素
			$(document).ready(function(){
				//$("div a[id='cc']").css("color", "red")
			})
			//选取不等于指定属性是某个特定值的元素
			$(document).ready(function(){
				//$("div a[id!='cc']").css("color", "red")
			})
			//选取指定属性是以某个特定值开始的
			$(document).ready(function(){
				//$("div li[class^='di']").css("color", "red")
			})
			//选取指定属性是以某些特定值结尾的元素
			$(document).ready(function(){
				// $("div li[class$='.1']").css("color", "red")
			})
			//选取指定属性值包含某些值的元素
			$(document).ready(function(){
				// $("div li[class*='an']").css("color", "red")
			})
			
			
			</script>
			
	</body>
</html>

基本过滤选择器

名称	描述	返回值	示例
:first	选取第一个元素	单个元素	$(“li:first”)选取所有

标签中的第一个
元素 |
| :last | 选取最后一个元素 | 单个元素 | $(“li:last”)选取所有
元素中的最后一个
元素 |
| :not(selector) | 选取不是指定选择器值的所有元素 | 集合元素 | $(“li:not(.three)”)选取class不是three的元素 |
| :even | 选取索引是偶数的所以元素(index从0开始) 0是偶数 | 集合元素 | $(“li:even”)选取索引是偶数的所有
元素的 01234 |
| :odd | 选取索引是奇数的所有元素(index从0开始) 0是偶数 | 集合元素 | $(“li:odd”)选取索引是奇数的所有
元素 01234 |
| :eq(index) | 选取索引等于index的元素(从0开始) | 单个元素 | $(”li:eq(1)”)选取索引等于1的
元素 |
| :gt(index) | 选取索引大于index的元素(从0开始) | 集合元素 | $(“li:gt(1)”)选取索引大于1的
元素(注意大于1 不包括1) |
| :lt | 选取索引小于index的元素(从0开始) | 集合元素 | $(“li:lt(1)”)选取索引小于1的
元素(注意:小于1但是不包括1) |
| :header | 选取所有标题元素如h1~h6 | 集合元素 | &(“:header”)选取网页中所有标题元素 |

还有其他的过滤选择器但是都不怎么常用而且有的还有点问题这里就不介绍了主要以上面为主

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> { } </style>
	</head>
	<body>
			
			
		<div id="hh">		
		<h2>H2</h2>
		<ul>		
		
			<li>ADHKASJHD</li>
			<li class="ab">SADADA</li>
			<li class="aa" >HDGSFSAD</li>
			<li class="aa">ASJFHSAD</li>
			<li>ioasnklv</li>
			<li>
				<input type="text" />
			</li>
		</ul>
		<h5>H5</h5>
		
		</div>
			<script src="./jquery-3.4.1.js" type="text/javascript"></script>
			<script> //选取第一个元素 $(document).ready(function(){ //$("#hh li:first").css("color","red") }) //选择最后一个元素 $(document).ready(function(){ //$("#hh li:last").css("color","red") }) //选取不是指定选择器值 的所有元素 $(document).ready(function(){ //$("#hh li:not(.aa)").css("color","red") }) //选取索引是偶数的所以元素(index从0开始) $(document).ready(function(){ // $("#hh li:even").css("color","red") }) //选取索引是奇数的所有元素 (index从0开始) $(document).ready(function(){ // $("#hh li:odd").css("color","red") }) //选取索引等于index的元素(从0开始) $(document).ready(function(){ //$("#hh li:eq(2)").css("color","red") }) //选取索引大于index的元素(从0开始) (注意大于2 不包括2) $(document).ready(function(){ //$("#hh li:gt(2)").css("color","red") }) //选取索引小于index的元素(从0开始)(注意:小于2但是不包括2) $(document).ready(function(){ //$("#hh li:lt(2)").css("color","red") }) //选取所有标题元素 如h1~h6 $(document).ready(function(){ // $("#hh :header").css("color","red") }) </script>
			
	</body>
</html>

可见性选择器

选择器	描述	返回值	示例
:visible	选取所有指定可见的元素	集合元素	$(“li:visible”)选取所有可见的

元素 |
| :hidden | 选取所有指定隐藏的元素 | 集合元素 | $(“li:hidden”)选取所有隐藏的
元素 |

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> </style>
	</head>
	<body>
			
		<ul>		
			<li>------------------------</li>
			<li class="aa" >HDGSFSAD</li>
			<li class="aa">ASJFHSAD</li>
			<li>--------------------------</li>
		</ul>
		
		<input type="button" value="显示" />
		<input type="button" value="隐藏" />
		
			<script src="./jquery-3.4.1.js" type="text/javascript"></script>
			
			<script> //获取所有指定隐藏的元素 $("[value='显示']").click(function(){ $("li:hidden").css("display", "block") }) //获取所有指定可见的元素 $("[value='隐藏']").click(function(){ $("[class='aa']:visible").css("display", "none") }) </script>
			
	</body>
</html>

表单选择器

语法	描述	示例
:input	匹配所有表单内元素	$("/#myfom :input")
:text	匹配所有文本框	$("/#myfom :text")
:password	匹配所有密码框	$("/#myfom :password")
:radio	匹配所有单选按钮	$("/#myfom :radio")
:checkbox	匹配所有多选按钮	$("/#myfom :checkbox")
:submit	匹配所有提交按钮	$("/#myfom :submit")
:image	匹配所有图片提交按钮	$("/#myfom :image")
:reset	匹配所有重置按钮	$("/#myfom :reset")
:button	匹配所有普通点击按钮	$("/#myfom :button")
:file	匹配所有本地文件选择按钮	$("/#myfom :file")
:hidden	匹配所有不可见元素	$("/#myfom :hidden")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> </style>
	</head>
	<body>
		<form action="" method="post" id="myfom">

			<input type="image" src="shuaige.jpg" width="100px" height="100px" /><br />
			<input type="image" src="shuaige.jpg" width="100px" height="100px" /><br />
			你的Email:<input type="email" id="youx" /><br />
			输入密码:<input type="password" name="mima" /><br />
			请输入一遍密码:<input type="password" name="mima" /><br />
			姓名<input type="text" /><br />
			性别:<input type="radio" value="男" name="xuanz" checked="true" />男
			<input type="radio" name="xuanz" value="女" />女<br />
			日期: <select id="nian">
				<option value="1998">1998</option>
			</select>年
			<select id="yue">
				<option value="1">1</option>
				<option value=""></option>
			</select>月
			<select id="ri">
				<option value="3">3</option>
				<option value=""></option>
			</select>日<br />
			爱好:<input type="checkbox" value="编程" checked="checked" />编程
			<input type="checkbox" value="读书" checked="checked" />读书
			<input type="checkbox" value="运动" />运动<br />
			<input type="file" id="tup" /><br />
			<input type="submit" value="注册" />
			<input type="reset" value="重置" /><br />
			<input type="button" value="按钮" />
			<textarea rows="" cols="">

			</textarea>
			<input type="text" value="yingc" style="display: none;" />

		</form>
		<br /><br /><br />
		<button id="ss">点击显示效果</button>

		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> //input匹配表单 内的所有input元素 // $("#ss").click(function(){ // $("#myfom :input").css("background","violet") // }) // 匹配所有文本框 text // $("#ss").click(function(){ // $("#myfom :text").css("background","violet") // }) // 匹配所有密码框 password // $("#ss").click(function(){ // $("#myfom :password").css("background", "violet") // }) //匹配所有radio 单选选择按钮 // $("#ss").click(function(){ // alert($("#myfom :radio")[0].value) // }) //匹配所有checkbox 多选择按钮 // $("#ss").click(function(){ // var c=$("#myfom :checkbox"); // for(var v in c){ // if(c[v].checked==true){ // alert(c[v].value) // } // } // }) //匹配所有submit 提交择按钮 // $("#ss").click(function(){ // alert($("#myfom :submit")[0].value) // }) //匹配所有image 图片提交择按钮 $("#ss").click(function() { //需要从新设置下 图片 才能修改参数 $("#myfom :image").attr({ src: "./shuaige.jpg" }) $("#myfom :image").attr({ width: "300px" }) }) //匹配所有reset 重置择按钮 // $("#ss").click(function() { // var c = $("#myfom :reset")[0].value; // alert(c) // }) //匹配所有button 点击按钮 // $("#ss").click(function(){ // $("#myfom :button").css("color","red") // }) //匹配所有file 选择本地文件按钮 // $("#ss").click(function(){ // $("#myfom :file").css("color","red") // }) //匹配所有不可见元素 $("#ss").click(function() { //将所有不可见 变为可变 $("#myfom :hidden").css("display", "block") }) </script>
	</body>
</html>

常见问题

$(document).ready(function(){
			//表达式中含有特殊符号 不能正确使用
			//$("#h#h").css("font-size","30px")
			//$(".ab[2]").css("color","red")
			//使用转义字符 后就可以了
			$("#h\\#h").css("font-size","30px")
			$(".ab\\[2\\]").css("color","red")
			//选择器中含有空格 就会变成后代选择器了 判断元素内有多少被隐藏的元素了
			var $s=$(".hh :hidden");
			//alert($s.length);

			//选择器中不含空格 就是本身 
			var $s1=$(".hh:hidden");
			alert($s1.length);
			
			
		})

表单属性过滤器

:cnabled	匹配所有可用元素也就是没有被禁用disabled	$("/#myfom :enabled")
:disabled	匹配所有不可用元素被禁用了disabled	$("/#myfom :disabled")
:checked	匹配所有被选中元素(radio , checkbox ,select)	$("/#myfom :checked")
:selected	匹配所有已选中的 select多选下拉框	$("/#myfom :selected")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> </style>
	</head>
	<body>
		<form action="" method="post" id="myfom">

			编号:<input value="1000" id="youx" disabled="disabled" /><br />
			输入密码:<input type="password" name="mima" /><br />
			请输入一遍密码:<input type="password" name="mima" /><br />
			姓名<input type="text" /><br />
			性别:<input type="radio" value="男" name="xuanz" checked="true" />男
			<input type="radio" name="xuanz" value="女" />女<br />
			日期: <select id="nian">
				<option value="1998">1998</option>
			</select>年
			<select id="yue">
				<option value="1">1</option>
				<option value=""></option>
			</select>月
			<select id="ri">
				<option value="3">3</option>
				<option value=""></option>
			</select>日<br />
			爱好:<input type="checkbox" value="编程" checked="checked"/>编程
			<input type="checkbox" value="读书" checked="checked"/>读书
			<input type="checkbox" value="运动" />运动<br />
			<input type="file" id="tup" /><br />
			<input type="submit" value="注册" />
			<input type="reset" value="重置" /><br />
			<input type="button" value="按钮" />
			<textarea rows="" cols="">
			</textarea>
			<input type="text" value="yingc" style="display: none;" />

		</form>
		<br><br><br>
		<button id="ss">点击显示特效</button>

		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> //匹配所有 非禁用 元素 // $("#ss").click(function(){ // $("#myfom :enabled").css("color","red") // }) //匹配所有 禁用 元素 // $("#ss").click(function(){ // $("#myfom :disabled").css("color","red") // }) // //匹配所有 被选中的元素 单选 多选 还包括多选下拉框 // $("#ss").click(function(){ // var c=$("#myfom :checked"); // for(var b in c){ // //如果不加上 非空 判断 就会无限循环 // if(c[b].value==undefined){ // break; // } // alert(c[b].value) // } // }) //只匹配所有 多选下拉框 被选取的 // $("#ss").click(function(){ // var c=$("#myfom :selected") // for(var b in c){ // //如果不加上 非空 判断 就会无限循环 // if(c[b].value==undefined){ // break; // } // alert(c[b].value) // } // }) </script>
	</body>
</html>

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

Jquery选择器大全

Jquery选择器大全

基本选择器

层级选择器

属性选择器

基本过滤选择器

可见性选择器

表单选择器

常见问题

表单属性过滤器

相关文章

热门标签

最新文章

目录