jquery中，html、val与text三者属…

电玩女神 2024-01-30 00:38 59阅读 0赞

首先，html属性中有两个方法，一个有参，一个无参

1. 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String

例子：

html页面代码：

Hello

jquery代码：$("div").html();

结果：Hello

2.有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象

html页面代码：

jquery代码：$("div").html("

Nice to meet you

");

结果：\[

Nice to meet you

\]

其次，text属性中有两个方法，一个有参，一个无参

1. 无参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String

例子：

html页面代码：

**Hello** fine

Thank you!

jquery代码：$("p").text();

结果：HellofineThankyou!

2.有参text（val）：设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象

html页面代码：

Test Paragraph.

jquery代码：$("p").text("**Some** new text.");

结果:\[

**Some** new text.

\]

最后，val（）属性中也有两个方法，一个有参，一个无参。

1.无参val（）：获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

返回的是一个String、 array

例子：

html页面代码 ：

![复制代码][sg_trans.gif]

<</span>p></</span>p><</span>br/>  
<</span>select id="single">  
<</span>option>Single</</span>option>  
<</span>option>Single2</</span>option>  
</</span>select>  
<</span>select id="multiple"multiple="multiple">  
<</span>option selected="selected">Multiple</</span>option>  
<</span>option>Multiple2</</span>option>  
<</span>option selected="selected">Multiple3</</span>option>  
</</span>select>

![复制代码][sg_trans.gif]

jquery代码：$("p").append( "**Single:** " \+ $("\#single").val() + " **Multiple:** " + $("\#multiple").val().join(", "));

**结果:**\[

**Single:**Single**Multiple:**Multiple, Multiple3

\]

2.有参val（val）：设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象

html页面代码：

jquery代码：$("input").val("hello world!");

结果：hello world!

[sg_trans.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e1bc14769e904176b92fee79c735406c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery中，html、val与text三者属…

首先，html属性中有两个方法，一个有参，一个无参 1. 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一

电玩女神/ 2024年01月30日 00:38/ 0 赞/ 60 阅读

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

文章目录 html TEXT VAL text()和html()的对比 html html()：取得第一个匹配元素的html内容（标签+

男娘i/ 2023年10月06日 10:54/ 0 赞/ 16 阅读

相关关于jquery中html()、text()、val()的区别

关于jquery中html()、text()、val()的区别 .html()用为读取和修改元素的HTML标签,对应js中的innerHTML .html()是用来

迈不过友情╰/ 2022年07月16日 18:16/ 0 赞/ 199 阅读

相关浅析JQuery中的html(),text(),val()区别

jQuery中.html()用为读取和修改元素的HTML标签，.text()用来读取或修改元素的纯文本内容，.val()用来读取或修改表单元素的value值 1.HTML

r囧r小猫/ 2022年06月05日 10:13/ 0 赞/ 225 阅读

相关 jQuery之.text()与.text(textString)与.text(function(index,text))函数详解+练习

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

叁歲伎倆/ 2022年05月29日 05:14/ 0 赞/ 191 阅读

相关 JQuery中html()与text()方法的区别

通常在用JQuery写ajax时，都会用到html()这个方法，而不用text()这个方法，他们之间有什么区别呢? 1. `html`属性中有两个方法，一个有参，一个无参

迈不过友情╰/ 2022年05月08日 03:24/ 0 赞/ 205 阅读

相关 jQuery与JavaScript与ajax三者的区别与联系

简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQu

约定不等于承诺〃/ 2022年03月16日 04:16/ 0 赞/ 447 阅读

相关 jQuery与JavaScript与ajax三者的区别与联系

简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQuery

忘是亡心i/ 2022年01月22日 13:51/ 0 赞/ 334 阅读

相关 jQuery、JavaScript与JS三者间的区别

jQuery、JavaScript与JS三者间的区别 JavaScript：是浏览器中一种常见的脚本语言,以此来实现网页的动态以及和后端（数据库）的交互。 jQuery：...

朱雀/ 2020年07月01日 21:31/ 0 赞/ 800 阅读

相关两分钟了解jQuery与JavaScript、JS 三者间的区别

两分钟了解jQuery与JavaScript、JS 三者间的区别 JavaScript、jQuery、JS这三者经常出现在我们的生活中，大家知道它们有什么相同和什么不同...

朱雀/ 2020年07月01日 16:27/ 0 赞/ 686 阅读