鋭いJquery——学習ノート(四)DOM操作(一)

JqueryにおけるDOM操作(一)

ノード

を検索する

ノード

を作成する

挿入ノード

削除ノード

レプリケーションノード

置換ノード

ラップノード

属性操作

スタイル操作

HTML、テキスト、および値の設定および取得

ノード

を巡回する.

css-dom動作

一、ノードの検索
1、エレメントノードの検索

var li_txt=$("ul li:eq(2)").text();  //           
alert(li_txt);

2、属性ノードの検索

var p_txt=$("p").attr("title");

attr()メソッドの最初のパラメータは属性の名前で、2番目のパラメータは設定値です.

$(selector).attr(attribute,value);

二、ノードの作成
1、要素ノードの作成
2つのステップがあります:(1)要素ノードの作成:$(html)メソッドは、入力されたhtmlタグ文字列に基づいてdomオブジェクトを作成し、jQueryオブジェクトにパッケージして返します(2)ノードをドキュメントに追加します:append()メソッド

var $li_1=$("
");
var $li_2=$("
");
$("ul").append($li_1);
$("ul").append($li_2);

2、创建文本节点

var $li_3=$("<li><em>  em><b>  b><a href='#'>     a>li>");
$("ul").append($li_3);

3、属性ノードの作成

var $li_4=$("
">  
");
$("ul").append($li_4);

三、ノードを挿入する
ノードの挿入方法(作成した要素をドキュメントの異なる場所に挿入)
(1)append();//該当する要素ごとに内容を追加する

$("ul").append($li_3);

(2)appendTo();//すべての一致する要素を指定した要素に追加

$("
   
").appendTo("ul");

(3)prepend();//一致する要素ごとに前置きを追加

html:<p>   ：p>
js:$("p").prepend("<b>hahahahab>");
   : <p><b>hahahahab>   ：p>

(4)prependTo();//指定した要素に一致するすべての要素を前に追加

js:$("hahahaha").prependTo("p");

(5)after();//現在のエレメントの後ろに挿入し、append()【現在のエレメントの内側の一番後ろに挿入】(6)insertAfter();//と(5)挿入した位置を逆さまにする(7)before();//現在のエレメントの前面に挿入し、prepend()【現在のエレメントの内側の一番前に挿入】(8)insertBefore();//(7)挿入位置と逆転
四、ノードの削除
1、remove()
入力されたパラメータに基づいて、一致する要素とその子孫ノードをすべて削除しますが、このメソッドは、後続のプログラムで適用を続行できる削除ノードの参照を返します.

$li_1=$("ul li:eq(2)").remove();
$li_1.appendTo("ul");

$("ul li").remove("li[title!='  ']");//          

2、empty()
ノードを削除するのではなく、ノードの内容を空にします.
五、複製ノード
適用シーン:ネットショッピングでアイテムを選択した後、マウスを選択するとカートにドラッグできます.

$(this).clone(true).appendTo("ul[name='purchasecar']");//         ，            

六、置換ノード
1、replaceWith()

$("p").replaceWith("<b>     b>");//       <p>     p>     <b>     b>

2、replaceAll()
使用法はreplaceWithの使用とは正反対です.注意:ノードが置換されると、元のノードバインドのイベントは消え、再バインドする必要があります.
七、ラップノード
1、wrapAll()
ラップノードは、wrapAll()メソッドですべての一致する要素を統一してラップしますが、wrap()は一致する要素ノードごとに個別にラップします.
2、wrapInner()
各一致する要素のサブコンテンツ(テキストを含む)を、他の構造化タグで包みます.