jQueryを使用してページ要素を処理する使用例_jquery

この記事の例では、jQuery を使用してページ要素を処理する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ページ要素の場合、DOM プログラミングのさまざまなクエリおよび変更メソッドを通じて管理できますが、これは非常に面倒です。 jQuery は、ページ要素を操作するためのメソッドのセット全体を提供します。コンテンツ、要素のコピー、移動、置換を含みます。ここでは一般的に使用されるものをいくつか紹介します。

1. コンテンツを直接取得して編集します。

jQuery では、ページのコンテンツは主に html() と text() の 2 つのメソッドを通じて取得および編集されます。このうち、html() はノードの innerHTML 属性を取得することに相当します。 html(text) は要素のプレーン テキストを取得するために使用され、text(content) はプレーン テキストを設定します。文章。

これら 2 つのメソッドは一緒に使用されることがあります。text() はページ内のタグをフィルターするために使用され、html(text) はノード内の innerHtml を設定するために使用されます。例:

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

$(function() {
var sString = $("p:first").text() //プレーンテキストを取得します
$("p:last").html(sString);
});

text() メソッドを使用して最初の P のテキストを取得し、html() メソッドを使用してそれを最後の

に割り当てます。

text() メソッドと html() メソッドの独創的な使用法。

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

本文段落表示例

マウスの 1 クリック、2 クリック、3 クリックでコードを取得および転送できます。

2. 要素の移動とコピー

通常の DOM では、要素の後に要素を追加する場合、親要素の appendChild() メソッドや insertBefore() メソッドを使用することが多く、ノードの位置を繰り返し検索する必要があります。これは非常に面倒です。jQuery には、要素に新しいサブ要素を直接追加できる append() メソッドが用意されています。

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

1122...

3344...

HTML コードを直接追加するだけでなく、append() メソッドを使用して
などの固定ノードを追加することもできます。

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

$("p").append($("a") );

この状況は少し異なります。追加された

が唯一の要素である場合、$("a") はその要素のすべての子要素の後ろに移動されます。複数の要素がある場合、$("a") はコピーの形式で各 P に子要素を追加しますが、それ自体は変更されません。例: append() メソッドを使用して要素をコピーおよび移動します。

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

リンク 1
リンク 2

テキスト 1

テキスト 2

上記のコードは、append() 呼び出しに対して 2 つのハイパーリンク を設定します。最初のハイパーリンクには、ターゲット $("p") を追加します。これには 2 つの

要素が含まれます。2 番目のハイパーリンクには、ターゲットを唯一の

要素として追加します。

最初のハイパーリンクはコピーで追加され、2 番目のハイパーリンクは移動で追加されていることがわかります。

さらに、上記からわかるように、append() の後の タグは、独自のスタイルを維持したまま、ターゲットの

のスタイルに適用されます。これは、append() が を

のサブタグとして追加し、 を

のすべてのサブタグ (テキスト) ノードの後ろに配置するためです。

jQuery は、append() メソッドに加えて、指定されたターゲットの子要素にターゲット要素を追加するために使用される appendTo(target) メソッドも提供します。その使用法と結果は append() と完全に似ています。

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

$(function() {
$("img:eq(0)").appendTo($("p")) //複数のターゲットを追加

$("img:eq(1)").appendTo($("p:eq(0)")); //追加されたターゲットは一意です
});

---

最初の写真では、同僚が 3 つの p タグに追加し、2 番目の写真では 1 つの P 要素に追加しました。実行結果から、コピーされた最初の写真が 3 つの p 要素に追加されたことがわかります。 P 要素は の形式で、2 番目の画像はモバイル形式で追加されます。

append() メソッドと appendTo() メソッドに対応して、JQ は prepend() メソッドと prependTo() メソッドも提供します。これらの 2 つのメソッドは、ターゲットのすべての子要素の前に要素を追加し、追加のコピーと移動も行います。原則として。

上記の 4 つのメソッドに加えて、Jq は before()、insertBefore()、after()、insertAfter() も提供します。これらは、要素を子としてではなくノードの直前または直後に追加するために使用されます。挿入。

Before() は insertBefore() とまったく同じであり、after() と insertAfter() もまったく同じです。ここでは、after() を例に挙げます。

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

リンク 1
リンク 2

コンテンツ 1

コンテンツ 2

上記のコードを実行した結果、after() メソッドも単一のターゲットの移動と複数のターゲットのコピーの原則に従い、子要素として追加されなくなっていることがわかります。代わりに、これはターゲット要素の直後の兄弟要素です。

3. 要素を削除します。

DOM プログラミングでは、要素を削除するには、親要素の RemoveChild() メソッドを使用することがよくあります。jQuery には、要素を直接削除するための Remove() メソッドが用意されています。

たとえば、$("p").remove(); は、ページ全体のすべての p 要素タグを削除します。

remove() はパラメータも受け入れます。

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

リンク 1
リンク 2

コンテンツ 1

コンテンツ 2

上記のコードでは、remove() でフィルターセレクターを使用し、テキスト内容に 1 が含まれる P 要素が削除されます。

remove() はパラメーターを受け入れることができますが、通常はセレクターの段階で削除するオブジェクトを決定し、remove() を使用してすべてを一度に削除することをお勧めします。 ("p:contains('1')").remove(); 効果はまったく同じで、他のコードのスタイルと一貫性があります。

DOM では、要素の子要素をすべて削除したい場合、hasChildNodes() で for ループを使用して判断し、removeChildNode() を使用して 1 つずつ削除することがよくあります。 ) メソッドを使用して、すべての子要素を直接削除します。

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

リンク 1
リンク 2

コンテンツ 1

コンテンツ 2

4. 要素をクローンします。

2 番目のセクションでは要素のコピーと移動について説明しますが、これはターゲットの数に依存します。多くの場合、開発者はターゲット オブジェクトが 1 つしかない場合でもコピー操作を実行できることを望みます。

jQuery は、このタスクを実行するための clone() メソッドを提供します。

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

---

前のセクションの appendTo() メソッドによって得られた結果も完了します。

さらに、 clone() 関数はパラメータとしてブール値オブジェクトも受け入れます。パラメータが true の場合、クローン自体に加えて、それが保持する time メソッドも一緒にコピーされます。

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

上記のコードは、ボタンがクリックされたときにボタン自体を複製し、同時にクリックイベントを複製します。複製されたボタンにはそれ自体を複製する機能もあります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。