JQuery 基礎コース: JQuery での DOM 操作の概要

ブラウザ、プラットフォーム、言語に依存しないインターフェース。このインターフェイスにより、ページ内のすべての標準コンポーネントに簡単にアクセスできます。

DOM コア: DOM コアは JavaScript 専用ではなく、DOM をサポートするあらゆるプログラミング言語で使用できます。その使用は Web ページの処理に限定されず、XML などのマークアップ言語で記述されたあらゆるドキュメントの処理にも使用できます。

HTML DOM: JavaScript と DOM を使用して HTML ファイルをスクリプト化する場合、HTML-DOM に固有のプロパティが多数あります。

CSS-DOM: CSS 操作の場合、JavaScript では、CSS-DOM は主にスタイル オブジェクトのさまざまな属性を取得および設定するために使用されます。

「

」の助けを借りて

2. ノードを作成します

JQuery のファクトリー関数を使用して新しいノードを作成します: var $newNode = $(“

Hello

”); そして、新しいノードを指定されたノードに挿入します。要素ノード。

3。

“$node.append($newNode)”、一致する各要素の末尾に末尾を追加します。たとえば、「$("p").append("Hello");」は、「p」の末尾に「Hello」を追加します。

“$newNode.appendTo($node)”、一致する各要素の末尾に新しい要素を追加します。

“$node.prepend($newNode)” は、一致する各要素の先頭と末尾を追加します。たとえば、「$("p").prepend("Hello");」は、「p」内の先頭に「Hello」を追加します。

“$newNode.prependTo($node)”、一致する各要素の先頭に新しい要素を追加します。

“$node.after($newNode)” は、一致する各要素の後にコンテンツを挿入します。これは並列兄弟です。たとえば、「$("p").after("Hello");」は、「p」の後に「Hello」を挿入します。彼らは兄弟です。

“$newNode.insertAfter($node)” は、一致する各要素の後に新しい要素を挿入します。

“$newNode.before($node)”、一致する各要素の前にコンテンツを挿入します。たとえば、「$("p").before("Hello");」は、「p」の前に「Hello」を挿入します。 。

“$node.insertBefore($newNode)” は、一致する各要素の前に新しい要素を挿入します。

注: 挿入されたノードが新しく作成されていない場合、挿入は移動操作になります。したがって、複製されたノードは、そのようなノードを挿入する前に使用する必要があります。

4. ノードの削除

オフ 。たとえば、「$("p").remove(".hello");」は、クラス属性値が hello である p 要素とその下のすべての要素を削除します。

DOM から一致する要素をすべてクリアします。たとえば、「$("p").empty();」は、すべての p 要素とその下のすべての要素をクリアします。节制 5. ノード

のDOM要素のマッチングをコピーします。たとえば、「$("p").clone();」はクローンされたコピーを返しますが、動作はありません。 DOM イベントをまとめて複製する場合は、「$("p").clone(true);」を使用する必要があります。

6. ノードの置換

一致するすべての要素を指定された HTML または DOM 要素に置き換えます。たとえば、 $("p").replaceWith("Paragraph. "); は、すべての p 要素を "Paragraph. " に置き換えます。

replaceWith: $("Paragraph. ").replaceAll("p"); を返します。节裹7. Packal ノード

Wrap (): 指定されたノードを他のタグでラップします。この方法は、元の文書のセマンティクスを破壊することなく、追加の構造化マークアップを文書に挿入する必要がある場合に役立ちます。たとえば、「$("p").wrap("

");」となります。各 p 要素は

にラップされます。

wrapAll(): 一致するすべての要素を 1 つの要素でラップします。 Wrap() メソッドは、すべての要素を個別にラップします。たとえば、「$("p").wrapAll("

");」は、すべての p 要素を

にラップします。

wrapInner(): 一致する各要素のサブコンテンツ (テキスト ノードを含む) を他の構造化タグでラップします。たとえば、"$("p").wrapInner("");"、 は各 p 要素によってラップされます。

8. 属性の設定

attr(): 属性を取得し、属性を設定します。

このメソッドにパラメータが渡されると、要素に対して指定された属性が取得されます。たとえば、「$("img").attr("src");」は、img 要素の src 属性値を取得します。

このメソッドに 2 つのパラメータが渡されると、指定された属性の値が要素に設定されます。たとえば、「$("img").attr("src","test.jpg");」とすると、img 要素の src 属性値を test.jsp に設定します。

jQuery には、取得および設定する関数であるメソッドが多数あります。例: attr()、html()、text()、val()、height()、width()、css() など。

removeAttr(): 指定された要素の指定された属性を削除します。式 样 9. スタイル操作

は、「ATTR()」設定を通じて設定または取得するか、CSSスタイルを取得できます。スタイルの追加: addclass()。たとえば、「$("p").addClass("selected");」は、すべての P 要素に「selected」スタイルを追加します。

スタイルの削除:removeClass() --- 一致する要素からすべてまたは指定されたクラスを削除します。たとえば、「$("p").removeClass("selected");」は、すべての P 要素の「selected」を削除します。

スタイルの切り替え: toggleClass() --- スタイルの繰り返しの切り替えを制御します。クラス名が存在する場合は削除し、クラス名が存在しない場合は追加します。たとえば、「$("p").toggleClass("selected");」では、すべての P 要素のうち、「selected」スタイルが存在する場合は「selected」スタイルを削除し、存在しない場合は「selected」スタイルを追加します。

特定のスタイルが含まれているかどうかを判断します: hasClass() --- 要素に特定のクラスが含まれているかどうかを判断し、そうでない場合は false を返します。たとえば、「$(this).hasClass("protected")」は、現在のノードが「protected」スタイルを持つかどうかを決定します。

10. HTML、テキスト、値を設定または取得します

要素内の HTML コンテンツを読み取り、設定します: html()。このメソッドは XHTML には使用できますが、XML ドキュメントには使用できません。

要素内のテキストコンテンツを読み取り、設定します: text() このメソッドは、XHTML ドキュメントと XML ドキュメントの両方に使用できます。

要素の値を読み取り、設定します: val()。このメソッドは JavaScript の value 属性に似ています。テキスト ボックス、

ドロップダウン リスト ボックス

、およびラジオ ボタン ボックスの場合、このメソッドは要素の値を返すことができます (複数のボックス ボックスは最初の値のみを返すことができます)。複数選択のドロップダウン リスト ボックスの場合は、選択されたすべての値を含む配列を返します。常用 11. 一般的に使用されるトラバーサル ノードのメソッド

一致する要素を取得するすべてのサブ要素のコレクション:children()。このメソッドでは、第 1 レベルの子要素のみが考慮され、子孫要素は考慮されません。

一致する要素の直後にある兄弟要素のセットを取得します (ただし、セットには要素が 1 つだけあります): next()。

一致する要素の直前にある兄弟要素のセットを取得します (ただし、セットには要素が 1 つだけあります): prev()。

一致する要素の前後にあるすべての兄弟要素を取得します:兄弟()。 S c12.css-DOM操作 要素の取得と設定の属性をモデル化:CSS()。

要素の透明度を取得および設定します: opacity() 属性。

要素の高さと幅を取得および設定します: height()、width()。値を設定するときに数値のみが渡された場合、デフォルトの単位は px です。他の単位を使用する必要がある場合は、 "$("p:first").height("2em")" などの

string

を渡す必要があります。

現在のウィンドウ内の要素の相対変位を取得します。 : オフセット()。返されるオブジェクトには、top と left という 2 つのプロパティが含まれます。このメソッドは、表示されている要素に対してのみ機能します。

以上がJQuery 基礎コース: JQuery での DOM 操作の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7403

15

Java チュートリアル

1630

14

CakePHP チュートリアル

1358

52

Laravel チュートリアル

1268

25

PHP チュートリアル

1218

29

もっと見る