CSS选择器和jQuery选择器的区别与联系

标签：

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

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

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

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

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

3、选择器的效率。

CSS选择器的效率

1. id选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div,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。

jQuery选择器的效率

1. id选择器$(‘#id‘)和元素标签选择器$(‘form‘)
2. 类选择器$(‘.className‘)
3. 属性选择器$(‘[attribute=value]‘)和伪类选择器$(‘:hidden‘)

CSS选择器和jQuery选择器的区别与联系

标签：

原文地址：http://www.cnblogs.com/dreamingbaobei/p/5057127.html