jQuery中的text()、html()和val()以及innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:
text();设置或者获取所选元素的文本内容;
html();设置或者获取所选元素的内容(包括html标记);
val();设置或者获取表单字段的值(前提是表单设置了value属性);
(text()和html()的区别是:前者是处理的文本内容,只能写文本如果写了上面的标记则会以文本形式输出;后者可以解析文本中的html标记,就是你可以添加像<a></a>、<p></p>等标记,最后会解析为其效果。
)
*JavaScript中设置或者获取所选内容的值
同理innerText、innerHTML和value,
innerText和innerHTML都是将字符串放入hmtl标签中的一个函数
但是innerHTMl他可以解析hmtl标记
例如 你放入一个<a>斯蒂芬</a> 如果在DIV中它里面就会出现一个带下划线的a元素;
但是innerText只支持普通字符串;
*具体代码如下:
jQuery中:
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head> <body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body> </html>
JavaScript中:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function getInnerHTML(){
alert(document.getElementById("btn1").value);
}
</script>
</head> <body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1" onclick="getInnerHTML()" >显示文本</button>
<button id="btn2">显示 HTML</button>
</body> </html>
jQuery和JavaScript的区别总结:
*前者click事件是获取元素id进行处理;后者是onclick="getInnerHTML()";
*前者获取元素值时是text();后者是innerText,无();设置值时,前者是text("jing"),后者是innerText="jing";
*注意:两者的设置时,会覆盖原有内容,如果想要插入,使用插入方法。
另:
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素
.text()用来读取或修改元素的纯文本内容 对应js中的innerText
text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
关于三者的区别
1. .val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
jQuery中的text()、html()和val()以及innerText、innerHTML和value的更多相关文章
- JQuery中的text(),html()和val()区别
定义和用法 text() 方法方法设置或返回被选元素的文本内容 代码如下 <!DOCTYPE html> <html lang="en"> <head ...
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val()
一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...
- jQuery中的text(),html(),val()用法
jQuery中的text(),html(),val()用法 text():获取或者改变指定元素的文本 html():获取或改变指定元素的html元素以及文本 val():获取或者改变指定元素的valu ...
- jquery中html(), text(),val()区别(zhuan)
https://zhidao.baidu.com/question/307317838.html http://www.cnblogs.com/aqbyygyyga/archive/2011/11/0 ...
- jQuery中的text(),html(),val()的区别
一.jquery中HTML 1. 无参html() 方法用来获取任意元素的HTML内容,如果你调用多个选定元素的.html()方法,那么其读取的只是第一个元素,换句话说:如果选择器匹配多于一个的元素, ...
- jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- jQuery中的text(),html(),val()有什么区别
text():获取或者改变指定元素的文本html():获取或改变指定元素的html元素以及文本val():获取或者改变指定元素的value值(一般是表单元素) 以上3个都是jquery类库中的语法 第 ...
- js与jquery中html() text() val()中的区别
首先html() text() val() 是jquery方法. 1.html()取得内容可以包含标签. 2.text()取得内容为元素文本内容. 3.val()只有value属性的元素才能使用该方法 ...
- jquery中html()/text()/val()区别
html就是你可以添加<span></span><li></li>的标记text只能写文本如果写了上面的标记则会以文本形式输出,就是输出标签体的内容va ...
随机推荐
- Eclipse 反编译插件JadClipse安装
下载jadClipse地址: 链接: http://pan.baidu.com/s/1kTN4TPd 提取码: 3fvd 将net.sf.jadclipse_3.3.0.jar拷贝到eclipse的 ...
- PHP 基础笔记
数据类型 字符串 整数 浮点数 布尔值 数组 对象 NULL 未定义的变量,数据类型为 NULL. PHP 中数组和对象是不同的类型,而 js 中数组即为对象.(ps: es6 已经内置了 class ...
- 关于base64编码的原理和实现
在前文 Data URI 应用场景小结 中我们提到了一个概念,叫做 base64编码,今天我们就来聊聊 base64编码,揭开它的神秘面纱. 一句话解释:Base64是一种基于64个可打印字符来表示二 ...
- Hadoop简单安装配置
Hadoop开始设计以Linux平台为运行目标,所以这里推荐在Linux发行版比如Ubuntu进行安装,目前已经有Hadoop for Windows出来,大家自行搜下文章. Hadoop运行模式分为 ...
- winddows 运行指令 (2)
cmd.exe--------CMD命令提示符 chkdsk.exe-----Chkdsk磁盘检查 certmgr.msc----证书管理实用程序 calc-----------启动计算器 charm ...
- 维克里拍卖 Vickrey auction
https://en.wikipedia.org/wiki/Vickrey_auction 维克里拍卖(Vickrey auction),即次价密封投标拍卖(Second-price sealed-b ...
- ContentObserver监听数据库·变化
//短信Uri Uri smsUri = Uri.parse("content://sms"); //使用ContentReslover注册·监听器 getContentResol ...
- ELK 的好文章连接
http://www.wklken.me/posts/2016/05/24/elk-mysql-slolog.html 处理mysql慢查询日志 http://www.wklken.me/post ...
- iPad开发--QQ空间,处理横竖屏布局,实现子控件中的代理
一.主界面横竖屏效果图 二.主界面加载, 初始化Dock(红色框的控件),判断程序启动时的屏幕方向.调用自己- (void)transitionToLandScape:(BOOL)isLandScap ...
- Notes on 'Selective Search For Object Recognition'
UijlingsIJCV2013, Selective Search For Object Recognition code 算法思想 利用分割算法将图片细分成很多region, 或超像素. 在这个基 ...