美文网首页
jQuery选择器

jQuery选择器

作者: 靈08_1024 | 来源:发表于2017-05-15 21:58 被阅读16次
    1 基本选择器
    • id选择器
      根据id来匹配元素,示例:$(id)或者$(“#id")。

    • 类选择器
      根据class来匹配元素数组,示例:$(“.class")。

    • 属性选择器
      根据属性来匹配选择器:
      $(“[attr]"):匹配所有有attr属性的选择器
      $(“[attr=val]"):匹配所有attr属性=val的选择器
      $(“[attr!=val]"):匹配所有attr属性不=val的选择器
      $(“[attr^=val]"):匹配所有attr属性的值以val开头的选择器
      $(“[attr$=val]"):匹配所有attr属性的值以val结尾的选择器
      $(“[attr*=val]"):匹配所有attr属性的值含有val的选择器
      $(“[attr~=val]"):匹配所有attr属性(此时该属性解析为单词数组)的值有val完整单词的选择器

    • type选择器
      匹配所有input的type值的情况,如$(":text")。

    • DOM节点选择器
      :empty:没有任何子节点(包括元素和文本节点)的元素
      :eq(n)/:gt(n)/:lt(n)/:nth(n):匹配选中列表中,等于/大于/小于/等于 序号n的元素
      :even/:odd:匹配偶数/奇数序号的元素
      :first/:last:匹配选中列表 第一个/最后一个 元素
      :first-child/:last-child:匹配其父元素和所有兄弟元素的第一个/最后一个 同类型元素
      :nth-child(n):匹配选中列表中,第n个元素(其中n可以是数值,even,odd,形如an+b的表达式。此时的n从1开始)
      :only-child:匹配只有一个子节点的元素
      :parent:匹配是父节点的元素

    • 其他扩展选择器
      :animated:匹配由jQuery产生的正在动画的元素
      :enabled/:disabled:匹配(未)被禁用的元素
      :selected:匹配下拉选中的元素
      :visible/:hidden:匹配所有占位置/不占位置的元素
      :has(sel)/:not(sel):匹配有/没有 选择器sel元素 的元素。
      :header:匹配所有 < h1> < h2>等等的h标签。
      :input:匹配所有的input。

    说明:
    1、在DOM节点选择器中,除nth-child(n)所有的n都是从0开始计数的。
    2、:hidden只匹配type=hidden或者display:none的元素。不匹配visibility:hidden的元素。
    3、:visible匹配所有非:hidden的元素
    4、<font color=red>同一选择器多次过滤,注意不要加空格,否则就变成在子孙节点中过滤。</font>

    //匹配type=text且class以x开头的元素
    console.log($("input[type=text][class^=x]"));
    

    5、选择器的扩展:

    $.expr[":"].x = function (e) {
        return e.type === 'button’;//函数要求返回布尔值,只记录函数计算为true的元素
    };
    //使用
    console.log($(“:x”));
    

    2 组合选择器

    将基本选择器进行组合构建的选择器。

    组合方式 说明
    A B 在A的子孙元素中选取匹配B选择器的元素。注意AB间有空格。
    A>B 在A的子元素中选取匹配B选择器的元素。
    A+B 匹配A的下一个元素(忽略文本、注释节点),选取匹配B的元素,若下一个元素不匹配,则没有。
    A~B 匹配A后面的所有兄弟元素,选取匹配B的元素

    选择器组

    用逗号将选择器隔开,返回组合的结果(并集),并按照文档顺序排序。

    console.log($(".x00,.x04,:button"));//返回所有含有class=x00或者class=x04或者type=button的文档元素
    

    DOM选取方法
    方法名 示例 说明
    .first()/.last() $("input").first()
    $("input").last()
    当前选中列表的第一个/最后一个元素
    .eq(n) $("input").eq(1) 当前选中列表的第n个元素(n从0开始)
    .slice() $("input").slice(1,3)
    $("input").slice(1)
    类似数组的slice方法。从下表a开始到下表b的区间元素。[a,b)
    .fliter() $("input").filter($(".x01"))
    $("input").filter(".x01")
    $("input").filter(function (i) {return i==1;})
    在当前所选区间的过滤。
    传入jQ对象或者选择器效果一样。
    传入函数时,过滤的结果为true的元素。
    .not() $("input").not(".x01") 在当前所选列表中不包含选择器的所有元素
    .has() $("div").has(".x01") 在当前所选列表中,其子孙元素包含选择器的所有元素。该方法只针对当前所选列表的子孙元素过滤,但返回当前所选元素。
    .add() $("input").add("#ss")
    $("input").add($("#ss"))
    在当前所选列表中,添加元素。并按照文档顺序排列。
    .find() $("div").find(".x00") 在当前所选列表的子孙元素中,查找选择器对应的元素,并返回该子孙元素。等价于($”div .x00”)。
    .children()/.content() $("#ss").children()
    $("#ss").contents()
    返回当前所选列表的所有子元素节点/子节点(包含文本)。
    .parent()/.closest(“”) $("#span12").parent()
    $("#span12").closest(".test")
    返回当前所选元素的直接父节点返回当前所选元素的匹配选择器(必填)的最近的父节点
    .next()/.prev() $("#ssss").prev()
    $("#ssss").next()
    返回当前节点的前一个/后一个兄弟节点
    .nextAll()/.prevAll() $(".x04").prevAll()
    $(".x04").nextAll()
    返回当前节点的前面所有/后面所有的兄弟节点
    .parents()/.parentsUntil() $(".x04").parents("div")
    $(".x04").parentsUntil("div")
    等价于
    $(".x04").closest("div").
    children().first()
    在当前节点的父节点中,所有的匹配选择器元素
    在当前节点的父节点中,向上主机匹配,直到匹配到选择器,但不包含最近的元素的父元素。

    补充:
    1、$(“XXX").end():(不接受参数)
    jQuery的链式调用,实际创建了一个jQuery的链式表或者栈。而每次调用end(),则弹出一次栈。end()只针对改变了jQuery最终选中元素的链式调用,其他链式方法(如css等)全部忽视。

    $(".x04").closest("div").children().first().end();//返回children的结果
    $(".x04").closest("div").children().first().end().end();//返回closest的结果
    

    2、andSelf():(jQuery1.8以后改名为addBack())(不接受参数)
    在jQuery的链式堆栈中加入最后一次改变结果的调用对象。

    $(".x04").closest("div").children().first().addBack();//返回first和children的并集结果(不重复)
    

    相关文章

      网友评论

          本文标题:jQuery选择器

          本文链接:https://www.haomeiwen.com/subject/ckohxxtx.html