jquery选择器和CSS选择器的区别是什么？-常见问题-PHP中文网

jquery选择器和CSS选择器的区别是什么？

青灯夜游

发布： 2020-11-13 15:03:49

原创

6100人浏览过

区别：1、两者的作用不同，CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加行为；2、jQuery选择器拥有更好的跨浏览器的兼容性；3、CSS选择器和jQuery选择器的效率不同。

jquery选择器和CSS选择器的区别是什么？

我们知道，jQuery选择器和CSS选择器的写法十分类似，都具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，使用起来相对方便，通常，把css选择器用$("")包起来就成了一个jQuery选择器，如

	CSS选择器	jQuery选择器
ID选择器	#myID	$("#myID")
类选择器	.myClass	$(".myClass")
标签选择器	p	$("p")
层次选择器	p > strong	$("p>strong")
css称为伪类选择器 jQuery称之为过滤选择器	p:nth-child(3)	$("p:nth-child(3)")

见下面的例子，CSS为每个段落的文字设置成14px,颜色是红色，jQuery中设置文字为16px,颜色为蓝色，因为jquery设置的是DOM加载后的行为，所有的段落表现为蓝色，16px字

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
p { font-size: 14px; color:#F00 }
p:nth-child(3){color:#690}
</style>
<script src="jquery/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
  $("p").css({"color":"#00f","font-size":"16px"});
  $("p:nth-child(3)").css({"font-size":"24px"});
});
</script>
</head>
<body>
  <p>第一段</p>
  <p>第二段</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  <p>第三段</p>
  <p>第四段</p>
</body>
</html>

登录后复制

那么两者的区别在哪里呢？

1、两者的作用不同，CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加行为。

2、jQuery选择器拥有更好的跨浏览器的兼容性。

3、选择器的效率。

CSS选择器的效率

1、id选择器（#myid）

2、类选择器（.myclassname）

3、标签选择器（p,h1,p）

4、相邻选择器（h1+p）

5、子选择器（ul > li）

6、后代选择器（li a）

7、通配符选择器（*）

8、属性选择器（a[rel="external"]）

9、伪类选择器（a:hover,li:nth-child）

上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最底。详细的介绍大家还可以查看Writing efficient CSS selectors（地址：http://csswizardry.com/2011/09/writing-efficient-css-selectors/）。

jQuery选择器的效率

1、id选择器$('#id')和元素标签选择器$('form')

2、类选择器$('.className')

3、属性选择器$('[attribute=value]')和伪类选择器$(':hidden')

更多编程相关知识，请访问：编程课程！！

以上就是jquery选择器和CSS选择器的区别是什么？的详细内容，更多请关注php中文网其它相关文章！