jQuery中遍历元素，创建元素，添加元素，删除元素汇总

目录

一、遍历元素

1、概述

2、语法

二、创建元素

三、添加元素

四、删除元素

五、思维导图

---

一、遍历元素

1、概述

jQuery隐式迭代是对同一类元素做了同样的操作。

如果相对同一元素做不同的操作，就需要用到遍历

2、语法

遍历分为两种

2.1

$("div").each(function( index, domele){    })

 元素  $("div")写在外面，主要用于遍历  元素

1、each( )方法遍历匹配的每一个元素，主要用DOM处理。

2、里面的回调函数有两个参数：index是每一个元素的索引；domele是每一个DOM元素对象，不是jQuery对象。

3、如果想要使用jQuery方法，需要给这个DOM元素转换为jQuery对象  $(domele)

$("div").each(function(index, domele) {
                console.log(index);
                console.log(domele);
 })

------>   1
          <div></div>
          2
          <div></div>
          遍历完这一遍，返回去重新再遍历

2.2

$.each(object ,function( index ,domele){    })

 元素  $("div") / 对象   写在里面。

$.each( )可以遍历任何对象，主要用于遍历数据，处理数据。

如果数据是数字类型的，能直接遍历出数字类型。

     $.each({
                name: 'andy',
                age: 18
            }, function(index, domele) {
                console.log(index);
                console.log(domele);
            })

----->name
        andy
        age
        18
把对象中的 "属性：属性值"  都遍历出来

二、创建元素

$("<li></li>")；

动态创建一个元素

三、添加元素

生成元素是父子级关系

1、内部后添加

element.append("内容")；

将内容放在匹配元素内部最后面。（子元素）

在下图中明显看出是在  .nav盒子中添加子元素，且添加的子元素在原有元素的后面

   <ul>
        <li></li>
        <li></li>
        <li class="nav">
            <div class="before">原有元素</div>
        </li>
        <li></li>
        <li></li>
    </ul>
    <script>
        $(function() {
            var lili = $("<li>新创建的元素</li>");
            $(".nav").append(lili);
        })
    </script>

 

 

 2、内部前添加

element.prepend("内容")；

 在下图中明显看出是在  .nav盒子中添加子元素，且添加的子元素在原有元素的前面

  <ul>
        <li></li>
        <li></li>
        <li class="nav">
            <div class="before">原有元素</div>
        </li>
        <li></li>
        <li></li>
    </ul>
    <script>
        $(function() {
            var lili = $("<li>新创建的元素</li>");
            $(".nav").prepend(lili);
        })
    </script>

  

 生成元素是兄弟关系

 1、把内容放在目标内容后边（兄弟级关系）

element.after("内容")；

在下图可清晰看出是在 .nav 盒子后面生成一个兄弟元素节点

    <ul>
        <li></li>
        <li></li>
        <li class="nav">
            <div class="before">原有元素</div>
        </li>
        <li></li>
        <li></li>
    </ul>
    <script>
        $(function() {
            var lili = $("<li>新创建的元素</li>");
            $(".nav").after(lili);
        })
    </script>

 2、把内容放在目标内容前边（兄弟级关系）

element.before("内容")

内容相似，不再展示

四、删除元素

1、删除匹配的元素

element.remove( )；

2、删除匹配的元素集合中所有的子节点(元素节点，属性节点，文本节点（文字、空格、换行）)

element.empty( )；

 3、清空匹配的元素内容，和empty( )效果相同，html(" ")还能赋值。

element.html(" ")；

五、思维导图