关于jQuery里选择器的那些事儿

1.基本选择器

1.元素选择器

         $("标签名")

<!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").css("color", "red");
			})
		</script>

	</head>

	<body>
		<p>hhhhhhhhhhhhhh</p>
		<p>ppppppppppppppppppp</p>
		<p>sdasdasdasdasdasdasdas</p>

	</body>

</html>

2.id选择器

         $("#id值")

<!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(){
				$("#btn").click(function(){
					$("#test_btn").css("color","pink");
				})
			})
		</script>
	</head>
	<body>
		<button id="test_btn">测试按钮</button>
		
		<button id="btn">按钮</button>
	</body>
</html>

3.类选择器

         $(".class值")

<!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()){
				$(".b").click(function(){
					$(this).css("color","red");
				})
			}
			
		</script>
	</head>
	<body>
		<a href="" class="t">百度</a>
		<br />
		
		<a href="" class="t">腾讯</a>
		<br />
		
		<a href="" class="t">按钮</a>
	</body>
</html>

4.分组(并集)选择器

        $("选择器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">
		
			$("#btn").dblclick(function(){
				$("#p,a,.d").html("666");
			})
			
		</script>
	</head>
	<body>
		<p id="p"> hjasssssssssssssssssshduasbhvffffffffffffffffffffffa</p>
		<a href="">叮咚</a>
		
		<a href="">京东</a>
		
		<div class="d">DIV</div>
		
		<span class="d">SPAN</span>
		<hr />
		
		<button id="btn">按钮</button>
	</body>
</html>

5.通配符选择器

        $("*")

<!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">
			$("#btn").click(function(){
				$("*").css("border","blue");
			});
		</script>
	</head>
	<body>
		<button id="btn">按钮</button>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/tony_yang6/article/details/106624812