首页 > 常见问题 > jquery选择器和CSS选择器的区别是什么?

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

青灯夜游
发布: 2020-11-13 15:03:49
原创
5842 人浏览过

区别: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>第三段</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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板