jQuery选择器（4-4）

jQuery

  • [x] 原生JS封装的常用方法类库（解决浏览器兼容问题）
    • [ ] 1 版–兼容所有
    • [ ] 2 版–不完全兼容IE6-8（主要目的处理移动端）不支持css3
    • [ ] 3 版–改革
  • [x] jQuery的强大之处
    • 执行完成一个方法后返回的结果仍然是一个jQuery对象，可以继续调用下一个方法（形成链式写法）

#

  • 以下$mydiv代表jQuery对象

  • [x] jQuery对象写法

    1
    2
    3
    4
    5
    mydiv=document.getElementById("mydiv");//原生js对象
    $mydiv=$("#div"); //jQuery对象
    $("div", $mydiv) //默认转化为$("#mydiv div")，context：document
    $("div",mydiv)//context : div#mydiv

  • [ ] JS获取的结果属于元素集合/元素对象/节点集合（可用浏览器提供的属性方法）

  • [ ] jQuery获取的结果属于jQuery对象（可用jQuery提供的属性方法）

  • [x] 原生js与jQuery对象间转换

    • [ ] 原生–>jQuery:

      1
      $(mydiv)

    • [ ] jQuery–>原生:通过索引获取对应元素对象

      1
      2
          $mydiv[0]
      $mydiv.get(0);

  • [x] 常用选择器

  • [ ] (1) 基础

    1
    2
    3
    4
    5
    $("#id") -- - $("#mydiv")
    $("TagName") -- - $("div")
    $(".class") -- - $(".children")
    $("*") -- - $("*")
    $("selector1,selector2,selectorN") -- - $("#mydiv,#bro1,.children")

  • [ ] (2) 层次选择器：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
        $("ancestor descendant") -- - 所有子孙下的 $("#mydiv div") <= => $("div", $mydiv) $mydiv获取的上下文默认是document
        $("parent > child") -- - 子集中查找 $("#mydiv>*")所有子元素
        $("prev +") -- - 下一个弟弟 $('#div1+')
        $("prev + next") -- - 下一个弟弟， 并且标签名是next的 $("#mydiv+span")
        $("prev ~") -- - 获取所有弟弟(包括scirpt) $('#div1~')
        $("prev ~ nexts") -- - 获取所有弟弟元素标签名为next $("#mydiv~span")
        ``` 
    - [ ]  (3) 基本过滤器选择器
        ```js
        $("ele:first") 获取集合第一个 $("div:first")
        $("ele:last")
        $("ele:not") 排除谁 $("div:not(#mydiv)")
        $("ele:even") 偶数 $("div:even")
        $("ele:odd")
        $("ele:eq(index)") 通过索引获取集合中某一个 $('div:eq(0)') 获取到的结果仍然是一个jquery对象。 但是get获取到的是原生对象
        $("ele:gt(index)") 大于索引的
        $("ele:lt(index)") 小于索引的
        
        $("ele:header")
        $("ele:animated")

  • [ ] (4) 内容过滤器选择器

    1
    2
    3
    4
    $("ele:contains('con')")         获取集合中包含内容con的元素  $("div:contains('我是')")
    $("ele:empty")          获取集合中内容是空的  $("div:empty")
    $("ele:has(ele)")     所有div中包含ul的  $("div:has(.grandson)")
    $("ele:parent")

  • [ ] (5) 可见性过滤器选择器

    1
    2
    $("ele:hidden")
    $("ele:visible")

  • [ ] (6) 属性过滤器选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("ele[attr]")         包含这个属性的  $("#mydiv>*[class]")$mydiv所有子元素中包含属性class的元素
    $("ele[attr=val]")      
    $("ele[attr!=val]")    
    $("ele[attr^=val]") -- - 以val开头的 $("div[class*=ch]")
    $("ele[attr*=val]") -- - 只要包含val的 $("div[class*=ild]")
    $("ele[attr$=val]") -- - 以val结尾的 $("div[class$=ren]")
    $("ele[attrSel1][attrSel2][attrSelN]")   集合中包含多种属性的元素 $("div[id][class][id$=3]")

  • [ ] (7) 子元素过滤器选择器

    1
    2
    3
    4
    5
    6
    $("ele:nth-child(num)") 获取集合中第几个
        $("#div1>*:nth-child(1)") 集合中第一个
        $("#div1>*eq(1)") 索引中第一个（ 集合中第二个）
    $("ele:first-child")
    $("ele:last-child")
    $("ele:only-child")

  • [ ] (8) 表单选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("ele:input")
    $("ele:text")
    $("ele:password")
    $("ele:radio")
    $("ele:checkbox")
    $("ele:submit")
    $("ele:image")
    $("ele:reset")
    $("ele:button")
    $("ele:file") 坑人
    $("ele:hidden")

  • [ ] (9) 表单过滤器选择器

    1
    2
    3
    4
    $("ele:enabled")
    $("ele:disabled")
    $("ele:checked")
    $("ele:selected")