JQueryのtext()、html()、val()の違いは何ですか?-jsチュートリアル-php.cn

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

不言

リリース： 2019-03-30 09:21:22

転載

2310 人が閲覧しました

この記事では、JQuery の text()、html()、val() の違いについて説明します。一定の参考値があるので、困っている友人は参考にしていただければ幸いです。

定義と使用法

text() メソッドは、選択した要素のテキストコンテンツを設定または返します。

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

nbsp;html>


<meta>
<meta>
<meta>
<script></script>
<title>Document</title>


<div>div有文本内容</div>
<div>
    div2内的文本
    <span>span内有文本内容</span>
</div>
<input>
<input>
<button></button>
<script>
    console.log($("#div1").text());
    console.log($("#div2").text());
    console.log($("#div2 span").text()) ;
    console.log($("#input1").text());
    console.log($("#input2").text());
    console.log($("#button1").text());
</script>

ログイン後にコピー

console print Results

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

text() はラベル内のテキストコンテンツのみを出力することがわかります。これは、js

# の innerText メソッドと同じです。 ##定義と使用法

html( ) メソッドは、タグを含む、選択された要素のコンテンツ (内部 HTML) を返すか設定します。

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

<div>div有文本内容</div>
<div>
    div2内的文本
    <span>span内有文本内容</span>
</div>
<input>
<input>
<button></button>
<script>
    console.log($("#div1").html());
    console.log($("#div2").html());
    console.log($("#div2 span").html());
    console.log($("#input1").html());
    console.log($("#input2").html());
    console.log($("#button1").html());
</script>

ログイン後にコピー

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

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

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

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

定義と使用法

val() メソッドは、選択された要素の値を返すか、設定します。

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

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

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

<div>div有文本内容</div>
<div>
    div2内的文本
    <span>span内有文本内容</span>
</div>
<input>
<input>
<button></button>
<script>
    console.log($("#div1").val());
    console.log($("#div2").val());
    console.log($("#div2 span").val());
    console.log($("#input1").val());
    console.log($("#input2").val());
    console.log($("#button1").val());
</script>

ログイン後にコピー

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

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