jQuery 选择器

  css选择器

  Id选择器  class选择器  标签选择器  后代选择器  交级选择器  并级选择器  通配符选择器  结构选择器  伪类选择器  属性选择器  相邻选择器  兄弟选择器

  而jQuery完美的兼容了css的选择器   让我们通过更简单的方式,去获取到标签;

  https://code.jquery.com/jquery-3.3.1.js   

  重要的一个:children("div")  父元素的所有子级div

  基本:

    css选择器    jQuery写法

    id获取        $("#id")

    class获取      $(".class")

    标签获取       $("div")

    *         $("*")

    selector1,selector2,selectorN (将所有选择器合并到一起返回新的结果)    $("div,span,p.myClass")    并级和交级的结合,合并成新的结果

  层级

    后代      $("div p")   div下所有的p标签

    子代      $("div>p")   div的子标签为p的

    相邻      $("div+p")    div开始的下一个p标签(同一级)

    兄弟      $("div~p")  div开始后面的p标签 (同一级)

  基本:

    :first                     $("li:first")  获取匹配的第一个标签

    :not      $("div:not")  将匹配的内容 清除

    :even     $("div:even")  匹配''索引''为偶数的内容

    :odd      $("div:odd")  匹配''索引''为奇数的内容     

    :eq()      $("div:eq(0)")  匹配指定索引为0的内容

    :gt()      $("div:gt(0)")  同级 匹配指定索引之后的所有内容

    :lang      $("div:lang(en)")  将匹配到<div lang="en></div> 他的文本紧跟着~的符号  不常见

    :last      $("div:last")  匹配到最后的内容

    :lt()      $("div:lt(2)")  匹配索引小于2的所有内容  

    :header    $(":header")  获取h1到h6的内容

    :animated    $("div:not(animated)")   指对没有执行动画的效果,执行一次动画的效果

    :focus      $(":focus")  指匹配到获取焦点的内容

    :root      $(":root")       匹配到当前的根节点   跟HTML一样的效果

    :target    $("p:target")     将匹配到       给定的URI http://example.com/#foo     <p id="foo"></p>

  内容:

    :contains(text)    $("div;contains(111)")   匹配包含给定文本的元素

    :empty        $("div:empty")  匹配所有不包含子元素或者文本的空元素    返回的结果<div><div>

    :has(selector)    $("div:has(p)")    匹配div中含p标签的div(用于过滤)

    :parent      $("p:parent")    匹配所有的p元素包括p的文本

  可见:

    :hidden    $("div:hidden")    匹配所有看不见的元素  或者type为hidden的元素

    :visible    $("div:visible")    匹配所有可见的元素

  属性:                  返回的结果

    [attribute]      $("div[id]")  <div id="a"></div>

    [attribute=value]    $("div[id='b']")  <div id="b"></div>

    [attribute!=value]    $("div[id!='a']")  <div id="c"></div>

    [attribute^=value]    $("div[id^='a']")  <div id="ab"></div>  <div id="ac"></div>

    [attribute$=value]    $("div[id$='a']")  <div id="ba"></div>  <div id="ca"></div>

    [attribute*=value]     $("div[id*='a']")  <div id="ab"></div>  <div id="ba"></div>   <div id="bac"></div>

    [attrSel1][attrSel2][attrSelN]  $("div[id][name$='man']")  <div id="xman" name="xman"><div>  

  子元素:

    :first-child    $("ul li:first-child")  ul下第一个子元素li

    :first-of-type    $("ul li:first-of-type")  ul下所有li中的第一个li

    :last-child    $("ul li:last-child")  ul下最后一个元素li

    :last-of-type    $("ul li:last-of-type")        ul下所有li中的最后一个li

    :nth-child    $("ul li:nth-child(2)")  ul下第二个元素li

    :nth-last-child  $("ul li:nth-last-child(2)")  ul下倒数第二个元素li

    :nth-last-of-type  $("ul li:nth-last-of-type(2)")  ul下所有li中第二个li

    :nth-of-type    $("ul li:nth-of-type(2)")  ul下所有li中第二个li

    :only-child    $("ul li:only-child")  ul下只能有一个li

    :only-of-type   $("ul li:only-of-type")  ul下唯一的标签li

  表单:

    :input    $(":input")  查找所有的input元素    像textarea(文本域)  button(按钮)  都会被匹配到

    :text    $(":text")  匹配单行文本框

    :password    $(":password")  匹配所有的密码框

    :radio    $(":radio")  匹配所有的单选框

    :checkbox    $(":checkbox")  匹配所有的复选框

    :submit    $(":submit")    匹配所有的提交按钮

    :image    $(":image")    匹配所有的图像域

    :reset      $(":reset")    匹配所有的重置按钮

    :button    $(":button")    匹配所有按钮

    :file    $(":file")    匹配所有的文件域

    :hidden    $(":hidden")    匹配所有不可见元素或type为hidden

  表单对象属性:

    :enabled  $(":enabled")    匹配所有可用元素

    :disabled  $(":disabled")    匹配所有不可用元素

    :checked    $(":checked")  匹配所有选中的元素(复选框,单选框,不包括selected的option)

    :selected  $(":selected")    匹配所有option

posted on 2019-02-27 16:36  Web引领者  阅读(132)  评论(0编辑  收藏  举报