jQuery之选择器的介绍

最新推荐文章于 2021-06-08 09:32:35 发布

SovP.

最新推荐文章于 2021-06-08 09:32:35 发布

阅读量143

点赞数 1

分类专栏：选择器文章标签： jquery 前端

本文链接：https://blog.csdn.net/shlwin/article/details/115215052

版权

选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一，基本选择器
二，层级选择器
三，属性选择器
四，子元素选择器
五，其它选择器

一，基本选择器

1，id选择器

概述：根据给定的ID匹配一个元素，如果选择器中包含特殊字符，可以用两个斜杠（\\）转义。
选择器：#id

<body>
	<p id="p1">aaa</p>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("#p1");//id选择器
		console.log(arr);
	})
</script>

2，类选择器

概述：根据给定的类匹配元素，一个元素可以有多个类，只要有一个符合就能被匹配到。
选择器：.class

<body>
	<p class="p1">aaa</p>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $(".p1");//类选择器
		console.log(arr);
	})
</script>

3，通配符选择器

概述：匹配所有元素
选择器：*

<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("*");//通配符选择器匹配所有
		console.log(arr);
	})
</script>

4，element选择器

概述：根据给定的元素名匹配所有元素
选择器：element

<body>
	<p>aaa</p>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("p");//通过元素名匹配p元素
		console.log(arr);
	})
</script>

5，分组选择器

概述：将每一个选择器匹配到的元素合并后一起返回。
选择器：selector1,selector2,selectorN

<body>
	<p>aaa</p>
	<b>bbb</b>
	<span>ccc</span>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("p,b,span");//获取p,b,span元素
		console.log(arr);
	})
</script>

二，层级选择器

1，后代选择器

概述：在给定的父元素下匹配所有的后代元素
选择器：ancestor descendant

<body>
	<div>
		<p>aaa</p>
		<b>bbb</b>
		<span>ccc</span>
	</div>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("div p");//获取div下边的p元素
		console.log(arr);
	})
</script>

2，直接子选择器（>）

概述：在给定的父元素下匹配所有的子元素，用以匹配元素的选择器，并且它是第一个选择器的子元素。
选择器：parent>child

<body>
	<div>
		<p>aaa</p>
		<b>bbb</b>
		<span>ccc</span>
	</div>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("div>p");//获取div子元素的p元素
		console.log(arr);
	})
</script>

3，相邻兄弟选择器（+）

概述：匹配所有紧接在prev元素后的next元素
选择器：prev + next

<body>
	<div>
		<p>aaa</p>
		<b>bbb</b>
		<span>ccc</span>
	</div>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("b+span");//获取span元素
		console.log(arr);
	})
</script>

4，通用兄弟选择器（~）

概述：匹配prev元素之后的所有siblings元素
选择器：prev ~ siblings

<body>
	<div>
		<p>aaa</p>
		<b>bbb</b>
		<span>ccc</span>
		<span>ddd</span>
	</div>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr = $("b~span");//获取到两个span元素
		console.log(arr);
	})
</script>

三，属性选择器

选择器	概述
[attr]	匹配包含给定属性的元素
[attr=val]	匹配给定的属性是某个特定值的元素
[attr!=val]	匹配所不含有指定的属性，或者属性不等于特定值的元素，等价于：not([arr=val])
[attr^=val]	匹配给定的属性是以某些值开始的元素
[attr$=val]	匹配给定的属性是以某些值结尾的元素
[attr*=val]	匹配给定的属性是以包含某些值的元素
[attr\|=val]	匹配给定的属性是以val-开头的元素
[attr~=val]	匹配给定的属性值包含val单词的元素
[…][…]	复合属性选择器，需要同时满足多个条件时使用

<body>
	<input type="text" />
	<input type="te-xt" />
	<input type="password" />
	<input type="image" />
	<input type="radio" name="men"/>男
	<input type="reset" value="重置"/>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr1 = $("input[type]");//input中包含type的所有元素
		let arr2 = $("input[type=text]");//input中type为text的元素
		let arr3 = $("input[type!=text]");//input中除type为text的所有元素
		let arr4 = $("input[type^=r]");//input中type以r开头的所有元素
		let arr5 = $("input[type$=t]");//input中type以t结尾的所有元素
		let arr6 = $("input[type*=e]");//input中type值包含e的所有元素
		let arr7 = $("input[type|=te]");//input中type值所有以te-开头的元素
		let arr8 = $("input[type~=radio]");//input中type值中包含radio单词的元素
		let arr9 = $("input[type=radio][name=men]");//input中type值为radio并且name值为men的元素
	})
</script>

四，子元素选择器

选择器	概述
:first-child	匹配父级元素下第一个子元素
:last-child	匹配父级元素下最后一个子元素
:first-of-type	匹配父级元素下同类型的第一个子元素
:last-of-type	匹配父级元素下同类型的最后一个子元素
:nth-child(n)	匹配父级元素下第n个子元素
:nth-last-child(n)	匹配父级元素下第n个子元素，计数从最后一个元素开始到第一个元素。
:nth-of-type(n)	匹配同属于一个父元素下，并且标签名相同的第n个子元素
:nth-last-of-type(n)	匹配所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个元素
:only-child	匹配父级元素中的唯一一个子元素

<body>
	<ul>
		<li>John</li>
		<li>Karl</li>
		<li>Brandon</li>
	</ul>
	<ul>
		<li>Glen</li>
		<li>Tane</li>
		<li>Ralph</li>
	</ul>
	<ul>
		<li>Bobn</li>
	</ul>
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr1 = $("ul li:first-child");//ul下第一个li元素
		let arr2 = $("ul li:last-child");//ul下最后一个li元素
		let arr3 = $("ul li:first-of-type");//ul下第一个li元素
		let arr4 = $("ul li:last-of-type");//ul下最后一个li元素
		let arr5 = $("ul li:nth-child(2)");//ul下第2个li元素
		let arr6 = $("ul li:nth-last-child(3)");//ul下倒数第3个li元素（等同第一个元素）
		let arr7 = $("ul li:nth-of-type(2)");//ul下第2个li元素
		let arr8 = $("ul li:nth-last-of-type(3)");//ul下倒数第3个li元素（等同第一个元素）
		let arr9 = $("ul li:only-child");//ul下唯一一个li元素
	})
</script>

五，其它选择器

1，基本

选择器	概述
:first	获取选择器选中的多个元素中的第一个元素
:last	获取选择器选中的多个元素中的最后一个元素
:eq(index)	选中指定索引位置的元素，index从0开始
:lt(index)	选中小于index索引的元素
:gt(index)	选中大于index索引的元素
:not(seletor)	排除seletor选中的元素
:odd	获取奇数对应的元素
:even	获取偶数对应的元素
:focus	获取聚焦的元素
:target	获取URL对应的锚点的元素

<body>
	<ul>
		<li>list item 1</li>
   	 	<li>list item 2</li>
    	<li>list item 3</li>
    	<li>list item 4</li>
    	<li>list item 5</li>
	</ul>
	<input name="apple" />
	<input name="flower" checked="checked" />
</body>
<script type="text/javascript">
	$("document").ready(function(){
		let arr1 = $("li:first");//匹配第一个li元素
		let arr2 = $("li:last");//匹配最后一个li元素
		let arr3 = $("li:eq(1)");//匹配索引为1的li元素
		let arr4 = $("li:lt(2)");//匹配索引小于2的所有li元素
		let arr5 = $("input:not(checked)");//匹配排除checked选中的所有input元素
		let arr6 = $("li:odd");//匹配奇数对应的所有li元素
		let arr7 = $("li:even");//匹配偶数对应的所有li元素
		let arr8 = $("input:focus")//匹配聚焦的input元素
		let arr9 = $("li:target");//匹配URL对应的锚点的元素
	})
</script>

2，内容

选择器	概述
:contains(text)	获取选中的元素中包含指定的文本元素
:empty	获取标签体中内容为空的元素
:parent	获取标签体中内容不为空的元素
:has(selector)	查找元素中是否包含指定选择器的元素

<body>
	<div>John Resig</div>
	<div>George Martin</div>
	<div>Malcom John Sinclair</div>
	<div>J. Ohn</div>
	<div></div>
	<div><p>aaa</p></div>
</body>
<script type="text/javascript">
	let arr1 = $("div:contains('John')");//匹配div中包含John的元素
	let arr2 = $("div:empty");//匹配div中内容为空的元素
	let arr3 = $("div:parent");//匹配div中内容不为空的元素
	let arr4 = $("div:has(p)");//查找包含p元素的div元素
<script>

3，可见性

选择器	概述
:hidden	匹配所有不可见元素，可以处理display：none、input:hidden、内容不可见的标签（script、style、title、meta等）
:visible	匹配所有可见的元素

<body>
	<table>
	  <tr style="display:none"><td>Value 1</td></tr>
	  <tr><td>Value 2</td></tr>
	</table>
</body>
<script type="text/javascript">
	let arr1 = $("tr:hidden");//查找隐藏的tr元素
	let arr2 = $("tr:visible");//查找未隐藏的tr元素
</script>

4，表单对象属性

选择器	概述
:checked	获取所有被勾选的元素
:selected	获取被选中的元素
:disabled	获取所有被禁用的元素
:enabled	获取所有被启用的元素

<body>
	<form>
		<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
	  	<input type="checkbox" name="newsletter" value="Weekly" />
	  	<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
	  	<input name="email" disabled="disabled" />
	  	<input name="id" />
	  	<select>
			  <option value="1">Flowers</option>
			  <option value="2" selected="selected">Gardens</option>
			  <option value="3">Trees</option>
		</select>
	</form>
</body>
<script type="text/javascript">
	let arr1 = $("input:checked");//查找所有被勾选的复选框元素
	let arr2 = $("select option:selected");//查找所有选中的选项元素
	let arr3 = $("input:disabled");//查找所有不可用的input元素
	let arr4 = $("input:enabled");//查找所有可用的input元素
</script>

5，选择器中的特殊字符

如果ID，class属性的值中包含特殊字符(# ， . + > ~ \等)，需要对特殊字符进行转义，例如：\\#.

$.escapeSeletor(selector)
对存在特殊字符的内容进行转义，返回转义后的结果

SovP.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之选择器的介绍

文章目录一，基本选择器1，id选择器2，类选择器一，基本选择器1，id选择器概述：根据给定的ID匹配一个元素，如果选择器中包含特殊字符，可以用两个斜杠（\\）转义。选择器：#id<script type="text/javascript"> $("document").ready(function(){ let arr = $("#p1");//id选择器 console.log(arr); })</script>2，类选择器概述：根据给定的类匹配元素
复制链接

扫一扫

专栏目录