CSS选择器和jQuery选择器的区别与联系之一
Posted 游侠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器和jQuery选择器的区别与联系之一相关的知识，希望对你有一定的参考价值。
CSS选择器和jQuery选择器的区别与联系之一
到底什么是选择器？通过常接触的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>
第一段
第二段
第三段
第四段
那么两者的区别在哪里呢？
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\')
以上是关于CSS选择器和jQuery选择器的区别与联系之一的主要内容，如果未能解决你的问题，请参考以下文章