ホームページ > 記事 > ウェブフロントエンド > jqueryラッピングノードメソッド
jqueryラッピングノードメソッド
- 王林オリジナル
- 2023-05-23 20:45:07649ブラウズ
jQuery は、DOM を操作するためのシンプルかつ強力な方法を提供する人気のある JavaScript ライブラリです。 jQueryには、対象要素を新しい親要素でラップするラップノードメソッドという機能があります。
ラッピング ノード メソッドの構文は次のとおりです:
$(selector).wrap(wrappingElement);
このうち、パラメーター セレクターは要素を選択するために使用される標準の CSS セレクターで、ラップするターゲット要素を示します。 WrappingElement は、ターゲット要素をラップするために使用される新しい親要素を表す文字列、関数、または jQuery オブジェクトのいずれかであるパラメーターです。
このメソッドを実行すると、ターゲット要素が新しい親要素でラップされます。パラメータ WrappingElement が関数の場合、ラップされる新しい親要素を返す必要があります。
以下は実際的な例で、p 要素を div 要素でラップします:
<!DOCTYPE html>
<html>
<head>
<title>jQuery包裹节点方法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落</p>
<script>
$( "p" ).wrap( "<div></div>" );
</script>
</body>
</html>この例では、p 要素を選択し、それを新しい div 要素の a でラップします。上記のコードを実行し、ブラウザで HTML コードを表示すると、p 要素が div 要素でラップされていることがわかります。
wrap メソッドに加えて、jQuery は他のいくつかの関連メソッドも提供します:
1. WrapAll メソッド
このメソッドは、要素を 1 つの親要素の中央でラップします。
構文は次のとおりです。
$(selector).wrapAll(wrappingElement);
パラメータは、wrap メソッドと同じであり、wrapingElement はラップされる親要素を表します。
2. WrapInner メソッド
このメソッドは、選択した要素のコンテンツを新しい要素でラップします。
構文は次のとおりです。
$(selector).wrapInner(wrappingElement);
パラメータ WrappingElement は、作成されるラッピング要素を表します。
3. unwrap メソッド
このメソッドは、選択した要素の親要素を削除して、ドキュメント内の選択した要素の実際の位置を表示するために使用されます。
構文は次のとおりです:
$(selector).unwrap();
例:
<!DOCTYPE html>
<html>
<head>
<title>jQuery包裹节点方法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<p>这是一个段落</p>
</div>
<script>
$( "p" ).unwrap();
</script>
</body>
</html>この例では、p 要素を含む div 要素を選択し、p 要素で unwrap メソッドを実行します。 。コードを実行すると、もともと p 要素を含んでいた div 要素だけが HTML ドキュメントに残ります。
ラップされたノード メソッドは、jQuery の非常に便利なメソッドです。これを使用すると、要素を新しい親要素に簡単に配置して、再利用可能な HTML モジュールを作成できます。ラップメソッドを使用すると、コードの可読性と保守性が大幅に向上し、HTML ドキュメントがすっきりして理解しやすくなります。
以上がjqueryラッピングノードメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。