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 相关文章推荐
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
javascript系统时间设置操作示例
Jun 17 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
vue3.0生命周期的示例代码
Sep 24 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
基于python实现模拟数据结构模型
2020/06/12 Python
详解python对象之间的交互
2020/09/29 Python
Python创建自己的加密货币的示例
2021/03/01 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
财务信息服务专业自荐书范文
2014/02/08 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
派出所所长先进事迹
2014/05/19 职场文书
煤矿安全协议书
2014/08/20 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
工作简历自我评价
2015/03/11 职场文书
Python循环之while无限迭代
2022/04/30 Python