JQuery中html()与text()方法的区别

常在用JQuery写ajax时，都会用到html()这个方法，而不用text()这个方法，他们之间有什么区别呢?

html属性中有两个方法，一个有参，一个无参。

无参html()：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个string

例子：
html页面代码：<div><span>Hello</span></div>
JQuery代码：$(“div”).html();
结果：<span>Hello</span>

有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个JQuery对象

例子：
html页面代码：<div></div>
JQuery代码：$(“div”).html(“<p>Nice to meet you</p>”);
结果：<div><p> Nice to meet you</p></div>（html标签会被浏览器识别）

text属性中有两个方法，一个有参，一个无参

无参text()：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个string。

例子：
html页面代码：<p><span>Hello<span><div> fine</div></p>
JQuery代码：$(“p”).text();
结果：Hello fine

有参text(val)：设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体).返回一个JQuery对象。

例子：
html页面代码：<div>Paragraph.</div>
JQuery代码：$(“div”).text(“<b>Some</b> new text.”);
结果: <p><b>Some</b> new text.</p> （html标签不会被浏览器识别，而是当作字符串来输出）

通过上面的例子，我们知道 html()方法与text()方法的区别就在于对html标签的识别上不同。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.7.js"></script>
 <script type="text/javascript">
 <!--
	 function f1()
	 {
	 //text方法 只获取标签中的文本内容
		 alert($("#myDiv").text());
	 }
	 function f2()
	 {
	 //html方法 获取指定标签中的html标签和内容
		 alert($("#myDiv").html());
	 }
 //-->
 </script>
 </head>

 <body>
 <div id="myDiv" style="border:5px solid red; width:300px;height:300px;">
 <span style="color:blue; font-size:35px">大家好 我是div<span>
</div>
<input type="button" value="text()" onclick="f1()">
<input type="button" value="html()" onclick="f2()">
 </body>
</html>

日常学习中，html，css和js我们都学过，起初分不清这三者的区别和联系，随着知识的增长，有了一些体会。来跟我一起看一下这三项技术都是什么，能干什么？

1、HTML—Hypertext Markup Language

超文本标记语言。它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（比如文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容：

HTML文本中包含了所谓的“链接点”HTML利用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。总的来说，HTML就是整合网页结构和内容显示的一种语言。

2、CSS—Cascading Style Sheet

层叠样式表单。是将样式信息与网页内容分离的一种标记语言。我们在牛腩新闻发布系统中，我们使用过CSS文件，对一些标签的样式进行修改。

我们使用CSS为每个HTML元素定义样式，也可以用于多个界面。进行全局更新时，只需修改样式即可。

body { border :1px solid #000;/*整体的边框*/ font-size :14px; }

说白了，CSS就是设置网页上HTML元素属性的语言。

3、JavaScript

一开始特别郁闷为什么它的名字跟Java如此相似?

这是典型的市场营销方面的成功，它的推广成功,也是借了Java的东风。当微软开始意识到Javascript在Web开发人员中流行起来时，微软还是一贯风格，建立了自己的脚本语言，JScript。

Javascript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象，与Web客户交互作用。例如可以设置鼠标悬停效果，在客户端验证表单，创建定制的HTML页面，显示警告框，设置cookie等等。

function jsHello{ alert('Hello World！'); }

把代码嵌入HTML语言中，它会在加载时弹出一个“Hello World”对话框。至于怎么嵌入的，我们在学习JS视频之初就已经知道了。

关于 HTML、CSS与JS的区别就给大家介绍这么多，学习最重要的还是要靠自己，掌握正确的学习技巧，并持之以恒的坚持下去，就能攻克！

感谢阅读，如果觉得本文对你有帮助，记得点个赞再走哦~

在线咨询

上一篇：如何使用JavaScript解析URL
下一篇：一文读懂HTML和CSS的关系

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JQuery中html()与text()方法的区别

您的项目需求