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 相关文章推荐
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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 分页函数multi() discuz
2009/06/21 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
Python实现的密码强度检测器示例
2017/08/23 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
小学教师事迹材料
2014/01/13 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
学期个人工作总结
2015/02/13 职场文书
团委工作总结2015
2015/04/02 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python