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

效果：点击按钮之后，输出每一个div下的文本，包括换行

根据index做一些判断，修改对应index的dom元素内容：

hello

hello2

hello3

hello4

btn

2.html()

---

2.1 对应js中的innerHTML属性，jQuery中的html()可以识别html标签；

innerText属性对应不能识别html标签，text()也不能识别html标签，输入的字符串严格地被当作标签内容处理

text()处理带html标签的文本：

$(‘#btn’).click(function(){

$(‘#test’).text(‘我是一名程序员’)

})

效果：

换成html()：

$(‘#btn’).click(function(){

$(‘#test’).html(‘我是一名程序员’)

})

加粗效果就出来了

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

2.3 但html()读取文本时，如果该元素下又包含了一个子html标签，这个子标签名也是会被读取的（text()只读取子标签下的内容，html()读取所有）

hello

ppppp

用html()获取文本：

$(‘#btn’).click(function(){

console.log ( $(‘#test’).html() );

})

效果：

用text()获取文本：

$(‘#btn’).click(function(){

console.log ( $(‘#test’).text() );

})

效果：

2.4 当html()获取元素不止一个时，只获取第一个，后面的不再获取

hello

hello2

hello3

btn

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

btn

效果：点击一下btn按钮，获取到input的值

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

btn

3.3 多个元素设置value，都能被设置上：

$(‘#btn’).click(function(){

console.log ( $(‘input’).val(‘hello’) );

})

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

3.4 val()可传入数组，指定被选中的元素

3.4.1 单选时：

喜欢吃的水果？

苹果 香蕉 桃子

btn

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-vlYKDMi8-1715101930058)]

[外链图片转存中…(img-lq7rkBlP-1715101930058)]

[外链图片转存中…(img-xRGtKXCs-1715101930058)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！