フロントエンドの改善記事（84）：テキスト属性：text（）、html（）、val（）

1.text（）

jsのinnerText属性に対応して、jQueryのテキストも読み取りおよび書き込み可能です。1.1読み取り
可能：

<div id="test">hello</div>
<button id="btn">btn</button>

$('#btn').click(function(){
    
    
    console.log ( $('#test').text());
})

効果：btnボタンをクリックすると、コンソールは#testのテキストを出力します

1.2書き込み可能：
1.2.1 dom要素を取得し、文字列をテキストに直接渡すと、次のように置き換えられます。

$('#btn').click(function(){
    
    
    $('#test').text('巴拉巴拉这是一段新内容')
})

効果：
ここに画像の説明を挿入
1.2.2ボタンをクリックして、コンテンツを置き換えるのではなく、追加のコンテンツを表示します。

<div id="test">
    hello
    <p id="content"></p>
</div>
<button id="btn">btn</button>

//点击按钮添加文字
$('#btn').click(function(){
    
    
    $('#content').text('巴拉巴拉这是一段内容')
})

効果：btnボタンをクリックして、pタグにテキストを追加します（css：divは背景色と幅を追加します）
ここに画像の説明を挿入

文字列をつなぎ合わせても同じ効果が得られますが、テキストを置き換えるのではなく追加するため、クリック後に表示されるテキストがラベルに保存されるため、より便利で構造が明確になります。

1.2.3関数がテキストで渡される場合、関数はいくつかの操作を実行してから文字列を返すことができます。これは、この文字列をテキスト関数に書き込み、dom要素のテキストをこの文字列に置き換えるのと同じです。

$('#btn').click(function(){
    
    
    $('#test').text(function(){
    
    
        return 'asdf'+'qwer';
    })
})

効果：btnボタンをクリックすると、＃testのテキストは「asdfqwer」になります

1.2.4 rextに渡される関数には、インデックスと対応するdom要素の2つのパラメーターがあります。これらのパラメーターを使用して、インデックスをトラバースしたり、インデックスに基づいていくつかの判断操作を実行したりできます。

<div id="test">
    hello
</div>
<div id="test2">hello2</div>
<button id="btn">btn</button>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    $('#btn').click(function(){
     
     
        $('div').text(function(index, ele){
     
     
            console.log(ele);//遍历
        })
    })
</script>

効果：ボタンをクリックした後、
ここに画像の説明を挿入
改行を含む各divの下のテキストを出力します。インデックスに基づいていくつかの判断を行い、インデックスに対応するdom要素のコンテンツを変更します。

<div id="test">
    hello
</div>
<div id="test2">hello2</div>
<div>hello3</div>
<div>hello4</div>
<button id="btn">btn</button>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    $('#btn').click(function(){
     
     
        $('div').text(function(index, ele){
     
     
            if (index % 2 == 0){
     
     
                return 'aaa';
            }else {
     
     
                return 'bbb';
            }
        })//根据索引进行判断
    })//点击按钮，第一个和第三个文本变成'aaa'，第二个和第四个文本内容变成'bbb'
</script>

2.html（）

2.1 jsのinnerHTML属性に対応して、jQueryのhtml（）はhtmlタグを認識できます
。innerText属性はhtmlタグを認識しないことに対応し、text（）もhtmlタグを認識できません。入力文字列は、タグ
テキストのコンテンツとして厳密に扱われます。（）htmlタグ付きのテキストの処理：

$('#btn').click(function(){
    
    
    $('#test').text('我是一名<b>程序员</b>')
})

効果：
ここに画像の説明を挿入
html（）への変更：

$('#btn').click(function(){
    
    
    $('#test').html('我是一名<b>程序员</b>')
})

太字の効果が出
ここに画像の説明を挿入
ます2.2text （）と同様に、html（）には文字列または関数を渡すことができ、関数にはインデックスと対応するdom要素の2つのパラメーターもあります。

2.3ただし、html（）がテキストを読み取る場合、要素にサブhtmlタグが含まれていると、サブタグ名も読み取られます（text（）はサブタグの下のコンテンツのみを読み取り、html（）はすべてを読み取ります）

<div id="test">
    hello
    <p>ppppp</p>
</div>

html（）を使用してテキストを取得します。

$('#btn').click(function(){
    
    
    console.log ( $('#test').html() );
})

効果：
ここに画像の説明を挿入
text（）を使用してテキストを取得します。

$('#btn').click(function(){
    
    
    console.log ( $('#test').text() );
})

効果：
ここに画像の説明を挿入

2.4 html（）が複数の要素を取得する場合、最初の要素のみを取得し、後者は取得しなくなります

<div id="test">hello</div>
<div id="test2">hello2</div>
<div id="test3">hello3</div>
<button id="btn">btn</button>

html（）で取得：

$('#btn').click(function(){
    
    
    console.log ( $('div').html() );
})

効果：最初のdivのテキストのみを取得します
ここに画像の説明を挿入
。text（）で取得します。3つのdivすべてが

2.5を取得します。html （）が要素に値を割り当てる場合、すべての値が引き続き割り当てられます。

$('#btn').click(function(){
    
    
    console.log ( $('div').text('11111') );
})

効果：ボタンをクリックすると、すべてのdivのテキストコンテンツが「11111」に変更されます。2.6html
ここに画像の説明を挿入
（）とtext（）の違い：

割り当て値の影響範囲に関しては、
html（）がすべての値を割り当て、最初の値が選択されます
。text（）がすべての値を割り当て、値もすべてを取ります。
着信テキストがhtmlタグを認識するかどうかについて
html（）着信文字列はhtmlタグを認識でき
ますtext（）着信文字列はhtmlタグを認識せず、タグはテキストコンテンツと見なされます
サブタグ名html（）のテキストを読んで、サブタグ名を含むコンテンツを取得するかどうかについて
text（）は、サブタグ名を含まず、タグ内のコンテンツのみを取得します。

3.val（）

jsのvalue属性に対応します。
上記のtext（）やhtml（）と同様に、関数を渡すこともできます。関数には、index要素とdom要素の2つのパラメーターがあります
。3.1val（）はフォームの値を読み取ることができます。

<input type="text" value="yorName">
<button id="btn">btn</button>

<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    $('#btn').click(function(){
     
     
        console.log ( $('input').val() );
    })
 </script>

効果：btnボタンをクリックして、入力の値を取得します。3.2
ここに画像の説明を挿入
複数の要素の値、および最初の要素の値のみ

<input type="text" value="yorName">
<input type="text2" value="yorName">
<button id="btn">btn</button>

<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    $('#btn').click(function(){
     
     
        console.log ( $('input').val() );
    })
 </script>
 <!-- 输出结果还是：yourName -->

3.3複数要素の設定値を設定できます。

 $('#btn').click(function(){
    
    
     console.log ( $('input').val('hello') );
 })

効果：値が「hello」に変更されます
ここに画像の説明を挿入
。3.4val（）を配列に渡すことができ、選択された要素が指定されます
。3.4.1単一選択の場合：

喜欢吃的水果？
<select name="list" id="">
    <option value="apple">苹果</option>
    <option value="banana" selected>香蕉</option>
    <option value="peach">桃子</option>
</select>


<button id="btn">btn</button>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    $('#btn').click(function(){
     
     
        $('select').val(['peach']);
    })
</script>

効果：選択された属性があるため、最初はバナナが選択されました。ボタンをクリックした後、選択されたオプションは、値が「ピーチ」であるオプションです：ピーチ
ここに画像の説明を挿入

3.4.2複数選択の場合：

最喜欢吃的水果？
<select multiple='multiple' id="">
    <option value="apple">苹果</option>
    <option value="banana" selected>香蕉</option>
    <option value="peach">桃子</option>
</select>


<button id="btn">btn</button>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    $('#btn').click(function(){
     
     
        $('select').val(['apple', 'peach']);
    })
</script>

効果：最初は属性が選択されていたためバナナが選択されました。ボタンをクリックした後、リンゴと桃が選択されました。
ここに画像の説明を挿入
これは比較的使用されていません。