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


Posted in Javascript onApril 07, 2011

查看源码

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返回值忽略英文空格的问题

Javascript 相关文章推荐
range 标准化之获取
Aug 28 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
Vue计算属性的使用
Aug 04 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 #Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 #Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 #Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 #Javascript
jquery对表单操作2
Apr 06 #Javascript
jQuery对表单的操作代码集合
Apr 06 #Javascript
24款非常有用的 jQuery 插件分享
Apr 06 #Javascript
You might like
PHP递归算法的详细示例分析
2013/02/19 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
Yii学习总结之安装配置
2015/02/22 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php微信开发之谷歌测距
2018/06/14 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
vue-router单页面路由
2017/06/17 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
python 利用zmail库发送邮件
2020/09/11 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
年终自我鉴定
2013/10/09 职场文书
社区活动总结
2015/02/04 职场文书
创业计划书之面包店
2019/09/12 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS