Front-end improvement articles (84): Text attributes: text(), html(), val()

1.text()

Corresponding to the innerText attribute in js, the text in jQuery is also readable and writable.
1.1 Readable:

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

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

Effect: Click the btn button, the console will output the text of #test

1.2 Writable:
1.2.1 If you get the dom element and pass the string directly in the text, it is the effect of replacement:

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

Effect:

1.2.2 Click the button to display an extra piece of content instead of replacing it:

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

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

Effect: Click the btn button to add text to the p tag (css: div adds background color and width)

The same effect can be achieved by splicing strings, but since it is adding text, not replacing, the text displayed after clicking is stored in a label, which is more convenient and the structure is clearer.

1.2.3 If a function is passed in text, the function can perform some operations, and then return a string, which is equivalent to writing this string in the text function and replacing the text of the dom element with this string

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

Effect: Click the btn button, the text in #test becomes "asdfqwer"

1.2.4 The function passed into rext has two parameters: the index and the corresponding dom element, which can be used to traverse or do some judgment operations based on the index

<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>

Effect: After clicking the button, output the text under each div, including line

breaks. Make some judgments based on the index and modify the content of the dom element corresponding to the index:

<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 Corresponding to the innerHTML attribute in js, html() in jQuery can recognize html tags;
innerText attribute corresponds to not recognizing html tags, text() also cannot recognize html tags, the input string is strictly treated as the content of the tag
text( ) Processing text with html tags:

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

Effect:

Change to html():

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

The bolding effect comes out

2.2 Like text(), html() can be passed a string or function, and the function also has two parameters: index and corresponding dom element

2.3 But when html() reads the text, if the element contains a sub-html tag, the sub-tag name will also be read (text() only reads the content under the sub-tag, html() reads all)

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

Use html() to get the text:

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

Effect:

Use text() to get the text:

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

effect:

2.4 When html() gets more than one element, only get the first one, and no longer get the latter

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

Get with html():

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

Effect: Only get the text

in the first div. Get it with text(): all three divs get

2.5. When html() assigns values ​​to the elements, all the values ​​are still assigned

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

Effect: Click the button, the text content of all divs are changed to '11111'

2.6 Difference between html() and text():

1. Regarding the influence range of the assignment value,
   html() assigns all values, and the first value is selected;
   text() assigns all values, and the value also takes all;

2. Regarding whether the incoming text recognizes the html tag
   html() the incoming string can recognize the html tag
   text() the incoming string does not recognize the html tag, and the tag is regarded as text content

3. Regarding whether to read the text
   with the sub- tag name html() to get the content, including the sub-tag name
   text() only get the content in the tag, not including the sub-tag name

3.val()

Corresponding to the value attribute in js.
Like the text() and html() above, you can also pass in a function. The function has two parameters: index and dom element.
3.1 val() can read the value of the form

<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>

Effect: Click the btn button to get the value of input.

3.2 Multiple element values, and only the value of the first element

<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 Setting value of multiple elements can be set:

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

Effect: The value is changed to "hello"

3.4 val() can be passed into the array, and the selected element is specified
3.4.1 When single selection:

喜欢吃的水果？
<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>

Effect: At first the banana was selected because it has the selected attribute. After clicking the button, the selected option is the option whose value is'peach': peach

3.4.2 When multiple selections:

最喜欢吃的水果？
<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>

Effect: At first the banana was selected because of the selected attribute. After clicking the button, the apples and peaches were selected.

This is relatively less used