ホームページ > 記事 > ウェブフロントエンド > jqueryのtext()、val()、html()の違いは何ですか

jqueryのtext()、val()、html()の違いは何ですか

青灯夜游オリジナル: 2021-01-19 12:13:343047ブラウズ

jquery の text()、val()、html() の違い: text() は html 要素のテキストコンテンツにアクセスするために使用されますが、html() はテキストコンテンツにアクセスするためだけに使用できるわけではありませんHTML 要素のコンテンツへのアクセスにも使用できます。val() は入力要素のコンテンツへのアクセスにのみ使用されます。

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

共通点: text()、html()、および val() は、html 要素の値の保存と取得に使用されます。

違い:

text() は、HTML 要素のテキストコンテンツにアクセスするために使用されます。
html() は、HTML 要素のテキストコンテンツにアクセスするためにのみ使用できるわけではありません。 HTML 要素。HTML コンテンツへのアクセスにも使用できます。
val() は入力要素コンテンツへのアクセスに使用されます

#text() の定義と使用法

text() メソッドメソッドは、選択された要素のテキストコンテンツを設定または返します。サブタグがある場合は、サブタグ内のテキストが一緒に返されます。

コードは次のとおりです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/jquery-1.12.4.js"></script>
    <title>Document</title>
</head>
<body>
    <p id="p1">p有文本内容</p>
    <p id="p2">
        p2内的文本
        <span>span内有文本内容</span>
    </p>
    <input type="text" id="input1" value="这是一个input标签">
    <input type="text" name="" id="input2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
   
 <script>
        console.log($("#p1").text());
        console.log($("#p2").text());
        console.log($("#p2 span").text()) ;
        console.log($("#input1").text());
        console.log($("#input2").text());
        console.log($("#button1").text());
 </script>

</body>
</html>

コンソールの出力結果

それが確認できます。 text() はラベル内のテキストコンテンツのみを出力し、js innerText メソッドは

html() の定義と使用法と同じです

html() メソッドは、タグを含む、選択された要素 (内部 HTML) のコンテンツを返すか設定します。サブタグがある場合は、サブタグ自体とサブタグ内のテキストを返す

jsのinnerHTMLに相当

メソッドが設定されていない場合パラメータを指定すると、選択した要素の現在のコンテンツが返されます。

<body>
    <p id="p1">p有文本内容</p>
    <p id="p2">
        p2内的文本
        <span>span内有文本内容</span>
    </p>
    <input type="text" id="input1" value="这是一个input标签">
    <input type="text" name="" id="input2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
    <script>
        console.log($("#p1").html());
        console.log($("#p2").html());
        console.log($("#p2 span").html());
        console.log($("#input1").html());
        console.log($("#input2").html());
        console.log($("#button1").html());
    </script>
</body>

コンソールからの出力結果

現在のタグのテキスト内容を出力します。サブタグがある場合は、サブタグを結合します。タグ自体とテキストを一緒に印刷します。

これは js の innerHTML に似ています。

text() と html() の使用に関する注意事項:

上記の 2 つの例を通じて、ドキュメントオブジェクト (dom) に存在する要素 (p など) は、text() および html() を通じてそのテキスト値を取得できることがわかります。 (dom) ですが、テキスト値を取得するために text( ) と html() を渡します。どうなるでしょうか?

h1 要素は dom に存在しません。次のコードを追加します。

console.log($(&#39;h1&#39;)) 
console.log($(&#39;h1&#39;).text()) //空字符串
console.log($(&#39;h1&#39;).html()) //undefined

以下は出力結果です。 $('h1').text() は空の文字列を出力します。 $('h1' ),html() print unknown

#val() の定義と使用法 #val() メソッド選択した要素の値を返すか、設定します。

要素の値は、value 属性を通じて設定されます。このメソッドは主に入力要素に使用されます。

このメソッドは主にフォーム要素の値を取得するために使用されます。

このメソッドがパラメータを設定しない場合は、選択された要素の現在の値を返します。

<body>
    <p id="p1">p有文本内容</p>
    <p id="p2">
        p2内的文本
        <span>span内有文本内容</span>
    </p>
    <input type="text" id="input1" value="这是一个input标签1">
    <input type="text" name="" id="input2" value="这是一个input标签2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
    <script>
        console.log($("#p1").val());
        console.log($("#p2").val());
        console.log($("#p2 span").val());
        console.log($("#input1").val());
        console.log($("#input2").val());
        console.log($("#button1").val());
    </script>
</body>

コンソールを介した結果の出力

val() は、フォームにデータを出力するために使用されます。 p タグと spam タグは同じではありません。出力されませんでした。また、H5 の新しいタグのプレースホルダー

もテストしましたが、これも出力されませんでした。そのため、この val は、タグ

の value 属性のみに使用する必要があります。

それでは、val() の値を設定するとどうなるでしょうか

スクリプトタグに 3 行のコードを追加し、2 つの入力ボックスと 1 つのボタンの値を設定します

	$(&#39;#input1&#39;).val(&#39;123&#39;);
	$(&#39;#input2&#39;).val(&#39;123&#39;);
	$(&#39;#button1&#39;).val(&#39;123&#39;);

ブラウザによって表示される効果と HTML 構造を見てみましょう:

入力ボックスの場合、val() で設定された値がテキストボックスに表示されます。ボタン自体の値は変更されていません。ボタンの場合、val() で設定された値は実際にはテキストボックス内にあります。value 属性への値の割り当て

プログラミング関連の知識の詳細については、次を参照してください。

プログラミング入門

! ！

以上がjqueryのtext()、val()、html()の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery html 字符串 JS console 对象 dom innerHTML input

声明：

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

前の記事：IEはjQueryをサポートしていますか?次の記事：IEはjQueryをサポートしていますか?

続きを見る