jQuery 对DOM元素的遍历，创建，添加和删除

1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。

语法1：

$("div").each(function(index,domEle) {xxx;})

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。
2. 里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个元素转化为jquery对象$(domEle)

var arr = ["red","green","blue"];
$("div").each(function(index,domEle) {
    
    
  domEle.css("color");//dom对象没有css()方法，需要将其转化为jquery对象
  $(domEle).css("color",arr[index]);
})

语法2：

$.each(object,function(index,element) {xxx;})

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：index是每个元素的索引号；element是遍历内容

var arr = ["red","green","blue"];
//用$.each()遍历数组
$.each(arr,function(i,ele) {
    
    
  consle.log(i);
  console.log(ele) // 0 red 1 green 2 blue
})

总结：

遍历dom对象用 $().each()

遍历数组和对象用$.each()

2 创建元素

语法：

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

3 添加元素

1. 内部添加

element.append("内容")

把内容放入匹配元素内部的后面，类似于原生的appendChild.

2. 外部添加

element.after("内容") // 把内容放到目标元素的后面

element.before("内容") // 把内容放到目标元素的前面

注意：

1. 内部添加元素 生成之后是父子关系
2. 外部添加元素 生成之后是兄弟关系

4 删除元素

element.remove() //删除匹配的元素(本身)

element.empty() // 删除匹配元素集合中的所有的子节点

element.html("") // 清空元素的内容

// 1. 创建元素
var li = $("<li>我是创建的li</li>");

// 2. 添加元素

// (1) 内部添加
$("ul").append(li);// 放到后面
$("ul").prepend(li); // 放到前面

// (2) 外部添加
var div = $("<div>我是外部添加的div</div>");
$(".test").after(div);//放到后面
$(".test").defore(div); // 放到前面

// 3. 删除元素
$("ul").remove(); // 自杀
$("ul").empty(); // 删除ul里面的子节点
$("ul").html("");//清空ul里面的子节点 与empty()用法一致