jquery-210811-04---jquery基本选择器

jQuery基础选择器实战教程

最新推荐文章于 2022-07-20 17:12:55 发布

原创最新推荐文章于 2022-07-20 17:12:55 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

白光一

文章标签：

#jquery

jquery 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了jQuery的基本选择器，包括id选择器、class选择器、标签选择器，以及所有选择器和组合选择器的用法，并通过实际代码演示如何动态改变DOM元素样式。

jquery-210811-04—jquery基本选择器

jquery基本选择器介绍
jquery基本选择器演示
演示结果

jquery基本选择器介绍

选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

常用选择器：
	1. id选择器，语法： --->  $("#dom对象的id值")
	   通过dom对象的id定位dom对象的。通过id找对象，id在页面中的值是唯一的。
	   
	2. class选择器（样式选择器），语法：  --->  $(".class样式名")
	   class表示css中的样式，使用样式的名称定位dom对象。
	   
	3. 标签选择器，语法：  --->  $("标签名称")
	   通过标签名称定位dom对象。

其他的选择器：
	1. 所有选择器
	   语法：$("*") 选取页面中所有 DOM 对象。
	   
	2. 组合选择器
	   组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
	   语法：$(“#id,.class,标签名”)

jquery基本选择器演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>联系常用选择器</title>
		
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style type="text/css">
			div{
				background: darkgrey;
				width: 200px;
				height: 200px;
			}
		</style>
		<script type="text/javascript">
			
			// 使用id选择器
			function btnIdClick(){
				var div01_obj = $("#div01");
				
				// 使用jquery改变div01的背景颜色
				div01_obj.css("background","red");
			}
			
			// 使用样式（class）选择器
			function btnClassClick(){
				var div02_obj = $(".div02");
				
				div02_obj.css("background","yellow");
			}
			
			// 使用标签选择器
			function btnLableClick(){
				var div_obj = $("div");
				
				div_obj.css("background","green");
			}
			
			// 使用所有选择器
			function btnAllClick(){
				var all_obj = $("*");
				
				all_obj.css("background","pink");
			}
			
			// 使用组合选择器
			function btnCombinationClick(){
				var combination_obj = $("#div01,span");
				
				combination_obj.css("background","blue");
			}
			 
		</script>
	</head>
	<body>
		<span>练习使用选择器</span><br/>
		<div id="div01">
			<span>div01</span>
		</div>
		<br/>
		<div class="div02">
			<span>div02</span>
		</div>
		<br/>
		<div id="div03">
			<span>div03</span>
		</div>
		<br/>
		<input type="button" value="jquery使用id选择器改变div01背景颜色" onclick="btnIdClick()"/>
		<br/>
		<input type="button" value="jquery使用class选择器改变div02背景颜色" onclick="btnClassClick()"/>
		<br/>
		<input type="button" value="jquery使用标签选择器改变div标签的背景颜色" onclick="btnLableClick()"/>
		<br/>
		<input type="button" value="jquery使用所有选择器改变所有背景颜色" onclick="btnAllClick()"/>
		<br/>
		<input type="button" value="jquery使用组合选择器改变div01背景颜色和span标签背景颜色" onclick="btnCombinationClick()"/>
	</body>
</html>