快捷導(dǎo)航

JQuery中html()方法使用不當(dāng)帶來的陷阱

更新時(shí)間：2011年04月07日 21:49:57 作者：

html方法當(dāng)不傳參數(shù)時(shí)用來獲取元素的html內(nèi)容

查看源碼

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

得知其通過非標(biāo)準(zhǔn)的但所有瀏覽器都支持的innerHTML實(shí)現(xiàn)。
有些使用者會(huì)用html()方法的返回值作為代碼分支的條件，比如：

復(fù)制代碼代碼如下:

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

多數(shù)情況下這沒什么問題，但如果id=user的html元素內(nèi)有空格，則不會(huì)得到想要的結(jié)果了。比如：

復(fù)制代碼代碼如下:

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

div[id=user]內(nèi)文本jack前不小心多了3個(gè)空格，這時(shí)候在各瀏覽器表現(xiàn)不一樣：
IE6/78中，彈出字符串的長度是4，即忽略了空格。
IE9/Firefox/Safari/Chrome/Opera中，彈出則是7，即沒有忽略空格。
這時(shí)候拿.html()的返回值作為代碼分支的條件明顯在非IE瀏覽器中會(huì)出錯(cuò)。
如果非要使用元素的html內(nèi)容作為判斷條件，解決辦法很簡單
1，寫html時(shí)去掉空格
2，調(diào)用html()方法后再調(diào)用trim，如var str = $('#user').html().trim();

您可能感興趣的文章:

JQuery
html

相關(guān)文章

jquery模擬多級(jí)復(fù)選框效果的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query模擬多級(jí)復(fù)選框效果的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
利用cookie記住背景顏色示例代碼
背景顏色，比如換個(gè)心情之類的，需要記住這樣的一個(gè)狀態(tài)，下面為大家介紹下利用cookie記住背景顏色的具體實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過
2013-11-11
基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否可用實(shí)例
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否可用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03
jquery如何根據(jù)值設(shè)置默認(rèn)的選中項(xiàng)
這篇文章主要介紹了jquery如何根據(jù)值設(shè)置默認(rèn)的選中項(xiàng),需要的朋友可以參考下
2014-03-03
jquery表單驗(yàn)證框架提供的身份證驗(yàn)證方法(示例代碼)
本篇文章主要介紹了jquery表單驗(yàn)證框架提供的身份證驗(yàn)證方法的示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
給jQuery方法添加回調(diào)函數(shù)一款插件的應(yīng)用
本插件用于給jQuery方法添加回調(diào)函數(shù)，可在類方法或?qū)嵗椒ㄌ砑尤魏巫远x的回調(diào)函數(shù)而不影響原方法的行為,感興趣的朋友可以了解下，希望本文對(duì)你有所幫助
2013-01-01
基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
這篇文章主要介紹了基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證,需要的朋友可以參考下
2014-12-12
基于jQuery的遍歷同id元素并響應(yīng)事件的代碼
寫網(wǎng)頁的時(shí)候，腳本循環(huán)的時(shí)候有很多時(shí)候都會(huì)循環(huán)出來同id的網(wǎng)頁元素，下面貼出來代碼，如何利用jQuery對(duì)這些元素進(jìn)行逐一遍歷并可響應(yīng)消息
2012-06-06
jQuery中dequeue()方法用法實(shí)例
這篇文章主要介紹了jQuery中dequeue()方法用法,實(shí)例分析了dequeue()方法的功能、定義、使用技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
不同的jQuery API來處理不同的瀏覽器事件
我們將探討不同的API jQuery來處理不同的瀏覽器事件,需要的朋友可以參考下
2012-12-12