シンプルでわかりやすいjQuery：jQueryの操作

HTML を動的に作成、操作、追加する

生の HTML 文字列を jQuery 関数に渡すことで、HTML マークアップを動的に作成できます。

リーリー

jQuery 関数を使用して DOM 構造を作成する場合、構造内のルート要素のみがラッパー セットに追加されることに注意してください。前のコード例では、<div> 要素がラッパー セット内の唯一の要素になります。 <p>HTML 構造内の要素が作成されたら、<code>find() メソッドを使用してその要素を操作できます。

リーリー

新しく作成した HTML を操作した後、jQuery の操作メソッドの 1 つを使用して、HTML を DOM に追加することもできます。以下では、appendTo() メソッドを使用してマークアップをページに追加します。

リーリー

注: 属性を含まない単純な要素 (例: $('<div></div>')) は、document.createElement# を介して作成されます。 ## DOM メソッド 、他のすべてのケースは innerHTML 属性に依存します。実際、document.createElement を使用して作成した要素を直接 jQuery 関数に渡すことができます。 $(document.createElement('div'))。 jQuery に渡される

HTML 文字列は、無効と見なされる可能性がある

<div> 要素内に含めることはできません。 jQuery 関数に渡される HTML 文字列は、整形式である必要があります。 <p> </p>jQuery HTML を渡すときは、すべての HTML 要素を開いて閉じる必要があります。これを行わないと、主に Internet Explorer でエラーが発生する可能性があります。安全のため、常に HTML 要素を閉じて、ショートカット HTML の記述を避けてください (例: <p>$(<code>)<div></div>.)。

---

index() メソッドの探索

要素を

index() メソッドに渡すことで、ラップされたセット内の要素のインデックスを決定できます。たとえば、Web ページ内のすべての <div> 要素を含むラッパー セットがあり、最後の <code><div> 要素のインデックスを知りたいとします。 リーリー <p>index()<code> の使用方法は、イベントでの使用方法を検討するまではピンと来ません。たとえば、以下のコードの <div> 要素をクリックすると、クリックされた <code><div> 要素を (キーワード this<code> を使用して) に渡すことができます。 index() メソッドは、クリックされた <div> のインデックスを決定します。 リーリー <hr>text() メソッドの探索<h2> </h2> <p>text()<code> メソッドはラッパー セットの最初の要素のテキスト ノードのみを返すと誤解する人もいるかもしれません。ただし、実際には、ラッパー セットに含まれるすべての要素のテキスト ノードを連結し、連結された値を 1 つの文字列として返します。この機能を必ず理解してください。理解していないと、予期しない結果が生じる可能性があります。 リーリー

---

正規表現を使用して文字を更新または削除する

JavaScript

replace() メソッドと jQuery 機能を組み合わせて使用​​すると、要素に含まれるテキスト内の文字パターンを非常に簡単に更新または削除できます。 リーリー

html() から返された文字列に含まれる文字を更新することもできます。つまり、テキストを更新するだけでなく、正規表現を使用して DOM 要素を更新および置換することもできます。

---

.contents() メソッドの探索

.contents() メソッドを使用すると、要素内に含まれるテキスト ノードを含むすべての子要素ノードを検索できます。ただし、問題があります。取得したコンテンツにテキスト ノードのみが含まれている場合、選択内容は単一のテキスト ノードとしてラッパー セットに配置されます。ただし、取得するコンテンツにテキスト ノード内に 1 つ以上の要素ノードが含まれる場合、.contents() メソッドにはテキスト ノードと要素ノードの両方が含まれます。この概念を理解するには、以下のコードを確認してください。 リーリー

ラッパー セット内の項目がテキスト ノードの場合、値を抽出するには

.get(0).nodeValue を使用する必要があることに注意してください。 contents() このメソッドは、テキスト ノード値を抽出するのに便利です。 contents() を使用すると、DOM 構造からテキスト ノードのみを抽出できます。 リーリー

---

remove() を使用しても、パックされたセットから要素は削除されません

remove()

を使用すると、DOM フラグメントが削除された DOM 構造に含まれる要素は、引き続きラッパー セットに含まれます。単一の jQuery チェーン内で、要素を削除し、その要素に対して操作を実行し、実際に要素を DOM に戻すことができます。 リーリー ここで重要なのは、

remove()

要素を実行したからといって、それらの要素が jQuery ラッパー セットから削除されたわけではないということです。