jquery常规选择器

于 2020-04-08 16:57:59 发布
阅读量380 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yong53jun/article/details/105391752
本文全面解析了jQuery选择器的功能和使用方法，包括基本选择器、层级选择器、属性选择器、可见性过滤选择器、子元素过滤选择器、表单属性选择器、位置过滤选择器等，帮助读者掌握高效定位和操作DOM元素的技巧。

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

常规

1、id选择器
$("#myId")
2、类选择器
$(".myclass")
3、元素选择器
$("p")
4、通配符 *
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<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>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		$("*").css({ "background-color": "gray"});
		//$("html").css({ "background-color": "green"});
		//$(":root").css({ "background-color": "red"});
	</script>
</html>
5、selector1,selector2,selectorN
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>div</div>
		<p class="myClass">p class="myClass"</p>
		<span>span</span>
		<p class="notMyClass"> p class="notMyClass"</p>
		<p class="notMyClass">p class="notMyClass" </p>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
      	// 匹配所有满足的元素
		page = {}
		page.body = $("body");
		page.body.find("div,span,p.myClass").css({
			"background-color": "green"
		});		
	</script>
</html>
6、div > p 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
	<style>
		/* div > p{
			background-color:gray;
		} */
	</style>
</head>
<body>
	<div>		
		<p>p1标签</p>			
		<p>p2标签</p>
		<p>p3标签</p>
	</div>
	<p>div 外 p4标签</p>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	
	page = {}
	page.body = $("body");
	page.body.find("div > p").css({"background-color":"green"});
	
	//$(document.body).css( "background", "gray" );
	
</script>
</html>
7、a+b 匹配所有紧跟在 a 后的b元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<form>
		<label>Name:</label>
		<input name="name" />
		<fieldset>
			<label>Newsletter:</label>
			<input name="newsletter" />
		</fieldset>
	</form>
	<input name="none" />
	
	<label>Newsletter:22</label>
	<input name="newsletter222" />
	<input name="newsletter333" />
</body>
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	// 匹配所有紧跟在label标签后的input元素
	page = {}
	page.body = $("body");
	page.body.find("label + input").css({"background-color":"green"});
	
</script>
</html>
8、a~b匹配所有与**同辈的 ** 元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<form>
			<label>Name:</label>
			<input name="name" />
			<fieldset>
				<label>Newsletter:</label>
				<input name="newsletter" />
			</fieldset>
		</form>
		<input name="none" />
		<input name="none2" />
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配所有与表单同辈的 input 元素
		page = {}
		page.body = $("body");
		page.body.find("form ~ input").css({
			"background-color": "green"
		});
	</script>
</html>
9 :first 查找匹配的第一个元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<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>
		
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配ul中第一个li 元素
		page = {}
		page.body = $("body");
		page.body.find("li:first").css({ "background-color": "green"});
	</script>
</html>
10 :last查找匹配的最后一个元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<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>
		
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配ul中最后一个li 元素
		page = {}
		page.body = $("body");
		page.body.find("li:last").css({ "background-color": "green"});
	</script>
</html>
11 :not查找匹配的第一个元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<span>篮球&nbsp;</span><input type="radio" name="ball" checked="checked"  value="0"/>&nbsp;&nbsp;&nbsp;&nbsp;
		<span>足球&nbsp;</span><input type="radio" name="ball" value="1"/>&nbsp;&nbsp;&nbsp;&nbsp;
		<span>足球&nbsp;</span><input type="radio" name="ball" value="2"/>&nbsp;&nbsp;&nbsp;&nbsp;
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 
		page = {}
		page.body = $("body");
		page.body.find("input:not(:checked)").prev().css({ "color": "blue"});
		page.body.find("input[name='ball']").click(function(){
			$(this).prev().css({ "color": ""});
			page.body.find("input:not(:checked)").prev().css({ "color": "blue"});
		})
		
	</script>
</html>
12、:eq(n) 匹配ul中li下标为 n 元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<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>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配ul中li下标为 n 元素
		page = {}
		page.body = $("body");
		page.body.find("li:eq(2)").first().css({ "background-color": "green"});
	</script>
</html>
13、:odd 匹配奇数
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>

	<body>
		<table>
			<tr>
				<td>Header 1</td>
			</tr>
			<tr>
				<td>Value 1</td>
			</tr>
			<tr>
				<td>Value 2</td>
			</tr>
		</table>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配table中奇数行
		page = {}
		page.body = $("body");
		page.body.find("tr:odd").css({ "background-color": "green"});
		
	</script>

</html>
14、:even 匹配偶数
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>

	<body>
		<table>
			<tr>
				<td>Header 1</td>
			</tr>
			<tr>
				<td>Value 1</td>
			</tr>
			<tr>
				<td>Value 2</td>
			</tr>
		</table>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配table中偶数行
		page = {}
		page.body = $("body");
		page.body.find("tr:even").css({ "background-color": "red"});
		
	</script>

</html>
15、:gt(n) 匹配下标大于n的元素
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>

	<body>
		<table>
			<tr>
				<td>Header 1</td>
			</tr>
			<tr>
				<td>Value 1</td>
			</tr>
			<tr>
				<td>Value 2</td>
			</tr>
		</table>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配tr中偶数下标大于0的行
		page = {}
		page.body = $("body");
		page.body.find("tr:gt(0)").css({ "background-color": "red"});
		
	</script>

</html>
16、:lt(n) 匹配tr中下标小于n的行
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>

	<body>
		<table>
			<tr>
				<td>Header 1</td>
			</tr>
			<tr>
				<td>Value 1</td>
			</tr>
			<tr>
				<td>Value 2</td>
			</tr>
		</table>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配tr下标小于2的tr
		page = {}
		page.body = $("body");
		page.body.find("tr:lt(2)").css({ "background-color": "red"});
		
	</script>

</html>
17、:header 匹配如 h1, h2, h3之类的标题元素
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>

	<body>
		<div>
			<h1>Header 1</h1>
			<p>Contents 1</p>
			<h2>Header 2</h2>
			<p>Contents 2</p>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配所有h标签
		page = {}
		page.body = $("body");
		page.body.find(":header").css({
			"background-color": "red"
		});
	</script>

</html>15、contans 匹配包含a的元
18、:empty 匹配所有不包含子元素或者文本的空元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table tr td {
				height: 20px;
				width: 60px;
				background-color: aqua;
				border: 1px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Value 1</td>
				<td></td>
			</tr>
			<tr>
				<td>Value 2</td>
				<td></td>
			</tr>
		</table>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配表格中所有td为空的的元素 
		page = {}
		page.body = $("body");
		page.body.find("td:empty").css({
			"background-color": "white","border": "1px solid rgba(204,204,204,1)"
		});
		page.body.find("td:empty").append("--").css("text-align","center");
	</script>
</html>
19、:parent 选取所有包含子节点或文本节点的父元素,与 :empty相反。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">查找</button>

		<div class="ancestors">
			<div style="width:500px;">div (曾祖父元素)
				<ul>ul (祖父元素)
					<li>li (父元素)
						<span>span</span>
					</li>
				</ul>
			</div>

			<div style="width:500px;">div (祖父元素)
				<p>p (父元素)
					<span>span</span>
					<span style="height: 23px;"></span>
				</p>
			</div>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
          // 选取所有带有子元素或包含文本的 <span> 元素：
			page.body.find("span:parent").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
20、:contains(text)匹配包含text的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				height: 40px;
				width: 100px;
				background-color: aqua;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div>John Resig</div>
		<div>George Martin</div>
		<div>Malcom john Sinclair</div>
		<div>J. Ohn</div>

	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配所有包含john的 元素 ,contains区分大小写
		page = {}
		page.body = $("body");
		page.body.find("div:contains('john')").css({
			"background-color": "green"
		});
	</script>
</html>
21、 :has(selector) 匹配含有选择器所匹配的元素的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				height: 60px;
				width: 60px;
				background-color: aqua;
				margin: 10px;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>Hello</p>
		</div>
		<div>Hello again!
			<span id="span"></span>
		</div>
		<div>Hello again!
			<h1 class="h1"></h1>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 匹配含有p标签的div
		page = {}
		page.body = $("body");
		//page.body.find("div:has(p)")
		// page.body.find("div:has('#span')")
		page.body.find("div:has(.h1)").css({
			"background-color": "lightgray",
			"font-size": "20px"
		});
	</script>
</html>
22 :visible 匹配所有的可见元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<span id="span1">tr总个数：</span>
			<span id="span2">显示的tr个数：</span>
			<table>
				<tr style="display:none">
					<td>tr 1</td>
				</tr>
				<tr>
					<td>tr 2</td>
				</tr>
				<tr>
					<td>tr 2</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 
		page = {}
		page.body = $("body");
		page.body.find("#span1").append(page.body.find("tr").length+"；")
		page.body.find("#span2").append(page.body.find("tr:visible").length)
	
	</script>
</html>
23 :hidden 匹配所有不可见元素，或者type为hidden的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<span id="span1">tr总个数：</span>
			<span id="span2">隐藏的tr个数：</span>
			<table>
				<tr style="display:none">
					<td>tr 1</td>
				</tr>
				<tr>
					<td>tr 2</td>
				</tr>
				<tr>
					<td>tr 3</td>
				</tr>
			</table>
		</div>
		<div class="div2">
			<span id="div2_span">input总个数：</span>
			<span id="div2_span2">隐藏的input个数：</span><br />
			<input type="hidden" value="111"/>
			<input type="text" value="222"/>
			<input type="number" value="333"/>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
		// 
		page = {}
		page.body = $("body");
		page.body.find("#span1").append(page.body.find("tr").length+"；")
		page.body.find("#span2").append(page.body.find("tr:hidden").length)
		
		
		page.body.find("#div2_span").append(page.body.find("input").length+"；")
		page.body.find("#div2_span2").append(page.body.find("input:hidden").length);
	
	</script>
</html>
24 [attribute] 匹配包含给定属性的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">查找含有id的div</button>

		<div class="ancestors" style="width:500px;">
			<div class="cla" name="11">
				<p>Hello!</p>
			</div>
			<div id="test2" name="12">
				<p>good!</p>
			</div>
          	<div>
				<p>Hi!</p>
			</div>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			//page.body.find(".ancestors").find("div[id]").css({
			//page.body.find(".ancestors").find("div[id='test2']").css({
			//page.body.find(".ancestors").find("div[class]").css({
			//page.body.find(".ancestors").find("div[class='cla']").css({
			//page.body.find(".ancestors").find("div[name']").css({
			page.body.find(".ancestors").find("div[name='11']").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
25、[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
等价于[:not([attr=value])]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">查找</button>

		<div class="ancestors" style="width:500px;">
			<div class="cla" name="11">
				<p>Hello!</p>
			</div>
			<div id="test2" name="12">
				<p>good!</p>
			</div>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {

			page.body.find(".ancestors").find("div[id !='test2']").css({
             // page.body.find("div:not([id='test2'])").css({
			//page.body.find(".ancestors").find("div[name !='11']").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
26、[attribute^=value] 匹配给定的属性是以某些值开始的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">匹配给定的属性是以某些值开始的元素</button>

		<div class="ancestors" style="width:500px;">
			<input id="input1" class="first_input" name="newsletter" placeholder="newsletter"/>
			<input id="input12" class="second_input" name="milkman" placeholder="milkman"/>
			<input id="input33" class="third_input" name="newsboy" placeholder="newsboy"/>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("input[id ^='input1']").css({
			//page.body.find(".ancestors").find("input[name ^='news']").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
27、[attribute $= value] 匹配给定的属性是以某些值结尾的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">匹配给定的属性是以某些值结尾的元素</button>

		<div class="ancestors" style="width:500px;">
			<input id="input1" class="first_input" name="newsletter" placeholder="newsletter"/>
			<input id="input12" class="second_input" name="milkman" placeholder="milkman"/>
			<input id="input33" class="third_input" name="newsboy" placeholder="newsboy"/>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("input[class $='d_input']").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
28、[attribute*=value] 匹配给定的属性是以包含某些值的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">匹配给定的属性是以包含某些值的元素</button>

		<div class="ancestors" style="width:500px;">
			<input id="input1" class="first_input" name="newsletter" placeholder="newsletter"/>
			<input id="input12" class="second_input" name="milkman" placeholder="milkman"/>
			<input id="input33" class="third_input" name="newsboy" placeholder="newsboy"/>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			//page.body.find(".ancestors").find("input[class *='d_in']").css({
			page.body.find(".ancestors").find("input[id *= 'put1']").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
29、:first-child 匹配所给选择器( :之前的选择器)的第一个子元素
:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:first-child 匹配所给选择器( :之前的选择器)的第一个子元素</button>
		<p>li:first-child</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
			</ul>
			<ul>
				<li>Glen</li>
				<li>Tane</li>
				<li>Ralph</li>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("li:first-child").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
30、:first-of-type 匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我</button>
		<div class="ancestors" style="width:500px;">
			<div id="n2" class="abc">
				<label id="n3">label1</label>
				<span id="n4">span1</span>
				<span id="n5" class="abc">span2</span>
				<span id="n6">span3</span>
				<div id="n7">
					<span id="n8" class="abc">span1</span>
					<span id="n9">span2</span>
				</div>
			</div>
			<div id="n7">
				<span id="n8" class="abc">span1</span>
				<span id="n9">span2</span>
			</div>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("span:first-of-type").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
31、:last-child 匹配最后一个子元素(每个父元素匹配最后一个子元素)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:last-child 匹配所给选择器( :之前的选择器)的最后一个子元素</button>
		<p>li:last-child</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
			</ul>
			<ul>
				<li>Glen</li>
				<li>Tane</li>
				<li>Ralph</li>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("li:last-child").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
32、:last-of-type 匹配E的父元素的最后一个E类型的孩子
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我</button>
		<div class="ancestors" style="width:500px;">
			<div id="n2" class="abc">
				<label id="n3">label1</label>
				<span id="n4">span1</span>
				<span id="n5" class="abc">span2</span>
				<span id="n6">span3</span>
				<div id="n7">
					<span id="n8" class="abc">span1</span>
					<span id="n9">span2</span>
				</div>
			</div>
			<div id="n7">
				<span id="n8" class="abc">span1</span>
				<span id="n9">span2</span>
			</div>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("span:last-of-type").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
33、:nth-child(n) 匹配所给选择器( :之前的选择器)的第n个/奇数/偶数元素（n从 1 开始）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:nth-child(n) 匹配所给选择器( :之前的选择器)的第n个子元素</button>
		<p>li:nth-child(n)</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
			</ul>
			<ul>
				<li>Glen</li>
				<li>Tane</li>
				<li>Ralph</li>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("li:nth-child(2)").css({
			//page.body.find(".ancestors").find("li:nth-child(even)").css({
			//page.body.find(".ancestors").find("li:nth-child(odd)").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
34、:nth-last-child(n|even|odd|formula) 从最后一个开始查找满足条件的元素

n （从1开始）|even 偶数|odd 奇数|formula 为表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:nth-child(n) 最后一个开始查找满足条件的元素</button>
		<p>li:nth-child(n)</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
				<li>Kerwen</li>
				<li>Linda</li>
				<li>James</li>
				
			</ul>
			<ul>
				<li>Glen</li>
				<li>Tane</li>
				<li>Ralph</li>
				<li>Jack</li>
				<li>Jackson</li>
				<li>Paul</li>
				<li>Thomas</li>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			//page.body.find(".ancestors").find("li:nth-last-child(2)").css({
			//page.body.find(".ancestors").find("li:nth-last-child(even)").css({
			//page.body.find(".ancestors").find("li:nth-last-child(odd)").css({
			page.body.find(".ancestors").find("li:nth-last-child(2n+1)").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
35、:nth-of-type(n|even|odd|formula)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:nth-of-type </button>
		<p>li:nth-of-type()</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
				<li>Kerwen</li>
				<li>Linda</li>
				<li>James</li>
				
			</ul>
			<ul>
				<li>Glen</li>
				<li>Tane</li>
				<li>Ralph</li>
				<li>Jack</li>
				<li>Jackson</li>
				<li>Paul</li>
				<li>Thomas</li>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("li:nth-of-type(2)").css({
			//page.body.find(".ancestors").find("li:nth-of-type(even)").css({
			//page.body.find(".ancestors").find("li:nth-of-type(odd)").css({
			//page.body.find(".ancestors").find("li:nth-of-type(2n+1)").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
36、:nth-last-of-type(n|even|odd|formula)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:nth-last-of-type </button>
		<p>li:nth-last-of-type()</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
				<li>Kerwen</li>
				<li>Linda</li>
				<li>James</li>
				
			</ul>
			<ul>
				<li>Glen</li>
				<li>Tane</li>
				<li>Ralph</li>
				<li>Jack</li>
				<li>Jackson</li>
				<li>Paul</li>
				<li>Thomas</li>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("li:nth-last-of-type(2)").css({
			//page.body.find(".ancestors").find("li:nth-last-of-type(even)").css({
			//page.body.find(".ancestors").find("li:nth-last-of-type(odd)").css({
			//page.body.find(".ancestors").find("li:nth-last-of-type(2n+1)").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
37、:only-child 匹配在父类中唯一,没有兄弟元素的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:only-child  </button>
		<p>li:only-child 在父类中唯一,没有兄弟元素</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
				<li>Kerwen</li>
				<li>Linda</li>
				<li>James</li>
				
			</ul>
			<ul>
				<li>Thomas</li>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("li:only-child").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
38、only-of-type 在父类中唯一,没有同类的兄弟元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<button id="btn">:only-of-type  </button>
		<p>li:only-of-type 在父类中唯一,没有同类的兄弟元素</p>
		<div class="ancestors" style="width:500px;">
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
				<li>Kerwen</li>
				<li>Linda</li>
				<li>James</li>
				
			</ul>
			<ul>
				<li>Thomas</li>
				<span>Paul</span>
			</ul>
			<ul>
				<span>Paul</span>
			</ul>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("span:only-of-type").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
39、:enabled 匹配可用的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">enabled </button>
		<p>enabled 可用</p>
		<div class="ancestors" style="width:500px;">
			<form>
				<input name="email" disabled="disabled" />
				<input name="id" />
			</form>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("input:enabled").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
40、:disabled 匹配不可用的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="Icon" href="../img/favicon.ico" type="image/x-icon" />
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">disabled </button>
		<p>disabled 不可用</p>
		<div class="ancestors" style="width:500px;">
			<form>
				<input name="email" disabled="disabled" />
				<input name="id" />
			</form>
		</div>
	</body>
	<script src="../js/jquery-1.7.1.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			page.body.find(".ancestors").find("input:disabled").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
41、 :radio :input :password :text :button :image :checked :selected
:checkbox :submit :file :enabled :disabled
42、 $.escapeSelector(selector) 匹配Id或者class中包含特殊字符的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="Icon" href="../img/favicon.ico" type="image/x-icon" />
		<style>
			.ancestors,
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<button id="btn">disabled </button>
		<p>disabled 不可用</p>
		<div class="ancestors" style="width:500px;">
			<div>
				<div id="#notMe">div id="#notMe"</div>
				<span id=".span"> id=".span"</span>
				<div class="notMe">div class="notMe"</div>
				<div class=".box myClass">div class=".box myClass"</div>
				<div class=".box">span class=".box"</div>
				<span class="#span"> class="#span"</span>
			</div>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/jquery/3.0.0/jquery.min.js"></script>
	<script>
		page = {}
		page.body = $("body");
		page.body.find("#btn").click(function() {
			//page.body.find(".ancestors").find( "#" + $.escapeSelector( "#notMe" )).css({
			//page.body.find(".ancestors").find( "." + $.escapeSelector( ".box" )).css({
			page.body.find(".ancestors").find("." + $.escapeSelector("#span")).css({
				"color": "red",
				"border": "2px solid red"
			});
		})
	</script>
</html>
使用jQuery的gt和lt选择器进行元素选择
CodeByte的博客
09-30 347
gt选择器选择索引位置大于指定值的元素，而lt选择器选择索引位置小于指定值的元素。希望本文对你有所帮助！在jQuery中，gt（greater than，大于）和lt（less than，小于）选择器是用于选择索引位置大于或小于指定值的元素的。需要注意的是，gt和lt选择器是基于0索引的，所以索引位置的计数从0开始。上面的示例代码将根据变量index的值选择索引位置大于index的所有段落元素，并将它们的背景颜色设置为黄色。索引位置是从0开始计数的，所以gt选择器将选择所有索引位置大于指定值的元素。
jQuery常规选择器源码
10-15
本资源包含jQuery常规选择器的源码分析，非常适合初学者学习和参考。 首先，我们要理解jQuery选择器的基本概念。jQuery支持多种选择器，包括基本选择器（如"#id"、".class"、"tag"）、类别选择器（如"[attribute]...
jQuery—常规选择器
永远不会懂
08-01 351
jQuery最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性   #1. 简单选择器 选择器 CSS模式 jQuery模式 表述 元素选择器 div{} $(‘div’) 获取所有 div 元素的DOM对
jquery中的常规选择器（1）
yinge0508的博客
01-18 129
<!DOCTYPE html&gt; <html lang="en"&gt; <head&gt; <meta charset="UTF-8"&gt; <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; <meta http-equiv="X-...
jQuery选择器
weixin_42952665的博客
09-06 254
一、基本选择器 二、层级选择器 三、属性选择器 四、伪类选择器 （1）、简单伪类选择器 （2）、子元素伪类选择器 （3）、可见性伪类选择器 （4）、内容伪类选择器 （5）、表单伪类选择器 一、基本选择器 #id 选择器：$(“#id名”) 元素选择器：$(“元素名”) .class 类选择器：$(“.类名”) 群组选择器：$(“选择器1,选择器2,……,选择器n”) 选择器：...
HTML Label标签使用
热门推荐
cyzfd_sunshine的博客
12-18 3万+
转载 from ：https://blog.youkuaiyun.com/gnail_oug/article/details/72852150 label标签介绍 label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。 label标签和特定表单控件关联之后，如果用户在...
jquery 学习笔记源码 3jquery常规选择器
04-04
通过深入理解和实践这些jQuery常规选择器，你将能够精确地选取和操作网页中的任何元素，从而编写出更简洁、高效的代码。同时，jQuery还提供了丰富的API，如事件处理、动画效果等，等待着你的探索。
深入了解jQuery常规选择器源码
jQuery是一个快速、小巧且功能...总结而言，jQuery常规选择器是构建动态网页的基石，它们让DOM操作变得简单和直观。通过理解和实践这些选择器，初学者可以逐步掌握jQuery的核心功能，并将其应用在丰富的Web开发场景中。
第3章 jquery常规选择器
07-24
本知识点将详细介绍JQuery常规选择器，这些选择器包括简单选择器、进阶选择器和高级选择器，并阐述其用法、特性和与其他技术（如CSS）的关系。 ### 简单选择器 简单选择器是JQuery中最为基础的选择器类型，主要...
掌握3jQuery常规选择器：学习笔记源码解析
jQuery常规选择器为我们提供了强大的工具来选择和操作页面上的元素。通过对选择器的熟练运用，可以大大简化对DOM的操作，快速实现丰富的交互功能。通过本篇学习笔记，我们详细探讨了各种jQuery选择器的用法，掌握了...
通过find()方法获取table中选中tr中input值
chp891202的博客
06-15 3万+
点击选中行中其中一个input框，获取本行中另外一个input字段值： <input name='' onclick='check(this)'&gt; function check( o){ //获取上上级tr 的demo var tr = o.parentNode.parentNode; 通过find()方法获取tr行中字段值 1、根据name取值： var ...
jquery选择表格的一部分，jquery中的$(":gt(index)")用法
weixin_34364135的博客
03-02 238
如果想要在集合选择器中在选出某一部分集合改如何做呢？ 在jQuery中有一个选择器：$(“:gt(index)”) 。 index从0开始 表示选择大于index之后的元素 例如：$(“tr:gt(2)”)， 表示从第4个tr元素开始选择 下面我举一个例子： <!DOCTYPE html&gt; &l...
Jquery 模糊匹配ID
赶路人儿
12-02 1万+
[属性名称] 匹配包含给定属性的元素 [att=value] 匹配包含给定属性的元素 (大小写区分) [att*=value] 模糊匹配 [att!=value] 不能是这个值 [att$=value] 结尾是这个值 [att^=value] 开头是这个值 [att1][att2][att3]... 匹配多个属性条件中的一个 ===========================
jQuery -&gt; 获取后代元素的三种方法
weixin_34186950的博客
05-04 762
假设我们有内容例如以下的html文件，那么怎样选取包括在&lt;p&gt;元素内的&lt;i&gt;元素呢？ 邪馬台国の謎と弥生時代 紀元前１０００年ごろ、水稲工作の技術をもつ集団が大挙して日本に移住してきた。これによって弥生時代が始まった。 縄文人も南方から伝わった稲を栽培していたが、彼らは原野を開いて大掛かりな水田をつくる発想を持たなかった。しかし、北九州に新たな文化...
jquery find的使用
chelsi916的专栏
09-21 387
var test = $(dataxml).find("data &gt; item[name='b']").attr("attr");//查找name为b的属性 var test = $(dataxml).find("data &gt; item[name^='b_']").attr("attr");//查找以b_开头的属性   dataxml的格式：    &lt;data&gt;  
jquery的gt跟lt选择器用法
wzx735481897的博客
10-31 4742
gt与lt用法 li { list-style-type: none; } li a { text-decoration:none; } // gt(num):大于num的index值 // lt(num):小于num的index值 $(function(){ $("a:gt(5):lt(8)").css("color","aqua");
jQuery中gt和lt的使用
ammafree的专栏
09-19 6802
如下html： 1 2 3 4 5 6 7 执行js： $("a:gt(2):lt(2)").attr("href", "www.baidu.com"); 结果为： 1                     0 2                     1      3                     2 43     0 54     1
JQuery查找子元素find()和遍历集合each的方法积累
Enable1234___的专栏
12-15 1万+
JQuery查找子元素find()和遍历集合each的方法积累
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值