第一篇：jQuery选择器（jQuery）

最新推荐文章于 2025-07-06 01:27:51 发布

HaanLen

最新推荐文章于 2025-07-06 01:27:51 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/98942319

本文深入解析了jQuery中各种选择器的使用方法，包括通用选择器、ID选择器、类选择器、元素选择器及复合类选择器。通过具体实例展示了如何针对不同类型的HTML元素进行精确的选择与操作。

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

jQuery选择器01

本文例子源于W3School

选择器	实例	选取
*	$("*)	所有元素
#id	$("lastname")	id="lastname"的元素
.class	$(".intro")	所有class="intro"的元素
element	$("p")	所有<p>元素
.class.class	$(".intro.demo")	所有class="intro"且class="demo"的元素

【1】*

例子

<!DOCTYPE html>
<html>
	<head>
	<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
	<script type="text/javascript"> 
	$(document).ready(function(){
    $("body *").css("background-color","#B2E0FF");
	});
 
	</script>	
	</head>
	<body>
		<h1>Welcome to My Homepage</h1>
		<p class="intro">My name is Donald</p>
		<p>I live in Duckburg</p>
		<p>My best friend is Mickey</p>
	<div id="choose">
		Who is your favourite:
	<ul>
		<li>Goofy</li>
		<li>Mickey</li>
		<li>Pluto</li>
	</ul>
	</div>
	</body>
</html>

【2】#id

例子

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("#choose").css("background-color","#B2E0FF");
});
</script>	
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>

【3】.class

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $(".intro").css("background-color","#B2E0FF");
}); 
</script>	 
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>

【4】element

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("p").css("background-color","#B2E0FF");
}); 
</script>	
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</div>
</body>
</html>

【5】.class.class

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $(".intro").css("background-color","#B2E0FF");
    $(".demo").css("background-color","brown");
});
</script>	
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p class="demo">I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</div>
</body>
</html>