JQuery中的html() text() val()区别

1.HTML

html() 取得第一个匹配元素的html内容(标签+内容)。
html(val) 设置每一个匹配元素的html内容,就是将上一步取得的内容全部替换成括号中val。
注:html()方法可以用于XHTML文档,但不能用于XML文档!
** html()方法使用在多个元素上时,只读取第一个元素。 **
demo如下:
html页面代码

<div id="textDiv1">
    <span class="textSpan">我是第一个span</span>
    <span class="textSpan">我是第二个span</span>
    <span class="textSpan">我是第三个span</span>
</div>

执行jQuery代码

alert($("#textDiv1").html());

得到:


弹框内容

如果执行

alert($(".textSpan").html());

得到

弹框内容

可见,html()方法使用在多个元素上时,只读取第一个元素。

2.TEXT

text()取得所有匹配元素的内容(仅包括文本,没有标签)。
text(val)设置所有匹配元素的文本内容。
** text()用来读取元素的纯文本内容,包括其后代元素,text()方法不能使用在表单元素上。 **
demo如下
html页面代码

<div id="textDiv1">
    <span class="textSpan">我是第一个span</span>
    <span class="textSpan">我是第二个span</span>
    <span class="textSpan">我是第三个span</span>
</div>

执行jQuery代码

alert($("#textDiv1").text());

得到


弹框内容

如果执行

alert($(".textSpan").text());

得到

弹框内容

可见,text()是可以作用所有匹配的元素的,但是注意取#textDiv1和取textSpan,结果的显示形式还是有区别的。

3.VAL

val()val()常用来操作标准的表单组件对象,如button,text,hidden
val(val)设置每一个匹配元素的值。
demo如下
html代码

<select id="selectVal">
    <option value="1" selected="selected">1</option>
    <option value="2" >2</option>
</select>

执行jQuery代码

alert($("#selectVal").val()); //取得值为:1 

4.text(val)和html(val)的对比

html页面代码:

<div></div>

jquery代码:

$("div").html("<b>Nice to meet you</b>");
//$("div").text("<b>Nice to meet you</b>");

区别立下:

html()结果
text()结果

如有不妥,还请斧正!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 结构: 前端之路贵在坚持 1.HTML:用为读取和修改元素的HTML标签 console.log($(".box"...
    西瓜炒苦瓜阅读 221评论 0 0
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,670评论 0 44
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 722评论 0 3
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,774评论 0 11
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,167评论 0 8

友情链接更多精彩内容