JavaScript と jQuery を使用した DOM 操作

001 1、要素ノードを作成します

002 従来の JavaScript メソッド、要素ノードを作成します

003 var a = document.createElement("p");

004 jQuery でノードを作成するメソッドは次のとおりです:

00 5 $( ' < p>< /p>');

006 createElement() と同様に、作成された新しい要素ノードはドキュメントに自動的に追加されません。

007 ドキュメントに追加したい場合は、jQuery の append() または insertAfter() メソッド、または before () メソッドを使用できます。

008 例:

009 var a = $('< p>< /p>');

010 $('body').append(a);// body 要素。

011

012

013 2. テキスト ノードを作成します。

014 テキスト ノードを作成する従来の JavaScript メソッド

015 var b = document.createTextNode("my demo");

016 通常はテキストを作成します。使用するノードと作成要素ノード

017 例:

018 var mes = document.createTextNode("hello world");

020 コンテナ。 appendChild(mes );

021 document.body.appendChild(container);

022

023 jQuery でのノードの作成は、それほど面倒である必要はありません。

025 createElement() と同様に、作成された新しい要素ノードはドキュメントに自動的に追加されません。

026 ドキュメントに追加したい場合は、jQuery の append() または insertAfter() メソッド、または before () メソッドを使用できます。

027 例:

028 var a = $('< p>hello world< /p>');

029 $('body').append(a);//末尾に追加body 要素

030

031 3. ノードのコピー

032 従来の JavaScript メソッド、ノードのコピー:

033 例:

034 var mes = document.createTextNode("hello world");コンテナ = document .createElement("p");

036 コンテナ.appendChild(mes);

038 var newpara =container.cloneNode(true);// true と false の間

039 document.body.appendChild(newpara);

041 true: < p>aaaa<

042 false: < p< /p> のみが複製され、内部のテキストは複製されません。

043 firebug を使用して確認できます。

044

045 jQuery でノードをコピーします:

046 var a = $('< p>hello world< /p>')

047 $('body').append(a); 048 var clone_a = a.clone();

049 $('body').append(clone_a);

050

051 createElement() と同様に、コピーされた新しい要素ノードはドキュメントに自動的に追加されません。

052 ドキュメントに追加したい場合は、jQuery の append() または insertAfter() メソッド、または before () メソッドを使用できます。

053 もう 1 つの注意: クローン作成後に ID が同じ場合は、.attr("id","new_id") を使用して新しいノードの ID を変更することを忘れないでください。

054

055 4. ノードの挿入

056 従来の JavaScript メソッド、ノードの挿入:

057 例:

058 appendChild():

059 要素に子ノードを追加し、次の位置に新しいノードを挿入します。終わり。

060 var コンテナ = document.createElement("p");

061 document.body.appendChild(container);

063 insertBefore():

064 名前が示すように、ターゲット ノードの前に新しいノードを挿入します。

065 Element.insertBefore( newNode , targerNode );

066

067 jQuery にノードを挿入することは、JavaScript に付属する機能をはるかに超えています

068 例:

069 .append()

070 .app終了まで( )

071 .prepend()

072 .prependTo()

073 .after()

074 .insertAfter()

075 .before()

076 .insertBefore()

077 だからドムを操作するこの簡素化も jquery のハイライトの 1 つです。

078

079

080 5. ノードの削除

081 従来の JavaScript メソッド、ノードの削除:

082 例:

083 var b = document .getElementById("b");

084 var c = b.parentNode;

085 c.removeChild(b);

086

087 jQuery でノードを削除します:

089 $('# test2').remove();

091 6. ノードを置換します

092 従来の JavaScript メソッド、ノードを置換します:

093 例:

094 Element.repalceChild( newNode , oldNode );

095 oldNode は Element の子ノードである必要があります。

096

097 jQuery の置換ノード:

098 例:

099 $("< p>Replace test1! < /p>").replaceAll("#test1");

101 7、属性の設定、属性の取得

102 従来の JavaScript メソッド、属性の設定、属性の取得:

103 例:

104 setAttribute();//Set

105 var a = document.createElement(" p ");

106 a.setAttribute("title","my demo");

107 以前に title 属性があったかどうかに関係なく、将来の値は私のデモです。

108

109 getAttribute();//Get

110 var a =document.getElementById("cssrain");

111 var b = a.getAttribute("title");

112 取得時属性は存在しないため、空を返します。

113

114 jQuery での属性の設定、属性の取得:

115 例:

116 $("#test1").attr({ "class" : "test " , "title" : "TestDemo!" });

117 $("#test1").attr("class");

118

119 8、ノードを探す

120 jQueryのノードを探す です。簡単です。

121 jQuery で最も興味深いのは、一般にセレクターとして知られる検索ノードです。 例:

123 $('#id')

124 $('.class ')

125 $('tag')

126 $('tag.class')

127 $('#idタグ')

128 $('tag#id')

129 $(' #id:visible')

130 $('#id .class')

131 $('.class .class')

132 ....

以上がJavaScriptのDOM操作の内容であり、 jQuery に関するその他のコンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。