【jQuery】3.jquery选择器

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_33737134

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/18574

版权

jquery选择器

1.什么是jquery选择器
jquery中的选择器完全继承了css1.0~2.0的风格，实现少部分css3选择器
，如果对于CSS选择器非常了解，那么学习jquery选择器会非常简单。
利用jquery选择器可以非常快速的找出你想要的DOM元素，然后为这些
DOM元素添加你想要的效果，无需担心浏览器的兼容。
实例：演示选择器浏览器的兼容性(子选择器)

小结：jquery选择器的写法与css非常相近，但是作用不同。css选择的元
素只能对基添加样式(CSS表达式除外，项目中基本不允许有css表达式，
而且IE8标准模式已经取消对css表达式的支持)，jquery选择器找到的元
素可以为其添加行为。

例子:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo1</title>
	<style>
		div a{color:red}
	</style>
</head>
<body>
	<div>
		<a href="####">abcdefg</a>
		<p><a href="####">1234567890</a></p>
	</div>
</body>
</html>

这里，所有的a标签都会变成红色。那么如果我们不想让p标签的a标签中的文字变成红色该怎么办？我们在样式的a前面加一个“>”号即可:

<style>
	div>a{color:red}
</style>

这里样式只对div的第一层子标签中的a标签有用。

但是这个“>”号在某些版本的浏览器中是不能显示的，所以下面我们使用Jquery的选择器来配置这个样式:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo1</title>
	<script src="jquery-1.8.0.min.js"></script>
	<script>
		$(function(){
			$('div>a').css('color','red');
		});
	</script>
</head>
<body>
	<div>
		<a href="####">abcdefg</a>
		<p><a href="####">1234567890</a></p>
	</div>
</body>
</html>

结果效果和之前一样，而且这个是可以跨浏览器支持的，解决了兼容性问题，这也就是Jquery的一大优势之一。

2.jquery选择器的优势
(1)完全支持CSS1.0~2.0的选择器，支持部分
CSS3选择器，学习曲线平缓，可以快速上手

(2)完美的容错机制
即使页面上没有该元素，jquery也不会报错

例子:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo2</title>
	<script src="jquery-1.8.0.min.js"></script>
	<script>
		window.οnlοad=function(){
			var p1=document.getElementById('p1');
			p1.style.color="red";
		}
		$(function(){
			$('#p1').css('color','red');
		})
	</script>
</head>
<body>
	<div>
		<p id="p1">abcdefg</p>
	</div>
</body>
</html>

如果把‘p1’改为‘p2’(不存在)，这个:

window.οnlοad=function(){
	var p1=document.getElementById('p12');
	p1.style.color="red";
}

会报错，但是

$(function(){
	$('#p1').css('color','red');
})

不报错

3.jquery选择器的种类
(1)基本选择器
①#id，选择ID的元素
javascript:

<style>
	#p1{color:red;}
</style>

jquery:

<script>
	$(function(){
		$('#p1').css('color','red');
	})
</script>

②.class，类名选择器
javascript:

<style>
	#p1{color:red;}
</style>

jquery:

<script>
	$(function(){
		$('#p1').css('color','red');
	})
</script>

③element，标签选择器
jquery:

<script>
	$(function(){
		$('p').css('color','red');
	})
</script>

④*，选择所有元素

<script>
	$(function(){
		$('*').css('border','10px solid green');
	})
</script>

不推荐使用“*”号，控制的元素太多，会影响其他元素

⑤E1，E2，E3，... En，多重选择器
javaScript:

<style>
	p,div{color:red;}
</style>

jquery:

<script>
	$(function(){
		$('p,div').css('border','10px solid green');
	})
</script>

(2)层次选择器
① E F ，选择E元素所有的后代元素

② E>F，选择E元素的子元素，子选择器

③ E+next，选择E元素后的紧临的兄弟元素，等价于.next()
例子:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo2</title>
	<script src="jquery-1.8.0.min.js"></script>
	<style>
		/*div+p{color:red;}*/
	</style>
	<script>
		$(function(){
			//$('div+p').css('color','red');
			$('div').next().css('color','red');
		})
	</script>
</head>
<body>
	<div>这个是div标签</div>
	<p>这个是p标签</p>
	<span>这个是span标签</span>
</body>
</html>

将紧邻div的兄弟元素文字变红

④ E~siblings，选择E元素后的所有兄弟元素，等价于.nextAll()
例子:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo2</title>
	<script src="jquery-1.8.0.min.js"></script>
	<style>
		/*div~p{color:red;}*/
	</style>
	<script>
		$(function(){
			//$('div').nextAll('p').css('color','red');
			$('div~p').css('color','red');
		})
	</script>
</head>
<body>
	<div>这个是div标签</div>
	<p>这个是p标签</p>
	<span>这个是span标签</span>
	<p>这个是p标签</p>
</body>
</html>

将紧邻div的下所有p兄弟标签元素文字变红

转载请注明出处：http://blog.csdn.net/acmman/article/details/49173847

weixin_33737134

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】3.jquery选择器

jquery选择器1.什么是jquery选择器jquery中的选择器完全继承了css1.0~2.0的风格，实现少部分css3选择器，如果对于CSS选择器非常了解，那么学习jquery选择器会非常简单。利用jquery选择器可以非常快速的找出你想要的DOM元素，然后为这些DOM元素添加你想要的效果，无需担心浏览器的兼容。实例：演示选择器浏览器...
复制链接

扫一扫