從零開始學習jQuery (三) 管理jQuery包裝集

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html"></a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html">從零開始學習jQuery (一) 開天辟地入門篇</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html">從零開始學習jQuery (二) 萬能的選擇器</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/04/jQuery-Learn-3.html">從零開始學習jQuery (三) 管理jQuery包裝集</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/05/jQuery-Learn-4.html">從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html">從零開始學習jQuery (五) 事件與事件對象</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jQuery-Learn-6.html">從零開始學習jQuery (六) jQuery中的Ajax</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/11/jQuery-Learn-7.html">從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-8.html">從零開始學習jQuery (八) 插播:jQuery實施方案</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-9.html">從零開始學習jQuery (九) jQuery工具函數</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-10.html">從零開始學習jQuery (十) jQueryUI常用功能實戰</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/22/jQuery-Learn-11.html">從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-9.html"></a>

在使用jQuery選擇器擷取到jQuery包裝集後, 我們需要對其進行操作. 本章首先講解如何動态的建立元素, 接着學習如何管理jQuery包裝集, 比如添加,删除,切片等.

本系列的2,3篇上面列舉了太多的API相信大家看着眼暈. 不過這些基礎還必須要講, 基礎要紮實.其實對于這些清單大家可以跳過, 等以後用到時再回頭看或者查詢官方的API說明.

本章内容很少, 主要講解動态建立元素和操作jQuery包裝集的各個函數.

我們經常使用javascript動态的建立元素, 有很多程式員通過直接更改某一個容器的HTML内容.比如:

上面的示例中我通過修改testDiv的内容,在頁面上動态的添加了一個div元素. 但是請牢記,這是錯誤的做法!

錯誤的原因:

(1) 在頁面加載時改變了頁面的結構. 在IE6中如果網絡變慢或者頁面内容太大就會出現"終止操作"的錯誤. 也就是說"永遠不要在頁面加載時改變頁面的Dom模型".

(2) 使用修改HTML内容添加元素,  不符合Dom标準. 在實際工作中也碰到過使用這種方法修改内容後, 某些浏覽器中并不能立刻顯示添加的元素, 因為不同浏覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement建立對象, 在所有的浏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個完整的HTML字元串, 内部也是使用innerHTML. 是以也不是完全否定innerHTML函數的使用.

是以從現在開始請摒棄這種舊知識, 使用下面介紹的正确方法程式設計.

下面介紹兩種正确的建立元素的方式.

什麼是 DOM？

通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。

要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行通路的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。

在 1998 年，W3C 釋出了第一級的 DOM 規範。這個規範允許通路和操作 HTML 頁面中的每一個單獨的元素。

所有的浏覽器都執行了這個标準，是以，DOM 的相容性問題也幾乎難覓蹤影了。

DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。

<dl></dl>

<dt>Core DOM </dt>

<dd>定義了一套标準的針對任何結構化文檔的對象 </dd>

<dd>定義了一套标準的針對 XML 文檔的對象 </dd>

<dt>HTML DOM </dt>

<dd>定義了一套标準的針對 HTML 文檔的對象。 </dd>

關于使用HTML DOM建立元素本文不做詳細介紹, 下面舉一個簡單的例子:

通過使用 document.createElement 方法我們可以建立Dom元素, 然後通過appendChild方法為添加到指定對象上.

在jQuery中建立對象更加簡單, 比如建立一個Div元素:

我們主要使用jQuery核心類庫中的一個方法:

<b>Returns:</b> jQuery

根據HTML原始字元串動态建立Dom元素.

其中html參數是一個HTML字元串,  在jQuery1.3.2中對此函數做了改進:

當HTML字元串是沒有屬性的元素是, 内部使用document.createElement建立元素, 比如:

否則使用innerHTML方法建立元素:

我們可以使用上面兩種方式建立一個而元素, 但是上面已經提到一定不要在頁面加載時就改變頁面的DOM結構, 比如添加一個元素. 正确的做法是在頁面加載完畢後添加或删除元素.

傳統上, 使用window.onload完成上述目的:

雖然能夠在DOM完整加載後, 在添加新的元素, 但是不幸的是浏覽器執行window.onload函數不僅僅是在建構完DOM樹之後, 也是在所有圖像和其他外部資源完整的加載并且在浏覽器視窗顯示完畢之後. 是以如果某個圖檔或者其他資源加載很長時間, 通路者就會看到一個不完整的頁面, 甚至在圖檔加載之前就執行了需要依賴動态添加的元素的腳本而導緻腳本錯誤.

解決辦法就是等DOM被解析後, 在圖像和外部資源加載之前執行我們的函數.在jQuery中讓這一實作變得可行:

或者使用簡便文法:

使用$()将我們的函數包裝起來即可. 而且可以在一個頁面綁定多個函數, 如果使用傳統的window.onload則隻能調用一個函數.

是以請大家将修改DOM的函數使用此方法調用. 另外還要注意document.createElement和innerHTML的差別. 如果可以請盡量使用document.createElement和$("&lt;div/&gt;")的形式建立對象.

既然學會了動态建立元素, 接下來就會想要把這些元素放入我們的jQuery包裝集中.

我們可以在jQuery包裝集上調用下面這些函數, 用來改變我們的原始jQuery包裝集, 并且大部分傳回的都是過濾後的jQuery包裝集.

jQuery提供了一系列的函數用來管理包裝集:

名稱

說明

舉例

擷取第N個元素

擷取比對的第二個元素:

$("p").eq(1)

篩選出與指定表達式比對的元素集合。

保留帶有select類的元素:

$("p").filter(".selected")

篩選出與指定函數傳回值比對的元素集合

這個函數内部将對每個對象計算一次 (正如 '$.each'). 如果調用的函數傳回false則這個元素被删除，否則就會保留。

保留子元素中不含有ol的元素:

$("div").filter(function(index) {

  return $("ol", this).size() == 0;

});

注意: 這個函數傳回的不是jQuery包裝集而是Boolean值

用一個表達式來檢查目前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就傳回true。

如果沒有元素符合，或者表達式無效，都傳回'false'. 'filter' 内部實際也是在調用這個函數，是以，filter()函數原有的規則在這裡也适用。

由于input元素的父元素是一個表單元素，是以傳回true:

$("input[type='checkbox']").parent().is("form")

将一組元素轉換成其他數組（不論是否是元素數組）

你可以用這個函數來建立一個清單，不論是值、屬性還是CSS樣式，或者其他特别形式。這都可以用'$.map()'來友善的建立

把form中的每個input元素的值建立一個清單:

$("p").append( $("input").map(function(){

  return $(this).val();

}).get().join(", ") );

删除與指定表達式比對的元素

從p元素中删除帶有 select 的ID的元素:

$("p").not( $("#selected")[0] )

選取一個比對的子集

選擇第一個p元素:

$("p").slice(0, 1);

把與表達式比對的元素添加到jQuery對象中。這個函數可以用于連接配接分别與兩個表達式比對的元素結果集。

動态生成一個元素并添加至比對的元素中:

$("p").add("&lt;span&gt;Again&lt;/span&gt;")

取得一個包含比對的元素集合中每一個元素的所有子元素的元素集合。

可以通過可選的表達式來過濾所比對的子元素。注意：parents()将查找所有祖輩元素，而children()隻考慮子元素而不考慮所有後代元素。

查找DIV中的每個子元素:

$("div").children()

取得與表達式比對的最新的父元素

為事件源最近的父類li對象更換樣式:

$(document).bind("click", function (e) {

  $(e.target).closest("li").toggleClass("hilight");

查找比對元素内部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔内容

查找所有文本節點并加粗:

$("p").contents().not("[nodeType=1]").wrap("&lt;b/&gt;");

搜尋所有與指定表達式比對的元素。這個函數是找出正在處理的元素的後代元素的好方法。

所有搜尋都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器文法來寫。

從所有的段落開始，進一步搜尋下面的span元素。與$("p span")相同:

$("p").find("span")

取得一個包含比對的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

這個函數隻傳回後面那個緊鄰的同輩元素，而不是後面所有的同輩元素（可以使用nextAll）。可以用一個可選的表達式進行篩選。

找到每個段落的後面緊鄰的同輩元素:

$("p").next()

查找目前元素之後所有的同輩元素。

可以用表達式過濾

給第一個div之後的所有元素加個類:

$("div:first").nextAll().addClass("after");

傳回第一個有定位的父類(比如(relative或absolute)).

取得一個包含着所有比對元素的唯一父元素的元素集合。

你可以使用可選的表達式來篩選。

查找每個段落的父元素:

$("p").parent()

取得一個包含着所有比對元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。

找到每個span元素的所有祖先元素:

$("span").parents()

取得一個包含比對的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

可以用一個可選的表達式進行篩選。隻有緊鄰的同輩元素會被比對到，而不是前面所有的同輩元素。

找到每個段落緊鄰的前一個同輩元素:

$("p").prev()

查找目前元素之前所有的同輩元素

可以用表達式過濾。

給最後一個之前的所有div加上一個類:

$("div:last").prevAll().addClass("before");

取得一個包含比對的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。

找到每個div的所有同輩元素:

$("div").siblings()

3.串聯 Chaining

加入先前所選的加入目前元素中

對于篩選或查找後的元素，要加入先前所選元素時将會很有用。

選取所有div以及内部的p，并加上border類:

$("div").find("p").andSelf().addClass("border");

回到最近的一個"破壞性"操作之前。即，将比對的元素清單變為前一次的狀态。

如果之前沒有破壞性操作，則傳回一個空集。所謂的"破壞性"就是指任何改變所比對的jQuery元素的操作。這包括在 Traversing 中任何傳回一個jQuery對象的函數--'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()

[待續]

本篇文章内容較少, 主要講解如何動态建立元素以及管理jQuery包裝集, 接口文檔列舉了太多,  執行個體部分還沒來得及寫. 因為要睡覺明天還要上班, 是以請各位見諒, 等以後有空的時候補上!