jQuery 元素操作

jQuery 元素操作主要讲的是用 jQuery 方法，操作标签的遍历、创建、添加、删除等操作。

遍历元素

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

语法1

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

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

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

语法2

$.each(object, function (index, element) {
    console.log(index, domE1e)
})

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

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

演示代码

html

<div>1</div>
<div>2</div>
<div>3</div>

javascript

$(function () {
  // $("div").css("color", "red");
  // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似 for ，但是比 for 强大）
  var sum = 0;

  // 1. each() 方法遍历元素
  var arr = ["red", "green", "blue"];
  $("div").each(function (index, domEle) {
    // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
    // 回调函数第二个参数一定是 dom 元素对象 也是自己命名
    console.log("index:\t", index, domEle);

    // domEle.css("color"); dom 对象没有 css 方法
    $(domEle).css("color", arr[index]);
    sum += parseInt($(domEle).text());
  });
  console.log("sum:\t", sum);

  // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
  console.log("遍历数据");
  $.each($("div"), function (i, ele) {
    console.log(i, ele);
  });

  $.each(arr, function (i, ele) {
    console.log(i, ele);
  });

  console.log("遍历对象");
  $.each(
    {
      name: "andy",
      age: 18,
    },
    function (i, ele) {
      console.log(i, ele); // 输出的是 key value
    },
  );
});

增删改节点

创建

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

动态的创建了一个 <li>

内部添加

element.append("内容");

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

element.prepend("内容");

把内容放入匹配元素内部最前面。

外部添加

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

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

1、内部添加元素，生成之后，它们是父子关系。 2、外部添加元素，生成之后，他们是兄弟关系。

删除元素

element.remove(); // 删除匹配的元素(本身)
element.empty(); // 删除匹配的元素集合中所有的子节点
element.html(""); // 清空匹配的元素内容

1、remove 删除元素本身。

2、empty() 和 html("") 作用等价，都可以删除元素里面的内容，只不过html还可以设置内容。

注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。

案例代码

html

<ul>
  <li style="color: red">原先的 li 1</li>
</ul>
<div class="test">我是原先的 div 1</div>

javascript

$(function () {
  // 1. 创建元素
  var li0 = $("<li>我是后来创建的 li 0</li>");
  var li2 = $("<li>我是后来创建的 li 2</li>");
  // 2. 添加元素
  // 2.1 内部添加
  $("ul").append(li0); // 内部添加并且放到内容的最后面
  $("ul").prepend(li2); // 内部添加并且放到内容的最前面

  // 2.2 外部添加
  var div0 = $("<div>我是后妈生的 div 0</div>");
  var div2 = $("<div>我是后妈生的 div 2</div>");
  $(".test").before(div0);
  $(".test").after(div2);

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