zoukankan      html  css  js  c++  java
  • jQuery学习之二 jQuery选择器

    一、jQuery选择器是什么
    1.CSS选择器
    2.jQuery选择器

    二、jQuery选择器的优势
    1.简洁的写法
    2.支持从CSS1到CSS3选择器
    3.完善的处理机制
      传统js选择器假如要操作的元素不存在会报错,jq不会,避免了判断存在操作的麻烦
      当需要使用jq判断某个元素在网页上是否存在时不能用
      if($('#id')){  xxx };
      要使用if($('#id').length > 0){ xxx };
      或先转化成DOM再判断if($('#id')[0]){ xxx };

    三、jQuery选择器
    1.基本选择器
      #id
      .class
      element
      *
      selector1,selector2,...selectorN

    2.层次选择器
      $('.ancestorClass .sonClass'):   选中所有后代
      $('.fatherClass > .sonClass'):   选中子元素
      $('prev + next'):    选中代码顺序下一个兄弟
      $('prev ~ silbings'):   选中代码顺序后所有兄弟

    3.过滤选择器
    (1)基本过滤选择器
      :first             $("div:first")
      :last              $("div:last")
      :not(selector)     $("input:not(.myClass)")
      :even              $("input:even")
      :odd               $("input:odd")
      :eq(index)         $("input:eq(1)")
      :gt(index)         $("input:gt(1)")
      :lt(index)         $("input:lt(1)")
      :header            选取所有标题元素
      :animated          选取当前正在执行动画的所有元素
      :focus             选取当前获取焦点的元素

    (2)内容过滤选择器
      :contains(text)    选取文本内容为“text”的元素
      :empty             选取不包含子元素或者文本的空元素
      :has(selector)     选取含有选择器所匹配的元素的选择器
      :parent            选择含有子元素或者文本的元素

    (3)可见性过滤选择器
      :hidden            选取所有不可见的元素
      :visible           选取所有可见的元素

    (4)属性过滤选择器
      [attribute]                拥有属性
      [attribute=value]          属性等于
      [attribute!=value]         属性不等于
      [attribute^=value]         属性以什么开头
      [attribute$=value]         属性以什么结尾
      [attribute*=value]         属性中包含什么值
      [attribute|=value]         属性以什么为前缀并且后跟'-'做连接
      [attribute~=value]         属性以空格分隔的值中含有某值
      [attribute1][attribute2][attributeN]       并列过滤

    (5)子元素过滤选择器
      :nth-child(index/even/odd/equation)   选取每个父元素下的第index个元素或奇偶元素.(index从1算起)、
           eg: nth-child(even)      nth-child(odd)     nth-child(3n)      nth-child(3n+1)
      :first-child               选取每个父元素的第1个子元素
      :last-child                选取每个父元素的最后一个元素
      :only-child                如果某个元素是它父元素的唯一子元素,则被选中

    (6)表单对象属性过滤选择器
      :enabled           选取所有可用元素
      :disabled          选取所有不可用元素
      :checked           选取所有被选中的元素(单选框,复选框)
      :selected          选取所有被选中的选项元素(下拉列表)

      判断是否聚焦、可视等可使用is(),eg:
       $("xxx").is(":visible")
       $("input").is(":enabled")

    4.表单选择器
      :input             选取所有<input>、<textarea>、<select>、<button>     PS.注意$(":input")和$("input")的区别
      :text
      :password
      :radio
      :checkbox
      :submit
      :image
      :reset
      :button
      :file
      :hidden

    四、应用jQuery改写示例

    五、选择器中的一些注意事项
     1.选择器中最好不要含有"."、"#"、"("或"]"等特殊字符          
       如果含有这些特殊字符则需要加转义符转义
       eg:  <div id="id#b"></div>     →      获取:$("#id#b")×    $("#id\#b")√
     2.属性选择器的@符号问题
       旧版本使用了@,在新版本中已被淘汰
     3.选择器中含有空格的注意事项
       eg:  $(".test :hidden")   指的是带class="test"元素内的被hidden元素
            $(".test:hidden")    指的是带class="test"且被隐藏的元素

    六、案例研究
      filter(expr):筛选出与指定表达式匹配的元素集合,其中expr可以是多个选择器的组合

    七、其他选择器

  • 相关阅读:
    http-Content-Type
    ip地址和端口号
    node中的js-核心模块
    http-url 发送请求
    http 发送请求
    node http核心模块
    node 写文件
    bzoj-3170 3170: [Tjoi 2013]松鼠聚会(计算几何)
    codeforces 710E E. Generate a String(dp)
    codeforces 710C C. Magic Odd Square(构造)
  • 原文地址:https://www.cnblogs.com/huyihao/p/5387067.html
Copyright © 2011-2022 走看看