关于jQuery的层级选择器的那些事儿_jquery带this的层级选择器-CSDN博客

本文链接：https://blog.csdn.net/tony_yang6/article/details/106633550

1.子代选择器

$("选择器1 > 选择器2")

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#ul1 > li:nth-last-of-type(2n+1){
				background: red;
			}
			
			#ul1 > li:nth-last-of-type(2n+2){
				background: pink;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
		</script>
		
		<script type="text/javascript">
						//$("#ul > li:hover").css("clolor","red");
				
				$(function(){
					$("#ul1 > li").mouseover(function(){
					$(this).css("color","burlywood");
						
					})

				})
			
		</script>
		
	
	</head>

	<body>
		<ul id="ul1">
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
			<li>06</li>
			<li>07</li>
			<li>08</li>
			<li>09</li>
			<li>10</li>
		</ul>
		<ul>
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
			<li>06</li>
			<li>07</li>
			<li>08</li>
			<li>09</li>
			<li>10</li>
		</ul>
	</body>

</html>

2.后代选择器

$("选择器1 选择器2")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
			
		</script>
		
		<script type="text/javascript">
			$(function(){
				$("p  a").css("color","red");
			})
		</script>
	</head>
	<body>
		<p>你好你好你好你好你好
		
		<a href="">你好</a>
		
		<a href="">你好</a>
		
		</p>
		
		<a href="">你好你好</a>
		
		
		
	</body>
</html>

3.属性选择器

3.1 属性名选择器

$("[属性名]")

3.2 属性选择器

$("[属性名 = '值']")

3.3 复合属性选择器

$("[type][class='c'][value='female'][name]")

$("[属性名1='值1'][属性名2][].............")

$("[属性名^ = '值']"):以指定内容开头的

$("[属性名$ = '值']"):以指定内容结尾的

$("[属性名!= '值']"):属性值不为指定内容，以及没有该属性的标签

$("[属性名* = '值']"):含有指定内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//$("[name]").css("background","red")
				
				$("[type='password']").css("background","palegoldenrod");
			})
		</script>
	</head>
	<body>
		<input type="text" name="user"/>
		<input type="text" />
		
		<input type="password" />
		
		<input type="password" />
		
		<input type="button" value="按钮" />
	</body>
</html>

4.过滤选择器

4.1首元素选择器

:first

4.2尾元素选择器

:last

4.3非元素选择器

:not(选择器)

4.4奇数选择器

:odd

4.5偶数选择器

:even

4.6等于索引选择器

:eq(index)

4.7大于索引选择器

:gt(index)

4.8小于索引选择器

:lt(index)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
			
		</script>
		<script type="text/javascript">
			
			$(function(){
				$("li:first").css("font-size","20px")
			})
		</script>
	</head>
	<body>
		<ul>
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
			<li>06</li>
			<li>07</li>
			<li>08</li>
			<li>09</li>
			<li>10</li>
		</ul>
	</body>
</html>

5.表单过滤选择器

5.1可用元素选择器

：enable

5.2 不可用元素选择器

：disable

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js">
			
		</script>
		
		<script type="text/javascript">
			$(function(){
				$("input:enabled").css("color","red");
				$("input:disabled").css("color","red");
			})
		</script>
	</head>
	<body>
		<input type="text" disabled="disabled" />
		
		<input type="text" disabled="" />
		
		<input type="text" disabled />
		
		<input type="text"/>
	</body>
</html>