• 技术文章 >常见问题

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

    青灯夜游青灯夜游2020-11-13 15:03:49原创1726

    区别: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字

    <!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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:yyyy-mm-dd是什么格式 下一篇:什么是分布式计算

    相关文章推荐

    • CSS3属性选择器的几种用法(代码实例)• 详解CSS中的选择器和优先级• jQuery选择器有什么优点?• css中的四种基本选择器类型分别是什么• jQuery有哪些过滤选择器?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网