jQuery中的text()、html()和val()以及javaScript中的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只支持普通字符串;
<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>
<!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()以及javaScript中的innerText、innerHTML和value的更多相关文章
- 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”
JavaScript中的setInterval用法(资料来源:博主---八神吻你 ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...
- JQuery中的text(),html()和val()区别
定义和用法 text() 方法方法设置或返回被选元素的文本内容 代码如下 <!DOCTYPE html> <html lang="en"> <head ...
- Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 win ...
- Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- javascript中的正则表达式学习
一.前言 关于正则表达式自身的语法这里不做过多介绍(详情可参见http://www.php100.com/manual/unze.html),这里仅仅解释javascript中和正则表达式相关的几个方 ...
- JavaScript大杂烩6 - 理解JavaScript中的this
在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this) ...
- javascript中的一些核心知识点以及需要注意的地方
前言 近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来 比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不 ...
- javascript中怎么判断对象{}为空
有时候通过AJAX方法调用返回的是一个JSON对象,而这个对象可能在开发过程中会没有数据是一个空{}. JavaScript判断object/json 是否为空,可以使用jQuery的isEmptyO ...
- JavaScript中的算法之美——栈、队列、表
序 最近花了比较多的时间来学习前端的知识,在这个期间也看到了很多的优秀的文章,其中Aaron可能在这个算法方面算是我的启蒙,在此衷心感谢Aaron的付出和奉献,同时自己也会坚定的走前人这种无私奉献的分 ...
随机推荐
- Ribbon和Nignx的区别
Ribbon属于客户端负载均衡:在调用接口的时候,会通过服务别名到eureka上获取服务的信息列表,缓存到jvm本地,在本地采用RPC远程调用技术去调用接口,实现负载均衡.可以设置调用的规则是请求总数 ...
- Go基础编程实践(六)—— 文件
检查文件是否存在 在此程序同目录下创建log.txt文件,以检测. package main import ( "os" "fmt" ) func main() ...
- JavaScript 的 深拷贝和浅拷贝
深拷贝和浅拷贝都是针对的引用类型, JS中的变量类型分为值类型(基本类型)和引用类型: 对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会对地址进行拷贝,最终两个变量指向同一份数据 一.先 ...
- 手写ORM入门篇(一)
对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换 . ...
- .net Dapper 实践系列(3) ---数据显示(Layui+Ajax+Dapper+MySQL)
目录 写在前面 产生问题 解决方案 写在前面 上一小节,我们使用Dapper 里事务实现了一对多关系的添加.这一小节,主要记录如何使用Dapper 实现多表的查询显示. 产生问题 在mvc控制器中查询 ...
- java之hibernate之hibernate缓存
这篇主要讲 hibernate缓存 1.缓存的作用是为了提高效率 2.Hibernate的开发效率比较高,但是执行效率相对较低. 3.Hibernate提供了缓存来提高效率.hibernate缓存分为 ...
- SQL server字符串分割成表-表分割为字符串
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO ),)) )) as begin declare @i int set @SourceSql=rtri ...
- 3.matplotlib绘制条形图
plt.bar() # coding=utf-8 from matplotlib import pyplot as plt from matplotlib import font_manager my ...
- Java自学-控制流程 for
Java的for循环 for循环,和while一样,只是表达方式不一样 示例 1 : for 比较for和while public class HelloWorld { public static v ...
- Django:信号的使用
信号 Django中提供了"信号调度",用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 应用:比如插入数据到数据库,插入之前写日 ...