JQuery中的九大选择器及其应用（中）_九个选择器web上机实验-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46160024/article/details/124761981

本文介绍了jQuery中的内容选择器、可见性选择器和属性选择器的用法。通过实例展示了如何筛选包含特定文本、空元素、具有特定属性的元素，并演示了如何操作这些元素的样式和属性。内容选择器如`:contains()`用于查找包含特定文本的元素，可见性选择器如`:hidden`和`:visible`用于选取隐藏和显示的元素，属性选择器如`[attribute=value]`则用来选取具有特定属性值的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第四种：内容选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>内容选择器</title>
	<script type="text/javascript" src="jquery-3.6.0/jquery-3.6.0.js"></script>
	<style type="text/css">
    	.myClass{
    		font-size: 44px;
    		color: blue;
    	}
    </style>
</head>
<body>
	<div><p>John Resig</p></div>
	<div><p>George Martin</p></div>
	<div>Malcom John Sinclair</div>
	<div>J. Ohn</div>
	<div></div>
	<p></p>
	<p></p>
	<script type="text/javascript">
		/*
			JQuery中的九大选择器
				第四种：内容选择器
		*/
		// 内容选择器
		// (1) 输出所有包含文本“John”的div元素的个数
		// :contains('文本') 匹配包含指定文本的元素
		// 注意这里双引号与单引号的使用方式
		// 要么双引号包着单引号，要么单引号包着双引号
		// 统一使用单引号或者双引号
		// 将导致系统发生引号匹配错误
		console.log($("div:contains('John')").length) // 2
		// (2) 输出所有p元素为空的元素个数
		// 判断元素是否为空，需要同时满足以下两个条件：
		// a. 没有子元素 b. 没有文本
		console.log($('p:empty').length) // 2
		// (3) 给所有包含p元素的div元素添加一个myClass样式
		// :has 匹配含有选择器所匹配的元素的元素
		// :addClass(class) 为每个匹配的元素添加指定的类名
		// 在浏览器中将会观察到John Resig与George Martin字体变大、变蓝
		$('div:has(p)').addClass('myClass')
		// (4) 输出所有含有子元素或者文本的p元素的个数
		// :parent 匹配含有子元素或者文本的元素
		console.log($('p:parent').length) // 2
	</script>
</body>
</html>

第五种：可见性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>可见性选择器</title>
	<script type="text/javascript" src="jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<table border="1" align="center">
	  <tr style="display: none">
	  	<td>Value 1</td>
	  </tr>
	  <tr>
        <td>Value 2</td>
      </tr>
	  <tr>
        <td>Value 3</td>
      </tr>
	</table>
	<script type="text/javascript">
		/*
			JQuery中的九大选择器
				第五种：可见性选择器
		*/
		// 可见性选择器
		// (1) 输出隐藏的tr元素的个数
		// :hidden 匹配所有不可见元素，或者type为hidden的元素
		console.log($('tr:hidden').length) // 1
		// (2) 输出所有可见的tr元素的个数
		// :visible 匹配所有的可见元素
		console.log($('tr:visible').length) // 2
	</script>
</body>
</html>

第六种：属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>属性选择器</title>
	<script type="text/javascript" src="jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<div>
	  <p>Hello World!</p>
	</div>
	<div id="test2"></div>
	
	<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
	<input type="checkbox" id="myID" name="newsletter" value="Cold Fusion" />
	<input type="checkbox" name="newsaccept" value="Evil Plans" />
	<script type="text/javascript">
		/*
			JQuery中的九大选择器
				第六种：属性选择器
		*/
		// 属性选择器
		// (1) 输出所有含有id属性的div元素个数
		// [属性] 匹配包含指定属性的元素
		console.log($('div[id]').length) // 1
		// (2) 查找所有name属性是newsletter的input元素，并将其选中
		// [属性='属性值'] 匹配指定的属性是某个特定值的元素
		// attr('属性', '属性值') 为所有匹配的元素设置一个属性值
		// $("input[name='newsletter']").attr('checked', 'checked')
		// attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性
		$("input[name='newsletter']").attr({
			checked: 'checked'
		})
		// 输出所有name属性是newsletter的input元素中的第一个元素的checked属性值
	 	// attr('属性') 取得第一个匹配元素的属性值
		console.log($('input[name="newsletter"]').attr('checked')) // checked
		// (3) 查找所有name属性不是newsletter的input元素，并将其选中
		// [属性!='属性值'] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
		// 注意这里不包含name属性的input元素也会被匹配到
		$("input[name!='newsletter']").attr('checked', 'checked')
		// (4) 查找所有name属性以news开头的input元素，并将其选中
		// [属性^='属性值'] 匹配指定的属性是以某些值开始的元素
		// 注意：
		//     从这里开始，下面的每行代码，若想要看到程序运行后的效果，
		//     需要将其自身（不包括自身）上面的所有有关选中复选框的代码注释掉才行
		$("input[name^='new']").attr('checked', 'checked')
		// (5) 查找所有name属性以letter结尾的input元素，并将其选中
		// [属性$='属性值'] 匹配给定的属性是以某些值结尾的元素
		$("input[name$='letter']").attr('checked', 'checked')
		// (6) 查找所有name属性包含news的input元素，并将其选中
		// [attribute*=value] 匹配给定的属性是以包含某些值的元素
		$("input[name*='news']").attr('checked', 'checked')
		// (7) 找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，
		//     并将其选中
		// [selector1][selector2]...[selectorN]
		// 复合属性选择器，需要同时满足多个条件时使用
		$("input[id][name$='letter']").attr('checked', 'checked')
	</script>
</body>
</html>