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


Posted in Javascript onSeptember 01, 2014

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="js/jquery.js" type="text/javascript"></script>
 <!--
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 -->
 <title> 获取或设置元素的内容</title>
 <style type="text/css">
 body{font-size:15px;text-align:center}
 div{border:solid 0px #666;padding:5px;width:220px;margin:5px}
 </style>
 <script type="text/javascript">
 $(function() {
  var strHTML = $("#divShow").html();// 获取HTML 内容(包含div下面的两个格式)
  var strHTML2 = $("#divShow b i").html(); //获取HTML内容
  var strHTML3 = $("div").html();
  var strText = $("#divShow").text();// 获取文本内容
  var strText2 = $("div").text();
  
  $("#divHTML").html(strHTML);// 设置HTML 内容
  $("#divHTML2").html(strHTML2); //设置HTML内容
  $("#divHTML3").html(strHTML3); //设置HTML内容
  $("p").html(strHTML);
  
  $("#divText").text(strText);// 设置文本内容
  $("#divText2").text(strText2);// 设置文本内容
  $("a").text(strText);
  
  $("select").change(function() { // 设置列表框change 事件
  // 获取列表框所选中的全部选项的值
  alert($("select").val());
  var strSel = $("select").val().join(",");
  $("input").val(strSel); // 显示列表框所选中的全部选项的值
  })
 })
 </script>
 </head>
 <body>
 <table border="1" bordercolor="#A9A9A9" cellspacing="0">
 <tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divShow"><b><i>Write Less Do More</i></b></div></td>
 <td>这是原内容</td>
 </tr>
 <tr>
 <td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
 <td>这是原内容</td>
 </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divHTML">1</div></td>
 <td>获取原内容(连带内容的格式)后以html方式输出</td>
 </tr>
 <tr>
 <td><div id="divHTML2">2</div></td>
 <td>获取原内容(不带内容的格式)后以html方式输出</td>
 </tr>
 <tr>
 <td><div id="divHTML3">3</div></td>
 <td>获取原内容(获取第一个匹配元素的内容)后以html方式输出</td>
 </tr>
 <tr>
 <td><p></p></td>
 <td>HTML方式设置段落的文本</td>
 </tr>
 <tr>
 <td><p></p></td>
 <td>如果这个也有内容了,就是设置每个匹配元素的内容</td>
 </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divText">4</div></td>
 <td>获取原内容后以text方式输出</td>
 </tr>
 <tr>
 <td><div id="divText2"></div></td>
 <td>获取原内容(获取所有匹配元素的内容)后以text方式输出</td>
 </tr>
 <tr>
 <td><a></a></td>
 <td>TEXT方式设置段落的文本</td>
 </tr>
 <tr>
 <td><a></a></td>
 <td>如果这个也有内容了,就是设置每个匹配元素的内容</td>
 </tr>
 <tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td>
 
 <select multiple="multiple"style="height:96px;width:85px">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
 </select>
 <select>
  <option value="7">Item 7</option>
  <option value="8">Item 8</option>
  <option value="9" selected>Item 9</option>
 </select>
 </td>
 <td>
 </td>
 </tr>
 <tr>
 <td><input ></input></td>
 <td><input ></input></td>
 </tr>
 </table>
 </body>
</html>

大家也都可以自己去验证下,上面是我做的实验,我用的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')

如有不妥,还请斧正!

Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
js实现简单放大镜效果
Mar 07 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 #Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 #Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 #Javascript
影响jQuery使用的14个方面
Sep 01 #Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 #Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 #Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python with标签使用方法解析
2020/01/17 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
实习推荐信
2014/05/10 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
求职自我评价范文
2015/03/09 职场文书
监理中标通知书
2015/04/16 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
七年级生物教学反思
2016/02/20 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Element实现动态表格的示例代码
2021/08/02 Javascript