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
          

          2
          

          遍历完这一遍，返回去重新再遍历

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
把对象中的 "属性：属性值"  都遍历出来

二、创建元素

$("

")；

动态创建一个元素

三、添加元素

生成元素是父子级关系

1、内部后添加

element.append("内容")；

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

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

   

        

        

        

            
原有元素
        
        

        

    
    

 

 

 2、内部前添加

element.prepend("内容")；

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

  

        

        

        

            
原有元素
        
        

        

    
    

  

 生成元素是兄弟关系

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

element.after("内容")；

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

    

        

        

        

            
原有元素
        
        

        

    
    

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

element.before("内容")

内容相似，不再展示

四、删除元素

1、删除匹配的元素

element.remove( )；

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

element.empty( )；

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

element.html(" ")；

五、思维导图