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 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php远程下载类分享
2016/04/13 PHP
PHP模块化安装教程
2016/06/01 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
arguments对象
2006/11/20 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
React简单介绍
2017/05/24 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python xml解析实例详解
2016/11/14 Python
Django框架实现的分页demo示例
2019/05/25 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
异常和异常类的概念
2014/09/12 面试题
厂办主管岗位职责范本
2014/02/28 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
建国大业观后感
2015/06/01 职场文书
八年级数学教学反思
2016/02/17 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers