從零開始學習jQuery之管理jQuery包裝集
系列文章：
本章內(nèi)容很少, 主要講解動態(tài)創(chuàng)建元素和操作jQuery包裝集的各個函數(shù).
一.動態(tài)創(chuàng)建元素
1.錯誤的編程方法
我們經(jīng)常使用javascript動態(tài)的創(chuàng)建元素, 有很多程序員通過直接更改某一個容器的HTML內(nèi)容.比如:
- view plaincopy to clipboardprint?
- <!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)"終止操作"的錯誤. 也就是說"永遠不要在頁面加載時改變頁面的Dom模型".
(2) 使用修改HTML內(nèi)容添加元素, 不符合Dom標準. 在實際工作中也碰到過使用這種方法修改內(nèi)容后, 某些瀏覽器中并不能立刻顯示添加的元素, 因為不同瀏覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement創(chuàng)建對象, 在所有的瀏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個完整的HTML字符串, 內(nèi)部也是使用innerHTML. 所以也不是完全否定innerHTML函數(shù)的使用.
所以從現(xiàn)在開始請摒棄這種舊知識, 使用下面介紹的正確方法編程.
2.創(chuàng)建新的元素
下面介紹兩種正確的創(chuàng)建元素的方式.
(1)使用HTML DOM創(chuàng)建元素
什么是 DOM?
通過 JavaScript，您可以重構(gòu)整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的(DOM)。
在 1998 年，W3C 發(fā)布了第一級的 DOM 規(guī)范。這個規(guī)范允許訪問和操作 HTML 頁面中的每一個單獨的元素。
所有的瀏覽器都執(zhí)行了這個標準，因此，DOM 的兼容性問題也幾乎難覓蹤影了。
DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。
DOM 被分為不同的部分(核心、XML及HTML)和級別(DOM Level 1/2/3)：
Core DOM
定義了一套標準的針對任何結(jié)構(gòu)化文檔的對象
XML DOM
定義了一套標準的針對 XML 文檔的對象
HTML DOM
定義了一套標準的針對 HTML 文檔的對象。
關(guān)于使用HTML DOM創(chuàng)建元素本文不做詳細介紹, 下面舉一個簡單的例子:
- view plaincopy to clipboardprint?
- //使用Dom標準創(chuàng)建元素
- 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 方法我們可以創(chuàng)建Dom元素, 然后通過appendChild方法為添加到指定對象上.
(2) 使用jQuery函數(shù)創(chuàng)建元素
在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ù)做了改進:
當HTML字符串是沒有屬性的元素是, 內(nèi)部使用document.createElement創(chuàng)建元素, 比如:
- view plaincopy to clipboardprint?
- //jQuery內(nèi)部使用document.createElement創(chuàng)建元素:
- $("<div/>").css("border","solid 1px #FF0000").html("動態(tài)創(chuàng)建的div").appendTo(testDiv);
否則使用innerHTML方法創(chuàng)建元素:
- view plaincopy to clipboardprint?
- //jQuery內(nèi)部使用innerHTML創(chuàng)建元素:
- $("<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的div</div>").appendTo(testDiv);
3.將元素添加到對象上
我們可以使用上面兩種方式創(chuàng)建一個而元素, 但是上面已經(jīng)提到一定不要在頁面加載時就改變頁面的DOM結(jié)構(gòu), 比如添加一個元素. 正確的做法是在頁面加載完畢后添加或刪除元素.
傳統(tǒng)上, 使用window.onload完成上述目的:
- view plaincopy to clipboardprint?
- //DOM加載完畢后添加元素
- //傳統(tǒng)方法
- window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的div</div>"; }
雖然能夠在DOM完整加載后, 在添加新的元素, 但是不幸的是瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后. 所以如果某個圖片或者其他資源加載很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片加載之前就執(zhí)行了需要依賴動態(tài)添加的元素的腳本而導致腳本錯誤.
解決辦法就是等DOM被解析后, 在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實現(xiàn)變得可行:
- view plaincopy to clipboardprint?
- //jQuery 使用動態(tài)創(chuàng)建的$(document).ready(function)方法
- $(document).ready(
- function() { testDiv.innerHTML =
- "<div style=\"border:solid 1px #FF0000\">使用動態(tài)創(chuàng)建的$(document).ready(function)方法</div>"; }
- );
- //或者使用簡便語法:
- //jQuery 使用$(function)方法
- $(
- function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
- );
使用$()將我們的函數(shù)包裝起來即可. 而且可以在一個頁面綁定多個函數(shù), 如果使用傳統(tǒng)的window.onload則只能調(diào)用一個函數(shù).
所以請大家將修改DOM的函數(shù)使用此方法調(diào)用. 另外還要注意document.createElement和innerHTML的區(qū)別. 如果可以請盡量使用document.createElement和$(""<div/>"")的形式創(chuàng)建對象.
#p#
三.管理jQuery包裝集元素
既然學會了動態(tài)創(chuàng)建元素, 接下來就會想要把這些元素放入我們的jQuery包裝集中.
我們可以在jQuery包裝集上調(diào)用下面這些函數(shù), 用來改變我們的原始jQuery包裝集, 并且大部分返回的都是過濾后的jQuery包裝集.
jQuery提供了一系列的函數(shù)用來管理包裝集:
1.過濾 Filtering
| 名稱 | 說明 | 舉例 |
| eq( index ) | 獲取第N個元素 | 獲取匹配的第二個元素: $("p").eq(1) |
| filter( expr ) | 篩選出與指定表達式匹配的元素集合。 | 保留帶有select類的元素: $("p").filter(".selected") |
| filter( fn ) | 篩選出與指定函數(shù)返回值匹配的元素集合
這個函數(shù)內(nèi)部將對每個對象計算一次 (正如 '$.each'). 如果調(diào)用的函數(shù)返回false則這個元素被刪除，否則就會保留。 |
保留子元素中不含有ol的元素: $("div").filter(function(index) { return $("ol", this).size() == 0; }); |
| is( expr )
注意: 這個函數(shù)返回的不是jQuery包裝集而是Boolean值 |
用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。
如果沒有元素符合，或者表達式無效，都返回'false'. 'filter' 內(nèi)部實際也是在調(diào)用這個函數(shù)，所以，filter()函數(shù)原有的規(guī)則在這里也適用。 |
由于input元素的父元素是一個表單元素，所以返回true: $("input[type='checkbox']").parent().is("form") |
| map( callback ) | 將一組元素轉(zhuǎn)換成其他數(shù)組（不論是否是元素數(shù)組）
你可以用這個函數(shù)來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用'$.map()'來方便的建立 |
把form中的每個input元素的值建立一個列表: $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); |
| not( expr ) | 刪除與指定表達式匹配的元素 | 從p元素中刪除帶有 select 的ID的元素: $("p").not( $("#selected")[0] ) |
| slice( start, end ) | 選取一個匹配的子集 | 選擇第一個p元素: $("p").slice(0, 1); |
2.查找 Finding
| 名稱 | 說明 | 舉例 |
| add( expr ) | 把與表達式匹配的元素添加到j(luò)Query對象中。這個函數(shù)可以用于連接分別與兩個表達式匹配的元素結(jié)果集。 | 動態(tài)生成一個元素并添加至匹配的元素中: $("p").add("<span>Again</span>") |
| children( [expr] ) | 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。
可以通過可選的表達式來過濾所匹配的子元素。注意：parents()將查找所有祖輩元素，而children()只考慮子元素而不考慮所有后代元素。 |
查找DIV中的每個子元素: $("div").children() |
| closest( [expr] ) | 取得與表達式匹配的最新的父元素 | 為事件源最近的父類li對象更換樣式:
$(document).bind("click", function (e) { |
| contents( ) | 查找匹配元素內(nèi)部所有的子節(jié)點（包括文本節(jié)點）。如果元素是一個iframe，則查找文檔內(nèi)容 | 查找所有文本節(jié)點并加粗: $("p").contents().not("[nodeType=1]").wrap("<b/>"); |
| find( expr ) | 搜索所有與指定表達式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。
所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。 |
從所有的段落開始，進一步搜索下面的span元素。與$("p span")相同: $("p").find("span") |
| next( [expr] ) | 取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。
這個函數(shù)只返回后面那個緊鄰的同輩元素，而不是后面所有的同輩元素（可以使用nextAll）?？梢杂靡粋€可選的表達式進行篩選。 |
找到每個段落的后面緊鄰的同輩元素: $("p").next() |
| nextAll( [expr] ) | 查找當前元素之后所有的同輩元素。
可以用表達式過濾 |
給第一個div之后的所有元素加個類: $("div:first").nextAll().addClass("after"); |
| offsetParent( ) | 返回第一個有定位的父類(比如(relative或absolute)). | |
| parent( [expr] ) | 取得一個包含著所有匹配元素的唯一父元素的元素集合。
你可以使用可選的表達式來篩選。 |
查找每個段落的父元素: $("p").parent() |
| parents( [expr] ) | 取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）?？梢酝ㄟ^一個可選的表達式進行篩選。 | 找到每個span元素的所有祖先元素: $("span").parents() |
| prev( [expr] ) | 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
可以用一個可選的表達式進行篩選。只有緊鄰的同輩元素會被匹配到，而不是前面所有的同輩元素。 |
找到每個段落緊鄰的前一個同輩元素: $("p").prev() |
| prevAll( [expr] ) | 查找當前元素之前所有的同輩元素
可以用表達式過濾。 |
給最后一個之前的所有div加上一個類: $("div:last").prevAll().addClass("before") |
| siblings( [expr] ) | 取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合?？梢杂每蛇x的表達式進行篩選。 | 找到每個div的所有同輩元素: $("div").siblings() |
3.串聯(lián) Chaining
| 名稱 | 說明 | 舉例 |
| andSelf( ) | 加入先前所選的加入當前元素中
對于篩選或查找后的元素，要加入先前所選元素時將會很有用。 |
選取所有div以及內(nèi)部的p，并加上border類: $("div").find("p").andSelf().addClass("border"); |
| end( ) | 回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。
如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數(shù)--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。 |
選取所有的p元素，查找并選取span子元素，然后再回過來選取p元素:
$("p").find("span").end() |
四.總結(jié)
本篇文章內(nèi)容較少, 主要講解如何動態(tài)創(chuàng)建元素以及管理jQuery包裝集, 接口文檔列舉了太多, 實例部分還沒來得及寫. 因為要睡覺明天還要上班, 所以請各位見諒, 等以后有空的時候補上!
博文來源：http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-3.html
【編輯推薦】
