jQuery atraviesa, crea, agrega y elimina elementos DOM

1 Itera sobre elementos

La iteración implícita de jQuery consiste en realizar la misma operación en el mismo tipo de elemento. Si desea realizar diferentes operaciones en el mismo tipo de elemento, debe utilizar el recorrido.

Sintaxis 1:

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

1. El método each () itera a través de cada elemento coincidente. Utilice principalmente procesamiento DOM.
2. La función de devolución de llamada en el interior tiene 2 parámetros: índice es el número de índice de cada elemento; domEle es un objeto de cada elemento DOM, no un objeto jquery
3. Entonces, si desea utilizar el método jquery, debe convertir este elemento en un objeto jquery $ (domEle)

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

Sintaxis 2:

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

1. El método $ .each () se puede utilizar para atravesar cualquier objeto. Se utiliza principalmente para el procesamiento de datos, como matrices, objetos.
2. La función dentro tiene 2 parámetros: índice es el número de índice de cada elemento; elemento es el contenido transversal

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

para resumir:

Atraviesa el objeto dom con $ (). Each ()

Itera sobre matrices y objetos con $ .each ()

2 Crea elementos

gramática:

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

3 Agregar elementos

1. Agregado internamente

element.append("内容")

Coloque el contenido detrás del interior del elemento coincidente, similar al appendChild nativo.

2. Adición externa

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

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

Nota:

1. Después de que se generan los elementos agregados internamente, la relación padre-hijo
2. Después de que se genera el elemento agregado externamente, la relación entre hermanos

4 Eliminar elementos

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()用法一致