服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
在使用jQuery選擇器獲取到j(luò)Query包裝集后, 我們需要對其進行操作. 本章首先講解如何動態(tài)的創(chuàng)建元素, 接著學(xué)習(xí)如何管理jQuery包裝集, 比如添加,刪除,切片等.
本系列的2,3篇上面列舉了太多的API相信大家看著眼暈. 不過這些基礎(chǔ)還必須要講, 基礎(chǔ)要扎實.其實對于這些列表大家可以跳過, 等以后用到時再回頭看或者查詢官方的API說明.
本章內(nèi)容很少, 主要講解動態(tài)創(chuàng)建元素和操作jQuery包裝集的各個函數(shù).
我們經(jīng)常使用javascript動態(tài)的創(chuàng)建元素, 有很多程序員通過直接更改某一個容器的HTML內(nèi)容.比如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>動態(tài)創(chuàng)建對象</title> </head> <body> <div id="testDiv">測試圖層</div> <script type="text/javascript"> document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的div</div>"; </script> </body> </html>
上面的示例中我通過修改testDiv的內(nèi)容,在頁面上動態(tài)的添加了一個div元素. 但是請牢記,這是錯誤的做法!
錯誤的原因:
(1) 在頁面加載時改變了頁面的結(jié)構(gòu). 在IE6中如果網(wǎng)絡(luò)變慢或者頁面內(nèi)容太大就會出現(xiàn)"終止操作"的錯誤. 也就是說"永遠(yuǎn)不要在頁面加載時改變頁面的Dom模型".
(2) 使用修改HTML內(nèi)容添加元素, 不符合Dom標(biāo)準(zhǔn). 在實際工作中也碰到過使用這種方法修改內(nèi)容后, 某些瀏覽器中并不能立刻顯示添加的元素, 因為不同瀏覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement創(chuàng)建對象, 在所有的瀏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個完整的HTML字符串, 內(nèi)部也是使用innerHTML. 所以也不是完全否定innerHTML函數(shù)的使用.
所以從現(xiàn)在開始請摒棄這種舊知識, 使用下面介紹的正確方法編程.
下面介紹兩種正確的創(chuàng)建元素的方式.
什么是 DOM？
通過 JavaScript，您可以重構(gòu)整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
在 1998 年，W3C 發(fā)布了第一級的 DOM 規(guī)范。這個規(guī)范允許訪問和操作 HTML 頁面中的每一個單獨的元素。
所有的瀏覽器都執(zhí)行了這個標(biāo)準(zhǔn)，因此，DOM 的兼容性問題也幾乎難覓蹤影了。
DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。
關(guān)于使用HTML DOM創(chuàng)建元素本文不做詳細(xì)介紹, 下面舉一個簡單的例子:
//使用Dom標(biāo)準(zhǔn)創(chuàng)建元素
var Ｓelect = document.createElement("Ｓelect");
Ｓelect.options[0] = new Option("加載項1", "value1");
Ｓelect.options[1] = new Option("加載項2", "value2");
Ｓelect.size = "2";
var object = testDiv.appendChild(Ｓelect);
通過使用 document.createElement 方法我們可以創(chuàng)建Dom元素, 然后通過appendChild方法為添加到指定對象上.
在jQuery中創(chuàng)建對象更加簡單, 比如創(chuàng)建一個Div元素:
$("<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的div</div>")
我們主要使用jQuery核心類庫中的一個方法:
jQuery( html, ownerDocument )
Returns: jQuery
根據(jù)HTML原始字符串動態(tài)創(chuàng)建Dom元素.
其中html參數(shù)是一個HTML字符串, 在jQuery1.3.2中對此函數(shù)做了改進:
當(dāng)HTML字符串是沒有屬性的元素是, 內(nèi)部使用document.create
