千家信息网

jquery选择器和CSS选择器有哪些区别

发表于:2024-11-21 作者:千家信息网编辑
千家信息网最后更新 2024年11月21日,小编给大家分享一下jquery选择器和CSS选择器有哪些区别,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!区别:1、两者的
千家信息网最后更新 2024年11月21日jquery选择器和CSS选择器有哪些区别

小编给大家分享一下jquery选择器和CSS选择器有哪些区别,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

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

我们知道,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字

选择器  

第一段

第二段

第三段

第四段

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

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

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

3、选择器的效率。

CSS选择器的效率

1、id选择器(#myid)

2、类选择器(.myclassname)

3、标签选择器(p,h2,p)

4、相邻选择器(h2+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选择器有哪些区别"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0