JQuery中html()方法使用不当带来的陷阱

查看源码


代码如下:

return this[0] && this[0].nodeType === 1 ?
this[0].innerHTML.replace(rinlinejQuery, "") :
null;

得知其通过非标准的但所有浏览器都支持的innerHTML实现。
有些使用者会用html()方法的返回值作为代码分支的条件，比如：


代码如下:

var str = $('#user').html();
if( str=='jack' ){
...
}else if( str=='tom' ){
...
}else if( str=='lily' ){
...
}

多数情况下这没什么问题，但如果id=user的html元素内有空格，则不会得到想要的结果了。比如：


代码如下:

<div id="user"> jack</div>
<script>
alert(document.getElementById('user').innerHTML.length);
</script>

div[id=user]内文本jack前不小心多了3个空格，这时候在各浏览器表现不一样：
IE6/78中，弹出字符串的长度是4，即忽略了空格。
IE9/Firefox/Safari/Chrome/Opera中，弹出则是7，即没有忽略空格。
这时候拿.html()的返回值作为代码分支的条件明显在非IE浏览器中会出错。
如果非要使用元素的html内容作为判断条件，解决办法很简单
1，写html时去掉空格
2，调用html()方法后再调用trim，如var str = $('#user').html().trim();

相关：

http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0
仅IE6/7/8中innerHTML返回值忽略英文空格的问题

赞 (0)

相关推荐

  • jquery获取html元素的绝对位置和相对位置的方法

    绝对位置坐标: 复制代码 代码如下: $("#elem").offset().top $("#elem").offset().left 相对父元素的位置坐标: 复制代码 代码如下: $("#elem").position().top $("#elem").position().left 另: static(默认):默认定位方式. relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bo

  • jquery append()方法与html()方法的区别及使用介绍

    append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容. 定义和用法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(content) 使用函数来附加内容 使用函数在指定元素的结尾插入内容. 语法 $(selector).append(function(index,html)) 实例代码: <

  • jQuery 获取、设置HTML或TEXT内容的两种方法

    jQuery提供了两个API可以直接用来为元素添加内容. html() text() 其中html()是为指定的元素添加html内容 text()是为指定的元素添加文本内容 两者的区别在于,text中的内容是纯文本,不会被解析为html 如果要对如下html代码进行操作 复制代码 代码如下: <body> <p></p> </body> 使用html() 复制代码 代码如下: $('p').html('<strong>Hello World<

  • jQuery动态创建html元素的常用方法汇总

    jQuery动态创建html元素的常用方法汇总

    本文实例讲述了jQuery动态创建html元素的常用方法,在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 1.使用jQuery动态创建元素追加到jQuery对象上. <meta http-equiv="Content-Type" content="text/html;

  • jQuery html()方法使用不了无法显示内容的问题

    $("#content").html(data.content); $("#content")[0].innerHTML = data.content; 今天遇到jquery中的html方法使用不了,只能用完最基本的innerHTML把内容展示出来.具体原因还没找到,肯定跟内容有关,展示不了的html放上来供以后检查原因,是我收到csdn的一封邮件. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Trans

  • jQuery中html()方法用法实例

    本文实例讲述了jQuery中html()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够设置和取得匹配元素的HTML内容,原来的内容将会被新设置的内容替换. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. 语法结构一: 复制代码 代码如下: $(selector).html() 此时方法不带参数时候是取得第一个匹配元素的html内容. 此方法与text()方法

  • jQuery获取文本节点之 text()/val()/html() 方法区别

    在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1. 无参html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<div><p>Hello</p></div> jquery代码:$("div").html(); 结果:H

  • jquery删除指定的html标签并保留标签内文本内容的方法

    例如有这样一段html代码: 复制代码 代码如下: 我们演示代码  <p>大家好,欢迎来到jb51.net</p>  这里为大家提供最优秀的<a href="http://www.jb51.net/js">js</a>代码和教程 我们希望删除这段html代码里面的一对<p>标签,但是要保持里面的内容不被删除,这里我们用jquery处理,详细的jQuery代码: 复制代码 代码如下: <script type="

  • jquery text(),val(),html()方法区别总结

    text():1.无参获取每一个匹配元素的文本内容 2.有参数 给每一个匹配元素赋值 val():1.无参获取第一个匹配元素的值 2.有参数 给每一个匹配元素赋值 html():1.无参获取第一个匹配元素的标签内容 2.有参数给每一个匹配元素赋值

  • JQuery中html()方法使用不当带来的陷阱

    查看源码 复制代码 代码如下: return this[0] && this[0].nodeType === 1 ? this[0].innerHTML.replace(rinlinejQuery, "") : null; 得知其通过非标准的但所有浏览器都支持的innerHTML实现. 有些使用者会用html()方法的返回值作为代码分支的条件,比如: 复制代码 代码如下: var str = $('#user').html(); if( str=='jack' ){ .

  • jquery中load方法的用法及注意事项说明

    调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另外一个函数. 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load(

  • jQuery中inArray方法注意事项分析

    本文分析讲述了jQuery中inArray方法注意事项.分享给大家供大家参考,具体如下: jquery为web开发者提供了很大的便捷,本文写作的目地是提醒大家慎重jquery中的inArray方法. 大家都知道javascript是一种弱类型语言,对于数字类型和字符类型,可以随意切换(例如:1+""="1"),下面开始说主题: jquery的一个方法inArray(ele, array)是判断ele是否在array中存在,返回值是该元素第一次出现在数组array中的

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jquery中post方法用法实例

    本文实例讲述了jquery中post方法的用法,分享给大家供大家参考.具体用法分析如下: 在使用jquery实现网站的异步交互时,常用的两个函数为get和post方法,get方法使用很简单,直接提交get请求即可,如果有参数,直接追加到url后面就行,但是使用post方法时,传递参数,需要和url分开写,使得传参变得麻烦了,不过这样做起来更安全一些,而且出现中文乱码的概率也要低一些(get方法传中文很多情况下会出现乱码现象),这里就详细介绍一下post是怎样传递参数的. 首先写一个html代码如

  • jQuery中get方法用法分析

    本文实例讲述了jQuery中get方法用法.分享给大家供大家参考,具体如下: 参数:url,[data],[callback],[type] url 待载入页面的URL地址. data 待发送 Key/value 参数. callback 载入成功时回调函数. type 返回内容格式,xml, html, script, json, text, _default. 案例1 表单代码: <form id="form1" action="#"> <p&

  • jQuery中innerHeight()方法用法实例

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

  • jQuery中die()方法用法实例

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery中scrollLeft()方法用法实例

    本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

随机推荐