jQueryのwrapInner()メソッドの使用例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryのwrapInner()メソッドの使用例

巴扎黑

Jun 24, 2017 pm 02:13 PM

api jquery 例方法使用法

この記事では、jQueryのwrapInner()メソッドの使い方を主に紹介し、wrapInner()メソッドの機能と定義、および一致する要素のラッピングの使用スキルを例とともに分析します。 jQueryのwrapInner()メソッドの使用例を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです:

このメソッドは、指定された HTML コンテンツまたは要素を使用して、一致する要素コンテンツをラップします。

構文 1:

指定された DOM 要素を使用して、一致する要素のコンテンツをラップします。

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

$(selector).wrapInner(elem)

パラメータリスト:

パラメータ説明エレム

例:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
   p
   {
      width:200px;
      height:200px;
      border:1px solid blue;
   }
   p
   {
      width:150px;
      height:150px;
      border:1px solid red;
   }
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(
document
).ready(function(){
        $("button").click(function(){
            $("p").wrapInner(document.createElement("p"));
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

ログイン後にコピー

構文 2:

関数を使用して、一致する要素のコンテンツをラップするために使用される要素を返します。

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

$(selector).wrapInner(function)

パラメータリスト:


	ターゲットをラップするために使用される DOM 要素。

パラメータ	説明
機能	一致した要素のコンテンツをラップするために使用される関数を返します。

实例:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
    p
   {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    p
   {
        width:150px;
        height:150px;
        border:1px solid red;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
           $("p").wrapInner(function(){
              return "<p></p>"
           });
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

ログイン後にコピー

语法三:

用html标记代码包裹匹配元素的内容。

代码如下:

$(selector).wrapInner(html)

参数列表:

参数	描述
html	用于包裹匹配元素内容的html标记代码。

实例:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
     p
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    p
   {
        width:150px;
        height:150px;
        border:1px solid red;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").wrapInner("<p></p>");
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

ログイン後にコピー

以上がjQueryのwrapInner()メソッドの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7552

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。 Mar 28, 2024 pm 12:50 PM

トマトノベルは非常に人気のある小説閲覧ソフトウェアです。トマトノベルでは、新しい小説や漫画を読むことができます。どの小説も漫画もとても面白いです。小説を書きたい友達もたくさんいます。お小遣いを稼いで、小説の内容を編集することもできます。「テキストに文章を書きたいです。それで、小説はどうやって書くのですか？友達は知らないので、一緒にこのサイトに行きましょう。小説の書き方の入門を少し見てみましょう。」 Tomato Novels を使用して小説を書く方法に関するチュートリアルを共有します。 1. まず、携帯電話で Tomato Free Novels アプリを開き、パーソナルセンター - ライターセンターをクリックします。 2. Tomato Writer Assistant ページに移動し、次の場所で [新しい本の作成] をクリックします。小説の終わり

Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます Mar 13, 2024 pm 06:01 PM

Colorful マザーボードは中国国内市場で高い人気と市場シェアを誇っていますが、Colorful マザーボードのユーザーの中には、設定のために BIOS を入力する方法がまだ分からない人もいます。この状況に対応して、編集者はカラフルなマザーボード BIOS に入る 2 つの方法を特別に提供しました。ぜひ試してみてください。方法 1: U ディスク起動ショートカットキーを使用して、U ディスクインストールシステムに直接入ります。ワンクリックで U ディスクを起動する Colorful マザーボードのショートカットキーは ESC または F11 です。まず、Black Shark インストールマスターを使用して、Black Shark インストールマスターを作成します。 Shark U ディスク起動ディスクを選択し、コンピュータの電源を入れます。起動画面が表示されたら、キーボードの ESC キーまたは F11 キーを押し続けて、起動項目を順次選択するウィンドウに入ります。「USB」の場所にカーソルを移動します。」と表示され、その後

WeChat で削除された連絡先を回復する方法 (簡単なチュートリアルでは、削除された連絡先を回復する方法について説明します) May 01, 2024 pm 12:01 PM

残念ながら、WeChat は広く使用されているソーシャルソフトウェアであり、何らかの理由で特定の連絡先を誤って削除してしまうことがよくあります。ユーザーがこの問題を解決できるように、この記事では、削除された連絡先を簡単な方法で取得する方法を紹介します。 1. WeChat の連絡先削除メカニズムを理解します。これにより、削除された連絡先を取得できるようになります。WeChat の連絡先削除メカニズムでは、連絡先がアドレス帳から削除されますが、完全には削除されません。 2. WeChat の組み込みの「連絡先帳復元」機能を使用します。WeChat には、この機能を通じて以前に削除した連絡先をすばやく復元できる「連絡先帳復元」機能が用意されています。 3. WeChat 設定ページに入り、右下隅をクリックし、WeChat アプリケーション「Me」を開き、右上隅にある設定アイコンをクリックして設定ページに入ります。

携帯電話の文字サイズの設定方法（携帯電話の文字サイズを簡単に調整できます） May 07, 2024 pm 03:34 PM

携帯電話が人々の日常生活において重要なツールになるにつれて、フォントサイズの設定は重要なパーソナライゼーション要件になりました。さまざまなユーザーのニーズを満たすために、この記事では、簡単な操作で携帯電話の使用体験を向上させ、携帯電話のフォントサイズを調整する方法を紹介します。携帯電話のフォントサイズを調整する必要があるのはなぜですか - フォントサイズを調整すると、テキストがより鮮明で読みやすくなります - さまざまな年齢のユーザーの読書ニーズに適しています - フォントサイズを使用すると、視力の悪いユーザーにとって便利です携帯電話システムの設定機能 - システム設定インターフェイスに入る方法 - 設定インターフェイスで「表示」オプションを見つけて入力します。 - 「フォントサイズ」オプションを見つけて、サードパーティでフォントサイズを調整します。アプリケーション - フォントサイズの調整をサポートするアプリケーションをダウンロードしてインストールします - アプリケーションを開いて、関連する設定インターフェイスに入ります - 個人に応じて

モバイルドラゴンの卵を孵化させる秘密が明らかに（モバイルドラゴンの卵をうまく孵化させる方法を段階的に教えます） May 04, 2024 pm 06:01 PM

テクノロジーの発展に伴い、モバイルゲームは人々の生活に欠かせないものになりました。かわいいドラゴンエッグの画像と面白い孵化過程で多くのプレイヤーの注目を集めており、その中でも注目を集めているゲームの一つがモバイル版ドラゴンエッグです。プレイヤーがゲーム内で自分のドラゴンをより適切に育成し成長させることができるように、この記事ではモバイル版でドラゴンの卵を孵化させる方法を紹介します。 1. 適切な種類のドラゴンエッグを選択するプレイヤーは、ゲーム内で提供されるさまざまな種類のドラゴンエッグの属性と能力に基づいて、自分に適したドラゴンエッグの種類を慎重に選択する必要があります。 2. 孵化機のレベルをアップグレードします。プレイヤーはタスクを完了し、小道具を収集することで孵化機のレベルを向上させる必要があります。孵化機のレベルは孵化速度と孵化成功率を決定します。 3. プレイヤーはゲームに参加する必要がある孵化に必要なリソースを収集します。

すぐにマスター: Huawei 携帯電話で 2 つの WeChat アカウントを開く方法が明らかに! Mar 23, 2024 am 10:42 AM

今日の社会において、携帯電話は私たちの生活に欠かせないものとなっています。私たちの日常のコミュニケーション、仕事、生活のための重要なツールとして、WeChat はよく使用されます。ただし、異なるトランザクションを処理する場合は 2 つの WeChat アカウントを分離する必要がある場合があり、そのためには携帯電話が 2 つの WeChat アカウントへの同時ログインをサポートする必要があります。有名な国内ブランドとして、ファーウェイの携帯電話は多くの人に使用されていますが、ファーウェイの携帯電話で 2 つの WeChat アカウントを開設する方法は何でしょうか?このメソッドの秘密を明らかにしましょう。まず、Huawei 携帯電話で 2 つの WeChat アカウントを同時に使用する必要があります。最も簡単な方法は次のとおりです。

Go言語のメソッドと機能の違いと応用シナリオの分析 Apr 04, 2024 am 09:24 AM

Go 言語のメソッドと関数の違いは、構造との関連付けにあります。メソッドは構造に関連付けられ、構造データまたはメソッドを操作するために使用されます。関数は型に依存せず、一般的な操作を実行するために使用されます。

携帯電話の画面を保護する携帯電話のスクリーンプロテクターの選び方 (携帯電話のスクリーンプロテクターを購入する際のいくつかの重要なポイントとヒント) May 07, 2024 pm 05:55 PM

スマートフォンの普及に伴い、携帯フィルムは欠かせないアクセサリーの一つとなりました。耐用年数を延ばすには、携帯電話の画面を保護する適切な携帯電話フィルムを選択してください。この記事では、読者が自分に最適な携帯電話フィルムを選択できるように、携帯電話フィルムを購入する際のいくつかのポイントとテクニックを紹介します。携帯電話フィルムの素材と種類を理解する：PET フィルム、TPU など。携帯電話フィルムは強化ガラスを含むさまざまな素材でできています。 PETフィルムは比較的柔らかく、強化ガラスフィルムは耐傷性に優れ、TPUは耐衝撃性能に優れています。選択する際は、個人の好みやニーズに基づいて決定できます。画面の保護の程度を考慮してください。携帯電話のフィルムの種類によって、画面の保護の程度も異なります。 PETフィルムは主に傷防止の役割を果たしますが、強化ガラスフィルムは落下耐性に優れています。より良いものを選ぶことができます

See all articles

jQueryのwrapInner()メソッドの使用例

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック