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
})

総括する:

$()。each()でdomオブジェクトをトラバースします

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

おすすめ

転載: blog.csdn.net/qq_46178261/article/details/105694356