章节
问答
课签
笔记
评论
占位
占位

jQuery的属性与样式之html()及.text()

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作,jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

.html()方法 

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法:

  1. .html() 不传入值,就是获取集合中第一个匹配元素的HTML内容
  2. .html( htmlString )  设置每一个匹配元素的html内容
  3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

注意事项:

.html()方法内部使用的是DOM的innerHTML属性来处理的,所以在设置与获取上需要注意的一个最重要的问题这个操作是针对整个HTML内容(不仅仅只是文本内容)

.text()方法

得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。,具体有3种用法:

  1. .text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代
  2. .text( textString ) 用于设置匹配元素内容的文本
  3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

注意事项:

.text()结果返回一个字符串,包含所有匹配元素的合并文本

.html与.text的异同:

  1. .html与.text的方法操作是一样,只是在具体针对处理对象不同
  2. .html处理的是元素内容,.text处理的是文本内容
  3. .html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用
  4. 如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的
  5. 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器

任务

在代码编辑器中第37行填写相应代码

text

在代码编辑器中第44行填写相应代码

text

在代码编辑器中第50行填写相应代码

text

在代码编辑器中第56行填写相应代码

html

在代码编辑器中第62填写相应代码

text
?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
.left {
width:
       auto;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / 又是爱学习的一天
1、这个div的class名有两个 一个是left 一个是first-div。2、第一个p显示的文本内容是class名为first-div里面的代码  这里面的.first-div指命名为first-div的class。3、这段代码的意思是 将class名为left里面的第一个a里面的文本替换成“替换第一个a元素的内容” 这里的.left也是指命名为.left的class。

最新回答 / Gobbb
举例:<...code...>

最赞回答 / keydew
你如果是按照题目顺序来测试代码得到这个结果的话,那就是正常的。因为倒数第二个操作“通过.html()方法替换html结构”把第一个div里的html内容全部替换成了文本,所以第一个div里已经没有a元素了,所以第二个div里的第一个a元素变成了全文档的第一个a元素,在最后一个操作里选择器.left a:first找到的a元素就是第二个div里的a元素

最新回答 / 二大白
在 h4下面的第一个p标签里面放通过html()获取到的的内容

最新回答 / 知足869
个人理解...............................<h3>.html()与.text()</h3>    <div class="left first-div">        <div class="div">            整个div的子节点都被替换了        </div>          <div class="div">            <a>:first-child<...

最赞回答 / qq_往事如风_17
$('.left')和$('.first-div')在代码里面都是选择同一个元素,作为选择器来说都是通过class选择器来选中元素,而这两个class都是同一个元素的class值,就当前页面元素来看是同一个对象。如果页面中还有其他的元素也用到了这两个class,那么会选择不同的对象,这是需要注意的。

最新回答 / 回头看我漂亮的坚持
上楼说的不对。这个地方给第一个p标签添加内容,作为p标签的惟一的一个子节点或者说内容,这个地方用.text()和.html()两个方法都是可以的。如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的。

最新回答 / 主宰灵魂
jQuery 文档操作 - text() 方法语法$(selector).text(textString)定义和用法设置或返回被选元素的文本内容参数与返回值说明:.text()结果返回一个字符串,1,如果省略参数,返回值是一个字符串,字符串的内容是...

已采纳回答 / _Rainy
你alert()一下就知道了。没有这个函数是直接把原来的text替换成新的,有了这个函数你可以选择是否保留原text,如果你后面 return '增加新的文本内容' + text  这个text肯定是$(".left a:first")这个是里面原本存在的text啊

已采纳回答 / 高杨_
这段代码没显示。被后边
<script type="text/javascript">
    //通过.html()方法替换html结构
    $(".left div:first").html('整个div的子节点都被替换了');
这段代码给覆盖了。

最赞回答 / qq_琥珀的眼泪_0
a:first确实是代表第一个a,你的误区是三个a都显示再一个div中,你把它们统一看成了第一个a的值,建议你给第一个加一个背景,这样不管内容怎么变你就知道哪个才是第一个a的值:&ld&h3&/a&.html()...

最赞回答 / 可见光65
这行是用 html()  不是 text()         html()会解析包含的标签

最赞回答 / qq_乖丫头_0
第一个获得的确实是HTML内容呀,,看他都是有样式的对吧,对比第二个text直接 就是文本
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言