zoukankan      html  css  js  c++  java
  • jQuery 遍历

    .add()

    add() 方法将元素添加到匹配元素的集合中
    
    .add(selector)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式。
    
    .add(elements)//添加到匹配元素集合的一个或多个元素
    
    .add(html)//添加到匹配元素集合的 HTML 片段
    
    .add(jQueryObject)//添加到匹配元素集合的已有 jQuery 对象
    
    .add(selector, context)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式;选择器开始进行匹配的位置。
    
    $("div").css("border", "2px solid red")
            .add("p")
            .css("background", "yellow");//找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象,并把它们的背景设置为黄色

    .andSelf()

    把堆栈中之前的元素集添加到当前集合
    
    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");//找到所有 div,以及其中的所有段落,并为它们添加两个类名。请注意,由于未使用 .andSelf(),div 没有黄色背景色
    
    <ul>
       <li>list item 1</li>
       <li>list item 2</li>
       <li class="third-item">list item 3</li>
       <li>list item 4</li>
       <li>list item 5</li>
    </ul>
    $("li.third-item").nextAll().andSelf()
      .css("background-color", "red");//代码的结果是项目 3,4,5 拥有红色背景
    
    首先,初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后,调用 .andSelf() 会合并这两个集合,所创建的 jQuery 对象指向按照文档顺序的所有三个项目:{[<li.third-item>,<li>,<li> ]}
    
    个人理解:把之前匹配道德集合和当前集合合并在一起

    .children()

    $("div").children(".selected").css("color", "blue");//找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色
    
    .children(selector)//字符串值,包含匹配元素的选择器表达式
    
    返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤
    
    .find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。
    与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。

    .closest()

    .closest(selector)//closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上
    
    $( document ).bind("click", function( e ) {
        $( e.target ).closest("li").toggleClass("hilight");
      });//当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景

    .parents() 和 .closest() 方法

    .closest().parents()
    从当前元素开始 从父元素开始
    沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。
    返回包含零个或一个元素的 jQuery 对象 返回包含零个、一个或多个元素的 jQuery 对象

    .contents()

    .contents()
    
    获得匹配元素集合中每个元素的子节点,包括文本和注释节点
    
    $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");//找到段落中的所有文本节点,并用粗体标签包装它们

    .each()

    $(selector).each(function(index,element))//each() 方法为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环
    
    index - 选择器的 index 位置;element - 当前的元素(也可使用 "this" 选择器)
    
    $("button").click(function(){
      $("li").each(function(){
        alert($(this).text())
      });
    });//输出每个 li 元素的文本

    .end()

    end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态
    
    $('ul.first').find('.foo').css('background-color', 'red')
      .end().find('.bar').css('background-color', 'green');//把所有方法调用串联在一起

    .eq()

    .eq(index)将匹配元素集缩减值指定 index 的一个
    
    $("body").find("div").eq(2).addClass("blue");//通过为 index 为 2 的 div 添加适当的类,将其变为蓝色

    .filter()

    将匹配元素集合缩减为匹配指定选择器的元素
    
    .filter(selector)//字符串值,包含供匹配当前元素集合的选择器表达式
    
    $("div").css("background", "#c8ebcc")
      .filter(".middle")
      .css("border-color", "red");//改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框

    .find()

    find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选
    
    .find(selector)
    
    $("p").find("span").css('color','red');//搜索所有段落中的后代 span 元素,并将其颜色设置为红色

    .first()

    first() 将匹配元素集合缩减为集合中的第一个元素
    
    $("p span").first().addClass('highlight');//高亮显示段落中的第一个 span 

    .has()

    has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集
    
    .has(selector)//字符串值,包含匹配元素的选择器表达式
    
    $('li').has('ul').css('background-color', 'red')
    该调用的结果是,项目 2 的背景被设置为红色,这是因为该项目是后代中唯一拥有 <ul> 的 <li>
    
    详细说明
    如果给定一个表示 DOM 元素集合的 jQuery 对象,.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中

    .is()

    .is(selector) 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true
    
      var isFormParent = $("input[type='checkbox']").parent().is("form");
      $("div").text("isFormParent = " + isFormParent);//返回 false,因为 input 元素的父元素是 p 元素,若改为.parents(),则true
    
    

    .last()

    last() 将匹配元素集合缩减为集合中的最后一个元素
    
    $("p span").last().addClass('highlight');//高亮显示段落中的最后一个 span 

    .map()

    .map(callback(index,domElement))//把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象
    
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );//构建表单中所有值的列表

    .next()

    .next(selector)//next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素
    
    $("p").next(".selected").css("background", "yellow");//查找每个段落的下一个同胞元素,仅选中类名为 "selected" 的段落
    
     <p>Hello</p>
      <p class="selected">Hello Again</p>
      <div><span>And Again</span></div>选中每个<p>的后一个元素,即第二个<p>和<div>

    .nextAll()

    nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。.nextAll(selector)
    
    $("div:first").nextAll().addClass("after")//查找第一个 div 之后的所有类名,并为他们添加类名

    .nextUntil()

    nextUntil() 获得每个元素所有跟随的同胞元素,但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素
    
    .nextUntil(selector,filter)
    
    .nextUntil(element,filter)
    
    selector    字符串值,包含指示在何处停止匹配跟随的同胞元素的选择器表达式。
    element    指示在何处停止匹配跟随的同胞元素的 DOM 节点或 jQuery 对象。
    filter    字符串值,包含用于匹配元素的选择器表达式。
    
    $("#term-2").nextUntil("dt").css("background-color", "red");
    var term3 = document.getElementById("term-3");
    $("#term-1").nextUntil(term3, "dd").css("color", "blue");一个参数查找跟随 <dt id="term-2"> 的同胞元素,直到下一个 <dt>,然后将它们设置为红色背景色。两个参数同时,找到跟随 <dt id="term-1"> 的 <dd> 同胞元素,直到 <dt id="term-3">,并为它们设置蓝色文本颜色。

    .not()

    .not(element)
    .not(selector)
    $("p").not("#selected")//从包含所有段落的集合中删除 id 为 "selected" 的段落

    .offsetParent()

    offsetParent() 获得被定位的最近祖先元素//类似position: relative;
    
    $('li.item-a').offsetParent().css('background-color', 'red');//设置类名为 item-a 的 li 元素的最近定位父元素的背景色

    .parent()

    .parent(selector)//parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的
    
    $("p").parent(".selected")//查找每个段落的带有 "selected" 类的父元素

    .parents()

    .parents(selector)//获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的
    
    $("b").parents()//查找每个 b 元素的所有父元素

    .parentsUntil()

    .parentsUntil(selector,filter)
    
    .parentsUntil(element,filter)
    
    $("li.item-a").parentsUntil(".level-1")
      .css("background-color", "red");
    
    $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
      .css("border", "3px solid blue");//查找 <li class="item-a"> 的祖先元素,直到 <ul class="level-1">,并将它们设置为红色背景。同时,找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素,直到 <ul class="level-1">,然户为它们设置蓝色边框
    
    在 .level-1中查找 item-a的父元素,但查找结果不包括 .level-1的内容

    .prev()

    .prev(selector)//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的
    
    $("p").prev(".selected")//检索每个段落,找到类名为 "selected" 的前一个同胞元素

    .prevAll()

    .prevAll(selector)//prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素,使用选择器进行筛选是可选的
    
    $("div:last").prevAll().addClass("before");//定位最后一个 div 之前的所有 div,并为它们添加类

    .prevUntil()

    .prevUntil(selector, filter)
    .prevUntil(element, filter)
    prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素,但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素
    
    $("#term-2").prevUntil("dt").css("background-color", "red");
    var term1 = document.getElementById('term-1');
    $("#term-3").prevUntil(term1, "dd").css("color", "green");
    查找 <dt id="term-2"> 之前的同胞元素,直到前一个 <dt>,并将它们设置为红色。同时,查找 <dt id="term-3"> 前面的 <dd> 同胞,直到 <dt id="term-1">,并把它们设置为蓝色文本
    
    
    $("#term-2").prevUntil("dt"),两个之间,不包括本身
    $("#term-3").prevUntil(term1, "dd") #term-3前面的dd同胞,直到term1(包括term1下的子元素)

    .siblings()

    .siblings(selector)
    siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的
    
    $("p").siblings(".selected")//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素

    .slice()

    .slice(selector,end)//slice() 把匹配元素集合缩减为指定的指数范围的子集(基于 0 的整数值)
    
    $("p").slice(0, 2).wrapInner("");
    选中所有段落,然后将所选内容缩减为只包含第和第个段落

    ————————————————————各种找爹找儿子找同胞————————————————————

  • 相关阅读:
    JS基础语法
    JS的初步了解
    CSS初步学习
    HTML标签
    初步了解HTML
    LEGB规则
    Python面试题练习
    闭包
    Caché,Cache数据库连接并查询数据
    Caché,Cache数据库下载
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3542950.html
Copyright © 2011-2022 走看看