JQuery中的html()、text()、val()区别示例介绍


Posted in Javascript onSeptember 01, 2014

1.HTML

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

2.TEXT

text():取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val):设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).

3.VAL

val():获得第一个匹配元素的当前值。
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

Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 #Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 #Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 #Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 #Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 #Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 #Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 #Javascript
You might like
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP7 list() 函数修改
2021/03/09 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
保护野生动物倡议书
2014/05/16 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
读书笔记格式
2015/07/02 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL