萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 從零開始學習jQuery (三) 管理jQuery包裝集
從零開始學習jQuery (三) 管理jQuery包裝集
一.摘要
我們經常使用javascript動態的創建元素, 有很多程序員通過直接更改某一個容器的HTML內容.比如:
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>動態創建對象<title>
<head>
<body>
<div id="testDiv">測試圖層<div>
<script type="text/javascript">
document.getElementById("testDiv").innerHTML = "動態創建的div";
</script>
</body>
</html>
上面的示例中我通過修改testDiv的內容,在頁面上動態的添加了一個div元素. 但是請牢記,這是錯誤的做法!
錯誤的原因:
(1) 在頁面加載時改變了頁面的結構. 在IE6中如果網絡變慢或者頁面內容太大就會出現"終止操作"的錯誤. 也就是說"永遠不要在頁面加載時改變頁面的Dom模型".
(2) 使用修改HTML內容添加元素, 不符合Dom標准. 在實際工作中也碰到過使用這種方法修改內容後, 某些浏覽器中並不能立刻顯示添加的元素, 因為不同浏覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement創建對象, 在所有的浏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個完整的HTML字符串, 內部也是使用innerHTML. 所以也不是完全否定innerHTML函數的使用.
所以從現在開始請摒棄這種舊知識, 使用下面介紹的正確方法編程.
2.創建新的元素
下面介紹兩種正確的創建元素的方式.
(1)使用HTML DOM創建元素
什麼是 DOM？
通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
在 1998 年，W3C 發布了第一級的 DOM 規范。這個規范允許訪問和操作 HTML 頁面中的每一個單獨的元素。
所有的浏覽器都執行了這個標准，因此，DOM 的兼容性問題也幾乎難覓蹤影了。
DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。
DOM 被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：
- Core DOM
- 定義了一套標准的針對任何結構化文檔的對象
- XML DOM
- 定義了一套標准的針對 XML 文檔的對象
- HTML DOM
- 定義了一套標准的針對 HTML 文檔的對象。
關於使用HTML DOM創建元素本文不做詳細介紹, 下面舉一個簡單的例子:
//使用Dom標准創建元素
var select = document.createElement("select");
select.options[0] = new Option("加載項1", "value1");
select.options[1] = new Option("加載項2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
通過使用 document.createElement 方法我們可以創建Dom元素, 然後通過appendChild方法為添加到指定對象上.
(2) 使用jQuery函數創建元素
在jQuery中創建對象更加簡單, 比如創建一個Div元素:
$("
動態創建的div
")
我們主要使用jQuery核心類庫中的一個方法:
jQuery( html, ownerDocument )
Returns: jQuery
根據HTML原始字符串動態創建Dom元素.
其中html參數是一個HTML字符串, 在jQuery1.3.2中對此函數做了改進:
當HTML字符串是沒有屬性的元素是, 內部使用document.createElement創建元素, 比如:
//jQuery內部使用document.createElement創建元素:
$("
").css("border","solid 1px #FF0000").html("動態創建的div").appendTo(testDiv);
否則使用innerHTML方法創建元素:
//jQuery內部使用innerHTML創建元素:
$("
動態創建的div
").appendTo(testDiv)
3.將元素添加到對象上
我們可以使用上面兩種方式創建一個而元素, 但是上面已經提到一定不要在頁面加載時就改變頁面的DOM結構, 比如添加一個元素. 正確的做法是在頁面加載完畢後添加或刪除元素.
傳統上, 使用window.onload完成上述目的:
//DOM加載完畢後添加元素
//傳統方法
window.onload = function() { testDiv.innerHTML = "
動態創建的div
"; }
雖然能夠在DOM完整加載後, 在添加新的元素, 但是不幸的是浏覽器執行window.onload函數不僅僅是在構建完DOM樹之後, 也是在所有圖像和其他外部資源完整的加載並且在浏覽器窗口顯示完畢之後. 所以如果某個圖片或者其他資源加載很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片加載之前就執行了需要依賴動態添加的元素的腳本而導致腳本錯誤.
解決辦法就是等DOM被解析後, 在圖像和外部資源加載之前執行我們的函數.在jQuery中讓這一實現變得可行:
//jQuery 使用動態創建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "
使用動態創建的$(document).ready(function)方法
"; }
);
或者使用簡便語法:
//jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "
使用$(function)方法
"; }
);
使用$()將我們的函數包裝起來即可. 而且可以在一個頁面綁定多個函數, 如果使用傳統的window.onload則只能調用一個函數.
所以請大家將修改DOM的函數使用此方法調用. 另外還要注意document.createElement和innerHTML的區別. 如果可以請盡量使用document.createElement和$("
")的形式創建對象.四.管理jQuery包裝集元素
名稱 說明 舉例 eq( index ) 獲取第N個元素 獲取匹配的第二個元素:$("p").eq(1) filter( expr )
篩選出與指定表達式匹配的元素集合。
保留帶有select類的元素:$("p").filter(".selected") filter( fn )
篩選出與指定函數返回值匹配的元素集合
這個函數內部將對每個對象計算一次 (正如 '$.each'). 如果調用的函數返回false則這個元素被刪除，
