jQuery_jquery でのシャープな jQuery DOM 操作

1 要素ノードの検索

var $x = $("selector").text()

2 属性ノードを検索

var $x = $("selector").attr("property")

3 ノードの作成

var $x = $("html")

4 ノードの挿入

$("selector").append()
一致する各要素にコンテンツを追加します
$("selector").appendTo()
左右を入れ替える .append() 演算子と同等

$("selector").prepend()
一致する各要素内のコンテンツを先頭に追加します
$("selector").prependTo()
左右を入れ替える .prepend() 演算子と同等

$("selector").after()
一致する各要素の後にコンテンツを挿入します
$("selector").insertAfter
と同等左右を入れ替える .after() 演算子

$("selector").before()
一致する各要素の前にコンテンツを挿入します
$("selector").insertBefore()
左右を入れ替える .before() 演算子と同等

5 モバイルノード

本書の P70 の例:

コードをコピー コードは次のとおりです:

<script> <br>var $one_li = $("ul li:eq(1)"); // <ul> var $two_li = $ ("ul li :eq(2)"); // <ul> ノードの 3 番目の <li> $two_li.insertBefore($one_li); // ノードを移動します</スクリプト> <br><br><br><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><br><font color="#ff0000" size="3">6 ノードの削除</font></span></span> <p>6.1 Remove() メソッド</p> <p><b>$("selector").remove()</b><br> Remove() メソッドは、remove() メソッドで要素が削除された後、セレクターのすべての子孫ノードを削除します。まだ使用されています。さらに、remove() メソッドはパラメータ </p> を渡すこともできます。 <p> $("ul li").remove("li[title!=xxx]");</p> などの要素を選択的に削除します。 <p>6.2 empty() メソッド</p> <p><b>$("selector").empty()</b><br> セレクターの子孫ノードをすべてクリアします</p> <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">7 ノードのコピー</font></span></span></p> <p><b>$("selector").clone()</b><br> $(this).clone().appendTo("ul") など。コピーされた新しい要素に元の要素の動作を持たせるには、パラメーター true を渡す必要があります。 $("selector").clone(true)</p> など <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">8 ノードを置換</font></span></span></p> <p><b>$("selector").replaceWith()</b><br> 一致するすべての要素を指定された HTML または DOM 要素に置き換えます <br><b>$("selector").replaceAll ()</b><br> は、左と右を入れ替える .replaceWith() 演算子 </p> と同等です。 <p><span style="FONT-SIZE: medium"><span style="COLOR: #ff0000"><font size="3">9 パッケージ ノード</font></span></span></p> <p><b>$("selector").wrap()</b><br> 一致する要素をすべて個別にラップ <br><b>$("selector").wrapAll()</b><br> ラップ1 つの要素を持つすべての一致する要素 <br><b>$("selector").wrapInner()</b><br> タグでラップされた各一致要素 (テキスト ノードを含む) のサブコンテンツに他の構造化要素を使用する</p> <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">10 の属性操作</font></span></span></p> <p><b>$("selector").attr()</b><br> $("p") など、要素属性 (1 つのプロパティ パラメーター) を取得および設定します (2 つのパラメーター、プロパティと値)。 attr("タイトル","あなたのタイトル")。 </p>を同時に設定した場合 <p>$("p").attr({"title" : "your title" , "name" : "test"})<br><b>$("selector") の形式で複数の属性を設定します.removeAttr()</b><br> 要素の属性を削除します</p> <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">11 スタイル操作</font></span></span></p> <p><b>$("selector").attr()</b><br> 置換スタイル</p> <p><b>$("selector").addClass()</b><br> スタイルを追加</p> <p><b>$("selector").removeClass()</b><br> スタイルを削除します</p> <p><b>$("selector").toggle()</b><br> 動作の繰り返し切り替え<br>例:<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="66808" class="copybut" id="copybut66808" onclick="doCopy('code66808')"><u>コードをコピー</u> </a></span> コードは次のとおりです。 </div> <div class="codebody" id="code66808"> <br><script> <br>$x.toggle(function(){ <br>//code1 <br>},function( ){ <br>//code2 <br>}) <br></script>

code1 と code2 を交互に実行します

$("selector").toggleClass()
$("p").toggleClass("anotherClass")

など、スタイルの繰り返しの切り替えを制御します。

$("selector").hasClass("anotherClass")
セレクターに anotherClass が含まれているかどうかを判断します