zoukankan      html  css  js  c++  java
  • 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选择器的效率

    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')
  • 相关阅读:
    对接某款商城系统[5]商城商品多级价格处理
    利用DelegatingHandler实现Web Api 的Api key校验
    采用Lambda表达式快速实现实体模型对象转换到DTO
    驱蚊器翁
    批量测试网络关系的小脚本
    jboss7访问日志功能及使用goaccess工具分析
    jetty使用jndi数据源
    sping junit test
    Too many open files解决方案及原理
    jboss7的JAX-WS客户端
  • 原文地址:https://www.cnblogs.com/hustshu/p/14762804.html
Copyright © 2011-2022 走看看