美文网首页我爱编程
jQuery遍历元素的方法

jQuery遍历元素的方法

作者: 吧啦啦小汤圆 | 来源:发表于2016-10-31 21:14 被阅读365次

jQuery append() 方法

append() 方法在 被选元素内部的结尾插入指定内容。
提示:append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容的位置和选择器的位置相反。
语法:$(selector).append(content)

<div>
    <span class="love">
         我爱你
    </span>
</div>

执行下面:
$(".love").append("<p>我要加一个数据</p>");

结果:

<div>
   <span class="love">
        我爱你
       <p>我要加一个数据</p>
  </span>
</div>

jQuery appendTo()方法

将匹配的元素插入到目标元素内部的最后面
.append()和.appendTo()两种方法功能相同
主要的不同是语法——内容和目标的位置不同。

<h2>Greetings</h2>

<div class="container">
       <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
</div>
  • 我们可以创建内容然后同时插入到好几个元素里面:
$('<p>Test</p>').appendTo('.inner');

每个新的inner <div>元素会得到新的内容:

<h2>Greetings</h2>
<div class="container">
     <div class="inner">
             Hello
           <p>Test</p>
     </div>

     <div class="inner">
          Goodbye
         <p>Test</p>
     </div>
</div>
  • 我们也可以在页面上选择一个元素然后插在另一个元素里面:
$('h2').appendTo($('.container'));

如果这种方式选择的元素被插入到一个DOM中单一的位置的地方(愚人码头注:文档中只有一个目标元素),它将被 移动到目标中(不是克隆),并返回一组新的插入后的元素集合:

<div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
      <h2>Greetings</h2>
</div>

然而,如果有多个目标元素,插入元素的克隆副本被创建到每个目标元素,而不是只插入到最后一个目标元素,并且新的集合(原始元素加克隆元素)被返回。

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。
下面的例子返回每个 <span> 元素的的直接父元素:

$(document).ready(function(){
 $("span").parent();
});

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先:

$(document).ready(function(){
 $("span").parents();
});

也可以使用可选参数来过滤对祖先元素的搜索:
下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:

$(document).ready(function(){ 
$("span").parents("ul");
});

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。
下面的例子返回每个 <div> 元素的所有直接子元素:

$(document).ready(function(){
 $("div").children(这里面可以写条件指定某一个孩子);
});

您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:
实例

$(document).ready(function(){ 
$("div").children("p.1");
});

jQuery find() 方法

find() 方法返回被选元素的 所有 后代元素,一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素:

$(document).ready(function(){ 
$("div").find("span");
});

下面的例子返回 <div> 的所有后代:

$(document).ready(function(){ 
$("div").find("*");
});

jQuery closest() 方法

closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。

$("#content").closest("li")  
 #找到id=content的元素的 最近的祖先元素 li

Prev()

$(this).prev() # 找到当前元素的上一个兄弟(同胞)
$("p").prev(".selected") #检索每个段落p,找到类名为 "selected" 的前一个同胞元素:

获取元素值 || 赋值 val()

var value = $(this).prev().val(); #jquery获取某一个元素的值的方法
$(this).prev().val(""); # 也可以给某一个元素赋值,这将当前元素的上一个同胞(兄弟)元素置空(赋空值)

数据解析$.parseJSON()

$.parseJSON(result); #jquery也可以解析数据,解析成json对象

下一个同胞元素next()

``$("p").next(); ##查找每个段落p的下一个同胞元素$("p").next(".selected").css("background", "yellow");` #查找每个段落p的下一个同胞元素,仅选中类名为 "selected" 的段落

获取后面跟随的所有同胞元素:nextAll()

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,
$("div:first").nextAll().addClass("after");#查找第一个 div 之后的所有类名,并为他们添加类名:

获取css属性,给某属性赋值:css()

所有子孙里查找:find()

$("p").find('.post-footer') 查找p元素下面有没有class为post-footer的一个元素,find方法会在p的所有子孙里面去查找。

after()

after() 方法在被选元素后插入指定的内容。

$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});

相关文章

  • jQuery遍历中的方法

    jQuery遍历 向上遍历DOM-祖先 parent() 方法:返回被选元素的直接父元素 parents()方法:...

  • jQuery遍历函数

    jQuery 遍历函数jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。| .add()[https:/...

  • 有用的jquery整理

    jQuery遍历 - each() 方法 jQuery对象和DOM对象使用说明 Jquery css元素 默认情况...

  • jQuery基础(二)—DOM篇——遍历

    1、jQuery遍历之children()方法 .children(selector) 方法是返回匹配元素集合中每...

  • jQuery遍历元素的方法

    jQuery append() 方法 append() 方法在 被选元素内部的结尾插入指定内容。提示:append...

  • jQuery - 遍历(一)之 祖先

    jQuery 遍历,用于根据所要查找的元素相对于其他元素的关系来查找到该元素。 jQuery 提供了一系列的方法来...

  • jQuery - 遍历(二)之 后代

    jQuery 遍历,用于根据所要查找的元素相对于其他元素的关系来查找到该元素。 jQuery 提供了一系列的方法来...

  • jQuery - 遍历(三)之 同胞

    jQuery 遍历,用于根据所要查找的元素相对于其他元素的关系来查找到该元素。 jQuery 提供了一系列的方法来...

  • 2019-03-04

    ①jquery遍历siblings()方法的使用(获取元素同一级的兄弟节点)②hasClass()/removeC...

  • jQuery 遍历

    jQuery 遍历 什么是遍历?jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取...

网友评论

    本文标题: jQuery遍历元素的方法

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