华山资源网

浅析JQuery中的html(),text(),val()区别
网络编程 2024/11/15 佚名
3 1

1.HTML

html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

2.TEXT

text():取得所有匹配元素的内容。一般用id区别

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

text(val):设置所有匹配元素的文本内容

与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).

3.VAL

val():获得第一个匹配元素的当前值。一般用来取input的value值。

val(val):设置每一个匹配元素的值。

上面的内容是在JQuery的帮助文档里拷贝的，也都不废话多说了。下面是自己做的一些练习，代码如下：

在做练习的时候我发现了html和text的另一个不同的地方

html()去元素的内容的时候，能将所选定的元素下面的格式也取到了。

如：<div id="divShow"><b><i>Write Less Do More</i></b></div>

如果我们用var strHTML = $("#divShow").html();取的话，

结果是：<b><i>Write Less Do More</i></b>

如果我们用var strHTML2 = $("#divShow b i").html();取的话

结果是Write Less Do More

而text没有第一种情况，

如果我们var strText = $("#divShow").text();取的话

结果是Write Less Do More

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>">
 <script src="/UploadFiles/2021-04-02/jquery.js">


大家也都可以自己去验证下，上面是我做的实验，我用的JQuery是1.6


总结一下：


.html()用为读取和修改元素的HTML标签

.text()用来读取或修改元素的纯文本内容

.val()用来读取或修改表单元素的value值。




这三个方法功能上的对比


.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。




.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。




.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。


下面是其他网友给出的实例：


假如html结构如下





<div id="divTest" value='2'>
    这是div的内容！
    <label id="lblText">
      这是label的内容！
    </label>
    <div id="divTest2">
      第二个div内容！
    </div>
  </div>





这是html文档结构，现在我们执行下面js代码看看所取得的是什么的东西


$("#divTest").html()  //所取得内容：这是div的内容！<label id="lblText">这是label的内容！</label> <div id="divTest2">第二个div内容！</div>

$("#divTest").html("我要修改了！")  //执行修改

　　　　上面修改之后，我们接着获取一下

$("#divTest").html() //所取得内容：我要修改了！


注：html()方法可以用于XHTML文档，但不能用于XML文档！


2.text():取得所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本，同理，text(val)是设置所有匹配元素的文本内容


$("#divTest").text() //所取得内容：这是div的内容！这是label的内容！第二个div内容！

                             //可见所取得是标签内的东西，但不会取标签

注：这个方法对HTML和XML文档都有效


3.val()常用来操作标准的表单组件对象，如button,text,hidden


例如添加了一个select元素以及一个hidden的元素





  <select id="selectVal">
     <option value="1" selected="selected">1</option>
     <option value="2" >2</option>
   </select>
  <input type="hidden" id="hidVal" value="1"/>





　　现在我们来取一下他们的值


$("#selectVal").val()  //取得值为：1  同理这个也是 $("#hidVal").val()　　


　　有时候开发的时候会在一个div内设置一个value的属性，那么我们在取值的时候可以用这样　　


$("#divTest").attr('value') 


　　如有不妥，还请斧正！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com