jquery-属性选择器

最新推荐文章于 2024-01-14 11:54:30 发布

ginger_mr

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量180

点赞数

分类专栏： Callback

本文链接：https://blog.csdn.net/qq_40332952/article/details/104402250

版权

Callback 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

jquery-属性选择器

属性选择器

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div[id]").css("background-color","red");
				});
				$("#btn2").click(function(){
					$("div[id='two']").css("background-color","red");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择有id属性的div"/>
		<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

页面展示

获取带有id属性的div元素

选择有id属性的div

$("#btn1").click(function(){
	$("div[id]").css("background-color","red");
});

页面展示
在这里插入图片描述

获取id属性值为two的div元素

选择有id属性的值为two的div

$("#btn2").click(function(){
	$("div[id='two']").css("background-color","red");
});

页面展示
在这里插入图片描述

ginger_mr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-属性选择器

jquery-属性选择器属性选择器代码演示<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <link rel="stylesheet" href="css/style.css" /> &lt...
复制链接

扫一扫

专栏目录