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

二、创建元素

$("<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(" ")；

五、思维导图