前端提高篇(八十四)：文本属性：text()、html()、val()

1.text()

对应js中的innerText属性，jQuery中的text也可读可写
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元素，直接在text里传字符串，就是替换的效果：

$('#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 text里如果传的是函数，函数可以执行一些操作，然后return回来一个字符串，相当于把这个字符串写在text函数里，将dom元素的文本替换成这个字符串

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

效果：点击btn按钮，#test里的文本变成"asdfqwer"

1.2.4 传进rext的函数有两个参数：索引和对应dom元素，可以用于遍历，或根据索引做一些判断操作

<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下的文本，包括换行

根据index做一些判断，修改对应index的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标签，输入的字符串严格地被当作标签内容处理
text()处理带html标签的文本：

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

效果：

换成html()：

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

加粗效果就出来了

2.2 同text()一样，html()可以传入字符串或函数，函数也有两个参数：索引和对应dom元素

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()获取：三个div文本都获取了

2.5 html()给元素赋值时，还是全部赋值的

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

效果：点击按钮，所有div的文本内容都改为’11111’

2.6 html()与text()区别：

1. 关于赋值取值影响范围
   html()赋值赋全部，取值取第一个；
   text()赋值赋全部，取值也取全部；

2. 关于传入文本是否识别html标签
   html()传入字符串可识别html标签
   text()传入字符串不识别html标签，将标签当成文本内容

3. 关于读取文本是否带子标签名
   html()获取内容，包含子标签名
   text()只获取标签内的内容，不包含子标签名

3.val()

对应js中的value属性
跟上面的text()和html()一样，也可以传入函数，函数有索引和dom元素两个参数
3.1 val()可以读取表单的value值

<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按钮，获取到input的值

3.2 多个元素取值，也只取第一个元素的value

<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 多个元素设置value，都能被设置上：

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

效果：value都被改成了"hello"

3.4 val()可传入数组，指定被选中的元素
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>

效果：一开始被选中的是香蕉，因为有selected属性，点击按钮之后，被选中的是value为’peach’对应的选项：桃子

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>

效果：一开始被选中的是香蕉，因为有selected属性，点击按钮之后，被选中的是苹果和桃子

这个用得相对少一些