jQuery 学习-样式篇（三）：jQuery 选择器类型详解

最新推荐文章于 2022-09-07 23:37:19 发布

店伙计

最新推荐文章于 2022-09-07 23:37:19 发布

阅读量6.2k

点赞数 1

分类专栏： Web 前端开发笔记文章标签： jquery

本文链接：https://blog.csdn.net/xzk9381/article/details/111688726

版权

Web 前端开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688726，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

一、ID 选择器

ID 选择器是最基本的选择器，jQuery 内部使用了 JavaScript 函数 document.getElementByID() 来处理 ID 的获取。

ID 是唯一的，每个 ID 在每个页面中只能使用一次，如果多个元素分配了相同的 ID，将只匹配该 ID 选择集合的第一个 DOM 元素。

在 jQuery 中，ID 选择器的命令是 $('#id')：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#myspan').html('jQuery 方式').css('color','pink');
		})
	</script>
</head>
<body>
	<span id="myspan"></span>
</body>
</html>

二、类选择器

类选择器的命令是 $('.class')，由于 jQuery 中内部实现了一个隐式的循环处理，所以可以很方便的为多个元素给予样式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		// onload = function (){
		// 	var allLi = document.getElementsByClassName('myli');
		// 	for (var i = 0;i < allLi.length;i++){
		// 		allLi[i].style.color = 'red';
		// 	}
		// }
		$(document).ready(function (){
			$('.myli').css('color','red')
		})
	</script>
</head>
<body>
	<ul>
		<li class="myli">第一个</li>
		<li class="myli">第二个</li>
		<li class="myli">第三个</li>
		<li class="myli">第四个</li>
	</ul>
</body>
</html>

上面代码注释的部分是使用原生的方式实现的为所有元素赋予样式，可以很明显的看出 jQuery 的代码量要少于原生的方式。并且 jQuery 中可以直接为所有选择的元素添加样式，不需要进行循环。

三、元素选择器

元素选择器是通过指定标签名称来搜索所有节点，与类选择器相似，也可以批量为元素增加属性。元素选择器的格式是 $('element')：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('li').css('color','pink')
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

四、全元素选择器

在原生的 JS 中，全元素选择器使用 * ，即可选中所有元素。在 jQuery 中，全元素选择器的格式是 $('*')：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		// onload = function (){
		// 	var all = document.body.getElementsByTagName('*');
		// 	for (var i = 0;i < all.length;i++){
		// 		all[i].style.color = 'red';
		// 	}
		// }
		$(document).ready(function (){
			$('body *').css('color','red')
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
	<span>第五个</span>
</body>
</html>

五、层级选择器

jQuery 的层级选择器可以分别用来选择子元素、后代元素、兄弟元素、相邻元素。

1. 子元素选择器

选择子元素的方式是 $('parent>child')，例如选择 ul 下面的所有 li 标签：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('ul>li'))
		})
	</script>
</head>
<body>
	<ul>
		<li>
			<div>第一个</div>
		</li>
		<li>
			<span>第二个</span>
		</li>
		<li>
			<div>
				<ol>
					<li>第三个</li>
				</ol>
			</div>
		</li>
	</ul>
</body>
</html>

上面的代码中选择了 ul 下面的所有 li 标签，但是不包含 ol 中的 li 标签。如果想选择 ol 下的所有 li 标签，并且将字体颜色改为红色，那么可以写成如下形式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li>div>ol>li').css('color','red')
		})
	</script>
</head>
<body>
	<ul>
		<li>
			<div>第一个</div>
		</li>
		<li>
			<span>第二个</span>
		</li>
		<li>
			<div>
				<ol>
					<li>第三个</li>
				</ol>
			</div>
		</li>
	</ul>
</body>
</html>

2. 后代元素选择器

后代元素选择器可以选中后代中的所有元素，例如想要选中 ul 下面所有的 li，包括 ol 中的，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul li').css('color','orange')
		})
	</script>
</head>
<body>
	<ul>
		<li>
			<div>第一个</div>
		</li>
		<li>
			<span>第二个</span>
		</li>
		<li>
			<div>
				<ol>
					<li>第三个</li>
				</ol>
			</div>
		</li>
	</ul>
</body>
</html>

3. 相邻元素选择器

相邻元素选择器可以选择相邻的元素，格式为 $('prev + next')，例如下面的代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#div1 + span').css('color','red');
			$('.span1 + #div2').css('color','orange');
			$('#div1 + #div2').html('测试');
		})
	</script>
</head>
<body>
	<div id="div1">第一个</div>
	<span class="span1">第二个</span>
	<div id="div2">第二个</div>
</body>
</html>

上面的代码中，第 8 行会将 span 标签内的文字变为红色；第 9 行会将最后一个 div 标签中的内容变为橘黄色；但是第 10 行的内容不会生效，因为两个 div 是不相邻的。

4. 兄弟元素选择器

兄弟元素选择器会匹配指定元素之后的所有兄弟元素，格式为 $('prev ~ siblings')：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#div1 ~ div').css('color','red');
		})
	</script>
</head>
<body>
	<div id="div1">第一个div</div>
	<span class="span1">第一个span</span>
	<div id="div2">第二个div</div>
	<span class="span1">第二个span</span>
	<div id="div3">第三个div</div>
	<span class="span1">第三个span</span>
</body>
</html>

上面的代码中会选择 div1 后面所有的 div 标签，并将内容设置为红色。

六、筛选选择器

筛选选择器的用法与 CSS 中的伪元素相似，选择器用冒号：开头，并可以搭配 eq()、lt()、gt()、even、odd 来进行筛选。

1. 匹配集合中选择索引值为 index 的元素

这里需要用到的命令格式 $(':eq(index)')，例如下面的代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li:eq(2)').css('color','red');
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

上面的代码中会选择出 ul 标签中索引值为 2 的 li 标签，并将颜色修改为红色。

其实 eq 也可以当作一个方法在外部引用：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li').eq(2).css('color','orange');
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

2. 匹配集合中大于或小于指定索引值的元素

说到大于和小于，那么就需要使用到 gt 和 lt 了，命令格式为 $(':gt()') 或者 $(':lt()')：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li:gt(1)').css('color','red');
			$('ul>li:lt(1)').css('color','orange');
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

需要说明的一点是，gt() 和 lt() 不支持像 eq() 那样单独拿出来作为方法来引用。

3. 匹配集合中索引值为偶数或者奇数的元素

使用 $(':even') 可以匹配索引值为偶数的元素；使用 $(':odd') 可以匹配索引值为奇数的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li:even').css('color','red');
			$('ul>li:odd').css('color','green');
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

4. 匹配集合中的第一个元素或最后一个元素

使用 $(':first') 和 $(':last')可以分别匹配集合中的第一个元素和最后一个元素，其中 first() 和 last() 可以单独拿出来作为方法使用：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li:first').css('color','red');
			// $('ul>li').first().css('color','red');
			$('ul>li:last').css('color','green');
			// $('ul>li').last().css('color','green');
			// $('ul>li').eq($('ul>li').length - 1).css('color','green');
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

5. 匹配集合中除指定元素以外的元素

使用 $(':not(selector)') 可以匹配除指定元素以外的元素，not() 也可以单独拿出来作为方法使用：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li:not(.spc)').css('color','red');
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li class="spc">第二个</li>
		<li id="spc1">第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

如果想排除多个指定元素，可以写成如下形式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('ul>li').not('.spc').not('#spc1').css('color','green');
		})
	</script>
</head>
<body>
	<ul>
		<li>第一个</li>
		<li class="spc">第二个</li>
		<li id="spc1">第三个</li>
		<li>第四个</li>
	</ul>
</body>
</html>

6. 匹配集合中的所有标题元素 h1、h2、h3

使用 $(':header') 可以匹配到集合中所有的标题元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv :header').css('color','green');
		})
	</script>
</head>
<body>
	<div id="mydiv">
		<div>第一个</div>
		<span>第二个</span>
		<h1>第三个</h1>
		<h2>第四个</h2>
	</div>
</body>
</html>

7. 获取文档的根元素，也就是 html

使用 $(':rorot') 可以获取到文档的根元素，也就是 html 标签：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$(':root').css('background','green');
		})
	</script>
</head>
<body>
	<div id="mydiv">
		<div>第一个</div>
		<span>第二个</span>
		<h1>第三个</h1>
		<h2>第四个</h2>
	</div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688726，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

七、内容选择器

1. 选择所有包含指定文本的元素

使用 $('contains()') 可以查找包含指定文本的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			// $('body>*:contains(a)').css('color','red');
			$('body :contains(a)').css('color','red');
		})
	</script>
</head>
<body>
	<div>abcd</div>
	<span>efg</span>
	<h1>adf</h1>
</body>
</html>

2. 选择包含指定元素的父级元素

使用 $(^{'} h a s ()^{'}) 可以获取到包含这个指定的元素的父级元素，例如 ‘$ (‘p:has(span)’)` 就会查找到包含 span 标签的 p 标签，但是只会查找直接父级：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('p:has(span)').css('color','red');
		})
	</script>
</head>
<body>
	<p>
		<div>
			<span>第一个</span>
		</div>
	</p>
	<p>
		<span>第二个</span>
	</p>
</body>
</html>

上面的代码中，只会找到第二个 p 标签，因为这是 span 的直接父级。

3. 选择所有含有子元素或者文本的元素

使用 $(’:parent’) 可以获取到所有包含子元素或者文本的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('body>*:parent').css('color','red');
		})
	</script>
</head>
<body>
	<div>
		<span>测试</span>
	</div>
	<div>测试2</div>
	<div></div>
</body>
</html>

4. 选择所有没有子元素的元素（包含文本节点）

使用 $(':empty') 可以获取到所有没有子元素或者没有文本的节点：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('body>*:empty').html("不包含子元素或文本的节点").css('color','green');
		})
	</script>
</head>
<body>
	<div>
		<span>测试</span>
	</div>
	<div>测试2</div>
	<div></div>
</body>
</html>

八、可见性筛选选择器

1. 选择所有显示的元素

使用 $(':visible') 可以获取到所有显示的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('body>*:visible'));
		})
	</script>
</head>
<body>
	<div>显示1</div>
	<span>显示2</span>
	<div style="display: none;">不显示1</div>
	<input type="hidden" value="不显示2">
</body>
</html>

2. 选择所有隐藏的元素

使用 $(':hidden') 可以获取到所有隐藏的元素，也就是元素的 display 属性值为 none 或者 input 标签中 type 类型为 hidden 的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('body>*:hidden'));
		})
	</script>
</head>
<body>
	<div>显示1</div>
	<span>显示2</span>
	<div style="display: none;">不显示1</div>
	<input type="hidden" value="不显示2">
</body>
</html>

九、属性选择器

1. 匹配集合中属性为给定值的元素

使用 $('[attr="value"]') 可以获取到指定属性值的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
        // 原生 JS 的方式是 document.querySelector('div[flag="test"]')
		$(document).ready(function (){
			$('[flag="test"]').html("测试");
			$('div[flag="test"]').css('color','red');
		})
	</script>
</head>
<body>
	<div flag='test'></div>
	<span flag='test'></span>
</body>
</html>

2. 匹配集合中属性不是给定值的元素

使用 $('[attr!="value"]') 可以获取到不是指定属性值的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag!="test"]').html("测试").css('color','red');
		})
	</script>
</head>
<body>
	<div flag='test'></div>
	<span flag='test2'></span>
</body>
</html>

3. 匹配集合中属性是给定字符开头的元素

使用 $('[attr^="value"]') 可以获取指定开头属性值的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag^="test"]').html("测试").css('color','red');
		})
	</script>
</head>
<body>
	<div flag='test'></div>
	<span flag='test2'></span>
</body>
</html>

4. 匹配集合中属性是给定字符结尾的元素

使用 $('[attr$="value"]') 可以获取指定结尾属性值的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag$="abc"]').html("测试").css('color','red');
		})
	</script>
</head>
<body>
	<div flag='testabc'></div>
	<span flag='test2abc'></span>
</body>
</html>

5. 匹配集合中存在该属性的元素

使用 $('[attr]') 可以获取到存在指定属性的元素，而不用管该属性的值：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag]').html("测试").css('color','red');
		})
	</script>
</head>
<body>
	<div flag='testabc'></div>
	<span flag ></span>
</body>
</html>

6. 匹配集合中存在多个指定属性的元素

使用 $('[attr1][attr2]') 可以匹配到同时包含这两个属性的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag][test]').html("测试").css('color','red');
		})
	</script>
</head>
<body>
	<div flag='testabc' test></div>
	<span flag='testabc' ></span>
</body>
</html>

7. 匹配集合中的属性值是给定字符串或以该文字串为前缀的元素

使用 $('[attr|="value"]') 可以匹配到集合中的属性值是该字符串或以该字符串为前缀的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag|="test"]').html("测试").css('color','red');
		})
	</script>
</head>
<body>
    <div flag='test-abc' test></div>
	<span flag='test' ></span>
	<div flag='testabc' test></div>
</body>
</html>

上面的代码中，test-abc 和 test 可以匹配到，testabc 无法匹配到。

8. 匹配集合中的属性值包含给定字符串的元素

使用 $('[attr*="value"]') 可以匹配到属性值中包含指定字符串的元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag*="te"]').html("测试").css('color','red');
		})
	</script>
</head>
<body>
	<div flag='test-abc' test></div>
	<span flag='abcte' ></span>
	<div flag='wtew' test></div>
</body>
</html>

9. 匹配集合中的属性值包含以空格作为分隔符的属性值

使用 $('[attr]~="value"') 可以匹配到自定字符串的属性值或者是以空格分割的多个属性值中的一个：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('[flag~="a"]').css('color','red');
		})
	</script>
</head>
<body>
	<div flag='a b c' test>测试1</div>
	<span flag='a-b-c' >测试2</span>
	<div flag='a' test>测试3</div>
</body>
</html>

上面的代码中，测试1 和测试 3 可以匹配到，测试2 不能匹配。

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688726，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

十、子元素筛选选择器

1. 选择所有父级元素的第一个子元素

使用 $(':first-child') 可以获取到所有父级元素的第一个子元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('div span:first-child').css('color','red');
		})
	</script>
</head>
<body>
	<div id="div1">
		<span>测试1</span>
		<span>测试2</span>
		<span>测试3</span>
		<span>测试4</span>
	</div>
</body>
</html>

上面的代码中会将"测试1"变为红色。

如果将上面的代码修改为如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('div:first-child'));
		})
	</script>
</head>
<body>
	<div id="div1">
		第一个 div
		<div id="div2">第二个 div</div>
	</div>
	<div id="div3">第三个 div</div>
</body>
</html>

那么在控制台中会输出 div1 和 div2。这是因为在表达式中使用的是标签选择器，选择的是 div 标签，那么 div1 和 div3 就只会选择第一个 div 标签。div2 标签作为内部的第一个 div 标签也会选择上。

2. 选择所有父级元素的最后一个子元素

使用 $(':last-child') 可以获取到所有父级元素的最后一个子元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('div span:last-child').css('color','red');
		})
	</script>
</head>
<body>
	<div id="div1">
		<span>测试1</span>
		<span>测试2</span>
		<span>测试3</span>
		<span>测试4</span>
	</div>
</body>
</html>

上面的代码中会将"测试4"变为红色。

如果将上面的代码修改为如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('div span:last-child').css('color','red');
		})
	</script>
</head>
<body>
	<div id="div1">
		<span>测试1</span>
		<span>测试2</span>
		<span>测试3</span>
		<span>测试4</span>
	</div>
</body>
</html>

那么在控制台中会输出 div2 和 div3。

3. 如果某个元素是其父级元素唯一的子元素，则选中

使用 $(':only-child') 可以获取到某个父级元素的唯一子元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('div span:only-child'));
		})
	</script>
</head>
<body>
	<div id="div1">
		<span id="span1">span1</span>
	</div>
	<div id="div2">
		<span id="span2">span2</span>
		<span id="span2">span2</span>
	</div>
</body>
</html>

上面的代码中只会选择到 span1 元素，因为他是父级元素的唯一子元素。

4. 选中指定元素的父级元素中指定索引的子元素（索引从1开始，从上向下计算）

使用 $(':nth-child(index)') 可以获取到指定元素的父级元素中指定索引的子元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('div:nth-child(1)'))
		})
	</script>
</head>
<body>
	<div id="div1">
		<span id="span1">span1</span>
		<span id="span2">span2</span>
		<span id="span3">span3</span>
		<span id="span4">span4</span>
	</div>
	<div id="div2">
		<span id="span5">span5</span>
		<span id="span6">span6</span>
	</div>
</body>
</html>

上面的代码中，指定查找 div 标签的父级元素（body）中的第一个子元素，也就是 div1。

如果想要获取 div1 下面的第三个子元素，那么可以写成如下两种形式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
            // 第一种
			console.log($('div:nth-child(1)>span:nth-child(3)'))
            // 第二种
            console.log($('#div1>span:nth-child(3)'))
		})
	</script>
</head>
<body>
	<div id="div1">
		<span id="span1">span1</span>
		<span id="span2">span2</span>
		<span id="span3">span3</span>
		<span id="span4">span4</span>
	</div>
	<div id="div2">
		<span id="span5">span5</span>
		<span id="span6">span6</span>
	</div>
</body>
</html>

5. 选中指定元素的父级元素中指定索引的子元素（索引从1开始，从下向上计算）

使用 $(':nth-last-child(index)') 可以获取到指定元素的父级元素中指定索引的子元素，与 $(':nth-child(index)') 不同的是，这个是从下向上计算的：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($('div:nth-last-child(1)'))
		})
	</script>
</head>
<body>
	<div id="div1">
		<span id="span1">span1</span>
		<span id="span2">span2</span>
		<span id="span3">span3</span>
		<span id="span4">span4</span>
	</div>
	<div id="div2">
		<span id="span5">span5</span>
		<span id="span6">span6</span>
	</div>
</body>
</html>

上面的代码中，指定查找 div 标签的父级元素（body）中从下熵上的第一个子元素，也就是 div2。

十一、表单元素选择器

jQuery 中专门加入了表单选择器，从而能够及其方便地获取到某个类型的表单元素。

1. 选取所有的 input、textarea、select 和 button 元素

使用 $(':input') 可以选取所有的 input、textarea、select 和 button 元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':input'))
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

如果只想获取所有表单元素中的第一个，可以使用 $(':nth-child(index)')：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':input:nth-child(1)'))
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

2. 匹配所有的文本框

使用 $(':text') 可以匹配所有的文本框：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':text'))
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

输出的结果中只匹配到 <input type="text" value="text类型">，无法匹配到 <textarea></textarea>。

3. 匹配所有的密码框

使用 $(':password') 可以匹配到所有的密码框：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':password'))
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

上面的代码中会匹配到 <input type="password">。

4. 选择所有的单元框、复选框和提交框

使用 $(':radio') 可以匹配到所有的单元框；

使用 $(':checkbox') 可以匹配到所有的复选框；

使用 $(':submit') 可以匹配到所有的提交按钮，包括 <button></button>：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':radio'));
			console.log($(':checkbox'));
			console.log($(':submit'));
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

5. 选择所有的图片域

使用 $(':image') 可以匹配到所有的图片域：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':image'));
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

5. 选择所有的重置按钮

使用 $(':reset') 可以匹配所有的重置按钮：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':reset'));
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

6. 选择所有的 button 按钮

使用 $(':button') 可以匹配到所有的 button 按钮：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':button'));
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

上面的代码可以匹配到 <input type="button" value="button"> 和 <button>button</button>。

7. 匹配所有的文件域

使用 $(’:file’) 可以匹配到所有的文件域：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':file'));
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型">
		<input type="password">
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image">
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>button</button>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688726，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

十二、表单对象属性筛选选择器

表单对象属性筛选选择器是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选。

1. 选择可用的表单元素

使用 $(':enabled') 可以匹配到可用的表单元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':enabled'));
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型" disabled="disabled">
		<input type="password" disabled>
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image" disabled>
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select disabled="">
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button disabled>button</button>
</body>
</html>

2. 选择不可用的表单元素

使用 $(':disabled') 可以匹配到可用的表单元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':disabled'));
		})
	</script>
</head>
<body>
	<form>
		<input type="text" value="text类型" disabled="disabled">
		<input type="password" disabled>
		<input type="radio">
		<input type="checkbox">
		<input type="submit">
		<input type="image" disabled>
		<input type="reset">
		<input type="button" value="button">
		<input type="file">
	</form>
	<textarea></textarea>
	<select disabled="">
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button disabled>button</button>
</body>
</html>

3. 选取被选中的 input 元素

使用 $(':checked') 可以匹配到被选中的 input 元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':checked'));
		})
	</script>
</head>
<body>
	<input type="checkbox" checked="checked">
	<input type="checkbox" checked="checked">
	<input type="checkbox">
	<input type="radio" checked="checked">
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
</body>
</html>

4. 选取被选中的 option 元素（复选框）

使用 $(':selected') 可以匹配到被选中的 option 元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			console.log($(':selected'));
            // 可以打印当前 selected 对应的值
            console.log($(':selected').val());
		})
	</script>
</head>
<body>
	<select>
		<option>1</option>
		<option selected="selected">2</option>
		<option>3</option>
	</select>
</body>
</html>

十三、特殊选择器 this

在 jQuery 中，$(this) 是与原生的 this 有区别的。原生的 this 是一个动态的指向，可以根据对象的改变而改变。而 jQuery 中的 $(t h i s) 则永远指向上下文对象，不会改变。$ (this) 可以直接调用 jQuery 的方法和属性值：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').click(function(){
				$(this).html('完啦');
			})
		})
	</script>
</head>
<body>
	<div id="mydiv">点击一下</div>
</body>
</html>

十四、not 筛选选择器

not 筛选选择器可以将某一类标签中具有指定属性的标签给排除出去，可以同时指定多个属性排除：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('div').not('#div1').css('color','red');
			$('div').not('#div1,.div2').css('fontSize','50px')
		})
	</script>
</head>
<body>
	<div id='div1'>1</div>
	<div>2</div>
	<div>3</div>
	<div class="div2">4</div>
</body>
</html>

练习

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>
    <script type="text/javascript" src='jquery-1.12.4.js'></script>
    <script type="text/javascript">
        $(document).ready(function (){
            //找到第一类水果中的第一个p元素，并改变颜色 #9932CC
            $('#menu #menu_female .tag p:first-child').css('color','#9932cc');
            //找到第二类把a元素从顺序1-4加上颜色 red
            $('#menu .tag_More:eq(0) a:lt(4)').css('color','red');
            //找到所有a元素中属性名name="setColor"的元素，并设置颜色 red
            $('#menu a[name="setColor"]').css('color','red');
            //选中第三类水果中第9个a元素，并改变颜色 #66CD00
            $('#menu #menu_con .tag a:eq(8)').css('color','#66CD00');
            //找到所有类中的a标签，把其中a元素中包含文字"更多"的节点，改变颜色
            $('#menu a:contains("更多")').css('color','orange');
        })
    </script>
</head>
<body>
<div id="menu">
    <!--tag标题-->
    <div id="menu_female">
        <h3>水果一</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.苹果</a>
                    <a>2.梨</a>
                    <a>3.沙果</a>
                    <a name='setColor'>4.海棠</a>
                    <a>5.野樱莓</a>
                    <a>6.枇杷</a>
                    <a>7.欧楂</a>
                    <a>8.山楂</a>
                    <a>9.温柏</a>
                    <a>10.樱桃</a>
                    <a>11.水蜜桃</a>
                    <a>12.油桃</a>
                    <a>13.蟠桃</a>
                    <a>14.梅子</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.西瓜</a>
                    <a>2.哈密瓜</a>
                    <a>3.香瓜</a>
                    <a>4.白兰瓜</a>
                    <a>5.刺角瓜</a>
                    <a>6.金铃子</a>
                    <a>7.香蕉</a>
                    <a>8.大蕉</a>
                    <a>9.南洋红香蕉</a>
                    <a>10.枣</a>
                    <a>11.番木瓜</a>
                    <a>12.无花果</a>
                    <a>13.菠萝蜜</a>
                    <a>14.构树</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>>
    </div>
    <div id="menu_con">
        <h3>水果二</h3>
        <div class="tag" style="display:block">
            <dl>
                <dd>
                    <p>第三类</p>
                    <a>1.火龙果</a>
                    <a>2.黄龙果</a>
                    <a name='setColor'>3.红心火龙果</a>
                    <a>4.荔枝</a>
                    <a>5.龙眼</a>
                    <a>6.红毛丹</a>
                    <a>7.榴莲</a>
                    <a>8.猴面包果</a>
                    <a>9.阳桃</a>
                    <a>10.三敛果</a>
                    <a>11.椰子</a>
                    <a>12.槟榔</a>
                    <a>13.蛇皮果</a>
                    <a>14.山竹</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第四类</p>
                    <a>1.西瓜</a>
                    <a>2.哈密瓜</a>
                    <a>3.香瓜</a>
                    <a name='setColor'>4.白兰瓜</a>
                    <a>5.刺角瓜</a>
                    <a>6.金铃子</a>
                    <a>7.香蕉</a>
                    <a>8.大蕉</a>
                    <a>9.南洋红香蕉</a>
                    <a>10.枣</a>
                    <a>11.番木瓜</a>
                    <a>12.无花果</a>
                    <a>13.菠萝蜜</a>
                    <a>14.构树</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>>
    </div>
</div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688726，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

店伙计

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
jQuery 学习-样式篇（三）：jQuery 选择器类型详解

jQuery 选择器一、ID 选择器ID 选择器是最基本的选择器，jQuery 内部使用了 JavaScript 函数 document.getElementByID() 来处理 ID 的获取。ID 是唯一的，每个 ID 在每个页面中只能使用一次，如果多个元素分配了相同的 ID，将只匹配该 ID 选择集合的第一个 DOM 元素。在 jQuery 中，ID 选择器的命令是 $('#id')：<!DOCTYPE html><html><head> <ti
复制链接

扫一扫