JQ选择器（常用）

最新推荐文章于 2020-05-25 09:07:00 发布

田城臣

最新推荐文章于 2020-05-25 09:07:00 发布

阅读量420

点赞数 1

本文链接：https://blog.csdn.net/tCc1021/article/details/52999042

版权

基本选择器：

通过id获取：

$("#box");

获取id为box的元素；

通过class命获取：

$(".box");

获取class为box的元素；

通过元素名获取：

$("div");

获取div元素；

层级选择器：

获取父级元素中的子级元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			$('#box > p').css('background','cadetblue');
		})
		</script>
		<style type="text/css">
			p{width: 200px; height: 20px;}
		</style>
	</head>
	<body>
		<div id="box">
			<p>1</p>
			<div>
				<p>2</p>
				<span>3</span>
			</div>
		</div>
	</body>
</html>

获取到的只有<p>1</p>

弟弟元素获取：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			$('div + p').css('background','cadetblue');
		})
		</script>
		<style type="text/css">
			p{width: 200px; height: 20px;}
		</style>
	</head>
	<body>
		<div id="box">
			<p>1</p>
			<div>
				<p>2</p>
				<span>3</span>
			</div>
			<p>4</p>
		</div>
	</body>
</html>

<p>4</p>变色

田城臣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ选择器（常用）

基本选择器：通过id获取：$("#box");获取id为box的元素；通过class命获取：$(".box");获取class为box的元素；通过元素名获取：$("div");获取div元素；层级选择器：获取父级元素中的子级元素： $(function(){ $('#box > p').
复制链接

扫一扫