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 绑定事件时传递参数的实现方法
Oct 13 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
js中less常用的方法小结
Aug 09 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
关闭页面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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
模拟select的代码
2011/10/19 Javascript
Javascript面向对象编程
2012/03/18 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
js判断节假日实例代码
2017/12/27 Javascript
Vue指令指令大全
2019/02/09 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python让列表倒序输出的实例
2018/06/25 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python pandas用法最全整理
2019/08/04 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
门面租赁合同范文
2019/08/06 职场文书
Python机器学习之基础概述
2021/05/19 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript