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

jquery选择器和CSS选择器的区别是什么?下面本篇文章给大家介绍一下jquery选择器和CSS选择器的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

到底什么是选择器?通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的例子是说HTML就像一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript,这个植物人就可以对外界刺激做出反应,可以思考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。

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

CSS选择器jQuery选择器
ID选择器#myID$("#myID")
类选择器.myClass$(".myClass")
标签选择器p$("p")
层次选择器div > strong$("div>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选择器的效率

  • id选择器(#myid)

  • 类选择器(.myclassname)

  • 标签选择器(div,h1,p)

  • 相邻选择器(h1+p)

  • 子选择器(ul > li)

  • 后代选择器(li a)

  • 通配符选择器(*)

  • 属性选择器(a[rel="external"])

  • 伪类选择器(a:hover,li:nth-child)

上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors

jQuery选择器的效率

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

  • 类选择器$('.className')

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

更多jquery的相关知识,可访问:web前端课程!!

以上就是jquery选择器和CSS选择器的区别是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读