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

最新推荐文章于 2024-07-05 14:21:58 发布

白光一

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量249

点赞数

分类专栏： jquery 文章标签： jquery

白光一

本文链接：https://blog.csdn.net/FlyUp__/article/details/119656645

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

演示结果

白光一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-210811-04---jquery基本选择器

jquery-210811-04—jquery基本选择器jquery基本选择器介绍jquery基本选择器演示演示结果jquery基本选择器介绍选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象常用选择器： 1. id选择器，语法： ---> $("#dom对象的id值") 通过dom对象的id定位dom对象的。通过id找对象，id在页面中的值是唯一的。 2. class选择器（样式选择器），语法： ---> $(".cla
复制链接

扫一扫

专栏目录