*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的更多相关文章

  1. 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”

    JavaScript中的setInterval用法(资料来源:博主---八神吻你   ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...

  2. JQuery中的text(),html()和val()区别

    定义和用法 text() 方法方法设置或返回被选元素的文本内容 代码如下 <!DOCTYPE html> <html lang="en"> <head ...

  3. Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的.   1.执行时间 win ...

  4. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  5. javascript中的正则表达式学习

    一.前言 关于正则表达式自身的语法这里不做过多介绍(详情可参见http://www.php100.com/manual/unze.html),这里仅仅解释javascript中和正则表达式相关的几个方 ...

  6. JavaScript大杂烩6 - 理解JavaScript中的this

    在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this) ...

  7. javascript中的一些核心知识点以及需要注意的地方

    前言 近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来 比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不 ...

  8. javascript中怎么判断对象{}为空

    有时候通过AJAX方法调用返回的是一个JSON对象,而这个对象可能在开发过程中会没有数据是一个空{}. JavaScript判断object/json 是否为空,可以使用jQuery的isEmptyO ...

  9. JavaScript中的算法之美——栈、队列、表

    序 最近花了比较多的时间来学习前端的知识,在这个期间也看到了很多的优秀的文章,其中Aaron可能在这个算法方面算是我的启蒙,在此衷心感谢Aaron的付出和奉献,同时自己也会坚定的走前人这种无私奉献的分 ...

随机推荐

  1. SpringBoot系列教程web篇之重定向

    原文地址: SpringBoot系列教程web篇之重定向 前面介绍了spring web篇数据返回的几种常用姿势,当我们在相应一个http请求时,除了直接返回数据之外,还有另一种常见的case -&g ...

  2. SpringBoot中使用Thymeleaf模板

    1.引入pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  3. 长乐国庆集训Day4

    T1 一道数论神题 题目 [题目描述] LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图,只有点权. LYK想把这个图删干净,它的方法是这样的.每次选择一个点,将它删 ...

  4. STVD使用printf输出数据错误

    使用STM8L052输出调试信息 重定向put char #include "stdio.h" //必不可缺少 char putchar (char c) { /* Write a ...

  5. golang测试与性能调优

  6. 华为云&#183;寻找黑马程序员#【代码重构之路】如何“消除”if/else【华为云技术分享】

    1. 背景 if/else是高级编程语言中最基础的功能,虽然 if/else 是必须的,但滥用 if/else,特别是各种大量的if/else嵌套,会对代码的可读性.可维护性造成很大伤害,对于阅读代码 ...

  7. Maven聚合项目的创建

    1.项目结构如下 步骤如下: 点击Finish 这里父项目需要加入如下的构建依赖: <dependencyManagement> <dependencies> <depe ...

  8. 转：使用Goproxy解决golang.org模块无法下载的问题

    原文https://studygolang.com/articles/22277?fr=sidebar 简介 Goproxy 中国完全实现了 Go 的模块代理协议.并且它是一个由中国备受信赖的云服务提 ...

  9. springboot使用HttpSessionListener 监听器统计当前在线人数

    概括: request.getSession(true):若存在会话则返回该会话,否则新建一个会话. request.getSession(false):若存在会话则返回该会话,否则返回NULL ht ...

  10. SQL Server 2012启动时提示：无效的许可证数据，需要重新安装

    因为手咸,觉得电脑没有VS 2010版本的软件,就把Microsoft Visual C++ 2010某个组件给卸载了. 然后打开Sql Server 2012,就开始报错. 重装之后,也还是报错,将 ...