1要素を繰り返します
jQueryの暗黙的な反復は、同じタイプの要素に対して同じ操作を実行することです。同じタイプの要素に対して異なる操作を実行する場合は、トラバーサルを使用する必要があります。
構文1:
$("div").each(function(index,domEle) {xxx;})
- each()メソッドは、一致した各要素を繰り返し処理します。主にDOM処理を使用します。
- 内部のコールバック関数には2つのパラメーターがあります。indexは各要素のインデックス番号です。domEleは各DOM要素のオブジェクトであり、jqueryオブジェクトではありません。
- したがって、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;})
- $ .each()メソッドを使用して、任意のオブジェクトをトラバースできます。主に配列、オブジェクトなどのデータ処理に使用されます
- 内部の関数には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("内容") // 把内容放到目标元素的前面
注意:
- 内部で追加された要素が生成された後、親子関係があります
- 外部から追加された要素が生成された後、兄弟関係は次のようになります。
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()用法一致