ホームページ > 記事 > ウェブフロントエンド > JQuery 基礎コース: JQuery での DOM 操作の概要
JQuery 基礎コース: JQuery での DOM 操作の概要
- 伊谢尔伦オリジナル
- 2017-06-17 15:50:04981ブラウズ
ブラウザ、プラットフォーム、言語に依存しないインターフェース。このインターフェイスにより、ページ内のすべての標準コンポーネントに簡単にアクセスできます。
DOM コア: DOM コアは JavaScript 専用ではなく、DOM をサポートするあらゆるプログラミング言語で使用できます。その使用は Web ページの処理に限定されず、XML などのマークアップ言語で記述されたあらゆるドキュメントの処理にも使用できます。
HTML DOM: JavaScript と DOM を使用して HTML ファイルをスクリプト化する場合、HTML-DOM に固有のプロパティが多数あります。
CSS-DOM: CSS 操作の場合、JavaScript では、CSS-DOM は主にスタイル オブジェクトのさまざまな属性を取得および設定するために使用されます。
「
」の助けを借りて 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 サイトの他の関連記事を参照してください。