ホームページ > 記事 > ウェブフロントエンド > jqueryのhtmlメソッドで実装される関数は何ですか
関数: 1. 要素のコンテンツを返します。構文は「element object.html()」です。 2. 要素のコンテンツを設定します。構文は「element object.html(element's new content)」です。 3 . 関数を使用して要素の内容を設定します。構文は「element object.html(function(セレクターのインデックス位置, セレクターの現在の内容))」です。
このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
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>
出力結果:
ボタンをクリックした後:
##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>
出力結果:
ボタンをクリックした後:
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 ビデオ チュートリアル
以上がjqueryのhtmlメソッドで実装される関数は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。