7、jQuery 元素操作

7、jQuery 元素操作

主要是遍历、创建、添加、删除元素操作

1、遍历元素

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

（1） each() 方法遍历元素

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

①回调函数第一个参数是索引号 可以自己指定索引号号名称

②回调函数第二个参数是dom元素对象 也是自己命名

③如果要使用jquery方法，需要将这个dom元素转换为jquery对象 $(domEle)

（2）$.each() 方法遍历元素，可用于遍历任何对象主要用于遍历数据，处理数据

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

① index 是每个元素的索引号;

②element 是遍历内容

$.each({
        name: "andy", // 对象
         age: 18
            }, function(i, ele) {
         console.log(i); // 输出的是 name age 属性名
         console.log(ele); // 输出的是 andy  18 属性值
            })

2、创建元素

// $(''<li></li>''); 动态的创建了一个 <li>
var li = $("<li>我是后来创建的li</li>");

3、添加元素

(1) 内部添加（生成之后是父子关系）

  $("ul").append(li);  // 内部添加并且放到内容的最后面，类似原生appendChild 
  $("ul").prepend(li); // 内部添加并且放到内容的最前面

(2) 外部添加 （生成之后是兄弟关系）

 var div = $("<div>我是后妈生的</div>");
           $(".test").after(div); // 外部添加并且放到内容的最后面 
           $(".test").before(div);// 外部添加并且放到内容的最后面 

4、删除元素

$("ul").remove(); // 可以删除匹配的元素（自杀）
$("ul").empty(); // 可以删除匹配的元素里面的子节点（删除孩子）
$("ul").html(""); // 可以删除匹配的元素里面的子节点（删除孩子）

empt() 和 html(’’’’) 作用等价，都可以删除元素里面的内容，但 html 还可以设置内容