ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryのhtmlメソッドで実装される関数は何ですか

jqueryのhtmlメソッドで実装される関数は何ですか

WBOY
WBOYオリジナル
2022-05-10 11:44:282659ブラウズ

関数: 1. 要素のコンテンツを返します。構文は「element object.html()」です。 2. 要素のコンテンツを設定します。構文は「element object.html(element's new content)」です。 3 . 関数を使用して要素の内容を設定します。構文は「element object.html(function(セレクターのインデックス位置, セレクターの現在の内容))」です。

jqueryのhtmlメソッドで実装される関数は何ですか

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery の html メソッドによって実装される関数

1. 要素の内容を返す

このメソッドを使用して値を返す場合、一致する要素のコンテンツを返します。

構文

$(selector).html()

例は次のとおりです:

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("p").html());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
</body>

出力結果:

jqueryのhtmlメソッドで実装される関数は何ですか

ボタンをクリックした後:

jqueryのhtmlメソッドで実装される関数は何ですか

##2. 要素の内容を設定する

このメソッドを使用して値を設定すると、一致するすべての要素の内容が上書きされます。要素。

構文

$(selector).html(content)

content オプション。選択した要素の新しいコンテンツを指定します。このパラメータには HTML タグを含めることができます。

例は次のとおりです。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").html("Hello <b>world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
</body>

出力結果:

jqueryのhtmlメソッドで実装される関数は何ですか

ボタンをクリックした後:

jqueryのhtmlメソッドで実装される関数は何ですか

3. 関数を使用して要素のコンテンツを設定する

関数を使用して、一致するすべての要素のコンテンツを設定します。

構文

$(selector).html(function(index,oldcontent))

パラメータの説明

function(index,oldcontent)

選択した要素の新しいコンテンツを返す関数を指定します。

index - オプション。セレクターのインデックス位置を受け取ります。

oldcontent - オプション。セレクターの現在の内容を受け取ります。

例は次のとおりです。

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html(function(n){
    return "这个 p 元素的 index 是:" + n;
    });
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>改变 p 元素的内容</button>
</body>

出力結果:

jqueryのhtmlメソッドで実装される関数は何ですか

ボタンをクリックした後:

jqueryのhtmlメソッドで実装される関数は何ですか

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上がjqueryのhtmlメソッドで実装される関数は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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