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 相关文章推荐
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
scrapy-splash简单使用详解
2021/02/21 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
会议邀请函范文
2014/01/09 职场文书
优乐美广告词
2014/03/14 职场文书
商场周年庆活动方案
2014/08/19 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书