jqueryラッピングノードメソッド-フロントエンドQ&A-php.cn

jqueryラッピングノードメソッド

王林

リリース： 2023-05-23 20:45:07

オリジナル

711 人が閲覧しました

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 サイトの他の関連記事を参照してください。