快捷導(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)。
有些使用者會用html()方法的返回值作為代碼分支的條件，比如：

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

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

多數(shù)情況下這沒什么問題，但如果id=user的html元素內(nèi)有空格，則不會得到想要的結(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瀏覽器中會出錯(cuò)。
如果非要使用元素的html內(nèi)容作為判斷條件，解決辦法很簡單
1，寫html時(shí)去掉空格
2，調(diào)用html()方法后再調(diào)用trim，如var str = $('#user').html().trim();

您可能感興趣的文章:

JQuery
html

相關(guān)文章

圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實(shí)現(xiàn)
一年一度的圣誕節(jié)又到了，首先祝大家好運(yùn)一串串，健康一年年，平安到永遠(yuǎn)！今天就教大家如何在博客中添加紛紛揚(yáng)揚(yáng)的下雪效果。今天，你那里下雪了嗎
2012-12-12
IE7瀏覽器窗口大小改變事件執(zhí)行多次bug及IE6/IE7/IE8下resize問題
通過本篇文章主要給大家介紹IE7瀏覽器窗口大小改變事件執(zhí)行多次bug及IE6/IE7/IE8下resize問題，需要的朋友可以一起來學(xué)習(xí)
2015-08-08
jQuery 3.0中存在問題及解決辦法
這篇文章主要介紹了jQuery 3.0中存在問題及解決辦法的相關(guān)資料,需要的朋友可以參考下
2016-07-07
ie8模式下click無反應(yīng)點(diǎn)擊option無反應(yīng)的解決方法
點(diǎn)擊select里面的option，將其賦值到上面的input，直接用jQuery寫的，問題是在用IE8打開的時(shí)候，點(diǎn)擊option沒有任何反應(yīng)
2014-10-10
jQuery插件FusionCharts繪制2D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D環(huán)餅圖效果,結(jié)合實(shí)例形式分析了jQuery使用插件FusionCharts載入xml數(shù)據(jù)繪制2D環(huán)餅圖的相關(guān)步驟與操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
jQuery UI工具提示框部件Tooltip Widget
這篇文章介紹了jQuery UI工具提示框部件Tooltip Widget，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Jquery插件寫法筆記整理
大部分jQuery插件都是這種類型的插件，由于這種插件是將對象方法封裝起來，在jQuery選擇器獲取jQuery對象過程中進(jìn)行操作，從而發(fā)揮jQuery強(qiáng)大的選擇器優(yōu)勢
2012-09-09
jQuery擴(kuò)展方法實(shí)現(xiàn)Form表單與Json互相轉(zhuǎn)換的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了jQuery擴(kuò)展方法實(shí)現(xiàn)Form表單與Json互相轉(zhuǎn)換的相關(guān)知識，并給大家介紹了jquery兩種擴(kuò)展方法,需要的朋友可以參考下
2018-09-09
jQuery 操作input中radio的技巧
這篇文章主要介紹了jQuery 操作input中radio的技巧的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-07-07
這篇文章主要介紹了jQuery實(shí)現(xiàn)時(shí)尚漂亮的彈出式對話框,可實(shí)現(xiàn)非常炫目時(shí)尚的彈出式對話框功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08