jquery中html 与 text方法的区别

jquery中html 与 text方法的区别

24 May 2012/in 网站设计和开发 /by Bruce

接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别。

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

首先,html属性中有两个方法,一个有参,一个无参。下面我们都用实例来看看,这样比较容易帮助理解。

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

例子:

html页面代码:<div><span>Hello</span></div>

jquery代码:$(“div”).html();

结果:<span>Hello</span>

2.有参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属性中有两个方法,一个有参,一个无参

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

例子:

html页面代码:<p><span>Hello<span><div> fine</div></p>

jquery代码:$(“p”).text();

结果:Hello

fine

2.有参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标签的识别上不同。

Tags: jquery

时间: 2024-08-13 15:11:31

jquery中html 与 text方法的区别的相关文章

jquery中html()或text()方法获取或设置p标签的值

html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容.要获取某个元素的内容,可以这样: var p_html = $("p").html(); //获取p元素的HTML代码 如果需要设置某元素的HTML代码,那么也可以使用该方法,不过需要为它传递一个参数.例如要设置p元素的HTML代码,可以使用如下

jQuery中attr和prop方法的区别

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes.prop应运而生了. 之前看网上对比两者的文章,更是列出一个表来区分什么标签下使用prop,什么标签下使用attr,原谅我是懒惰的人,最害怕要背的东西,所以只有自己想想办法了. 既然我们想知道他们两的

[JS]jQuery中attr和prop方法的区别

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes.prop应运而生了. 之前看网上对比两者的文章,更是列出一个表来区分什么标签下使用prop,什么标签下使用attr,原谅我是懒惰的人,最害怕要背的东西,所以只有自己想想办法了. 既然我们想知道他们两的

jQuery 中 attr() 和 prop() 方法的区别&lt;转&gt;

前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQuery 1.8.3 的版本,没有尝试过 jQuery 1.9.0 的版本. 于是,开始调试代码,在 1.9.0 的版本中: <input type="checkbox" /> <script> $(function() { $('input').click(fun

jQuery中click()与trigger方法的区别

click()可以执行单击事件,但是不可传参. $("button").click(function(){ alert("hello."); }); trigger可以这么用:trigger("click",['a','b']),下面是它的方法定义: $(selector).trigger(event,[param1,param2,...]) 其它事件也是如此. 可以理解为cliek()方法调用了一个无参的trigger().

jQuery中几个查询方法的区别和联系

以下匹配的是同级元素(深度N为0). next:匹配的是 "下一个同辈" 的,再次强调是"一个,同辈".与之相对的prev,查找最近的同辈元素的一个元素. nextAll:匹配的是"所有的同辈",所有.同辈.与之相对的是prevAll. prev:与next相反. prevAll:与nextAll相反. Demo如下: 待补充 以下匹配的是非同级元素(深度N>=1) parent:父亲元素(N=1) parents:祖代元素(N>=1

jQuery 中 attr() 和 prop() 方法的区别

http://wenzhixin.net.cn/2013/05/24/jquery_attr_prop http://www.cnblogs.com/dolphinx/p/3348582.html

jquery中prop()与attr()方法的区别

一.prop() 简单来说是当需要判断真假时使用,如复选框时: if( $(this).prop('checked')){ //当返回true时在这里调用 }else{ //当返回false时在这里调用 } TIPS:相关判断$(this).is(':checked')--这个用得酷点 二.attr() 简单来说当你要获得某个属性及其值时使用,如获得p标签的id时: $('p').attr('id'); 或将其设置id为pId时: $('p').attr('id','pId');

JavaScript学习笔记——jquery中html()、text()、val()的区别

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值.其中.和.text()方法不能使用在表单元素上,而.val()