Jquery选择器大全

x33g5p2x  于2021-09-25 转载在 jQuery  
字(16.6k)|赞(0)|评价(0)|浏览(343)

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>

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

相关文章