DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery中html()方法使用不當帶來的陷阱
JQuery中html()方法使用不當帶來的陷阱
編輯:JQuery特效代碼     
查看源碼
代碼如下:
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返回值忽略英文空格的問題

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved