從零開(kāi)始學(xué)習(xí)jQuery_第1頁(yè)
從零開(kāi)始學(xué)習(xí)jQuery_第2頁(yè)
從零開(kāi)始學(xué)習(xí)jQuery_第3頁(yè)
從零開(kāi)始學(xué)習(xí)jQuery_第4頁(yè)
從零開(kāi)始學(xué)習(xí)jQuery_第5頁(yè)
已閱讀5頁(yè)，還剩2頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、從零開(kāi)始學(xué)習(xí)iQu©ry (三)管理jQuew包裝集一 摘要在使用jQuery選擇器扶取到j(luò)Query包裝集后，我們需要對(duì)其進(jìn)行操作.木萃首先講解如何動(dòng)態(tài)的創(chuàng)建元 素接著學(xué)習(xí)如何管理JQuery包裝集，比如添加，刪除，切片等.二前言木系列的2,3篇上面列舉r太多的API相信大家看著眼暈不過(guò)這些基礎(chǔ)還必須要講，基礎(chǔ)要扎實(shí)其實(shí)對(duì) 于這些列表大家可以跳過(guò)，等以后用到時(shí)再回頭看或者盤詢官方的API說(shuō)明.木章內(nèi)容很少，主要講解動(dòng)態(tài)創(chuàng)建元素和操作jQuery包裝集的符個(gè)函數(shù).三動(dòng)態(tài)創(chuàng)建元素錯(cuò)誤的編程方法我們經(jīng)常便用javascript動(dòng)態(tài)的創(chuàng)建元素，有很多程序員通過(guò)直接更改某一個(gè)容器的HTML內(nèi)

2、容比如:<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN*"http:/WWW.w3org/TR/xhtmll/DTD/xhtmll-transitionaldtd "><html xmlns="http:/wwww3org/1999/xhtml"><head><title>動(dòng)態(tài)創(chuàng)建對(duì)象</title></head><body><div id="testDiv">

3、測(cè)試圖層</div><script type="text/javascript">document.getElementById("testDiv")innerHTML = "<div style=*'border:solid Ipx #FF0000">動(dòng)態(tài)創(chuàng)建的 div</div>" </script></body></html>上面的示例中我通過(guò)修改testDiv的內(nèi)容，在貞而上動(dòng)態(tài)的添加了一個(gè)div元素但是請(qǐng)牢記，這是錯(cuò)誤的做

4、法！錯(cuò)誤的原W:(1)在貞面加栽時(shí)改變了頁(yè)面的結(jié)構(gòu).在IE6中如果網(wǎng)絡(luò)變慢或者貞面內(nèi)容太大就會(huì)出現(xiàn)“終止操作'的錯(cuò) 渓.也就是說(shuō)'永遠(yuǎn)不要在貞面加載時(shí)改變貞面的Dom模型”.(2)使用修改HTML內(nèi)容添加元素，不符合Dom標(biāo)準(zhǔn).在實(shí)際工作中也碰到過(guò)使用這種方法修改內(nèi)容后, 某些瀏覽器中并不能立刻顯示添加的元素，W為不同瀏覽器的顯示引擎是不同的.但是如果我們使川 Dom的CreateElement創(chuàng)建對(duì)紀(jì) 在所有的瀏覽器中幾乎都可以但是在jQuery巾如果傳入的而是一 個(gè)完整的HTML字符串，內(nèi)部也是使川innerHTML.所以也不是完全否定innerHTML函數(shù)的使用 所以從現(xiàn)

5、在開(kāi)始請(qǐng)摒齊這種舊知識(shí)，使川下面介紹的正確方法編程.2創(chuàng)建新的元素下面介紹兩種正確的創(chuàng)建元素的方式(1)使用HTML DOM創(chuàng)建元素什么是DOM?通過(guò)JavaScript,您可以重構(gòu)整個(gè)HTML文檔。您可以添加、移除、改變或重排頁(yè)而上的項(xiàng)目。契改變貞面的某個(gè)東西JavaScript就需要對(duì)HTML文檔中所有元素進(jìn)行訪問(wèn)的入口。這個(gè)入口.連同 對(duì)HTML元素進(jìn)行添加、移動(dòng)、改變或移除的方法和屬性.都是通過(guò)文檔對(duì)彖模型來(lái)獲得的(DOM) °在1998年.W3C發(fā)布了第一級(jí)的DOM規(guī)范。這個(gè)規(guī)范允許訪問(wèn)和操作HTML貞面中的每一個(gè)單獨(dú) 的元素C 所有的瀏覽器都執(zhí)行了這個(gè)標(biāo)準(zhǔn) W此DOM的兼

6、容性問(wèn)題也幾乎難覓蹤影了。DOM可被JavaScript用來(lái)讀取、改變HTML、XHTML以及XML文檔。DOM被分為不同的部分(核心、XMLS HTML)和級(jí)別(DOM Level 1/2/3)：Core DOM定義了一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)荻XML DOM定義了一奩標(biāo)準(zhǔn)的針對(duì)XML文榔的對(duì)欽HTML DOM定義了一金標(biāo)準(zhǔn)的針對(duì)HTML文檔的對(duì)彖0關(guān)于便川HTML DOM創(chuàng)建元素木文不做詳細(xì)介紹，下ihi舉一個(gè)簡(jiǎn)單的例子:使用Dom標(biāo)準(zhǔn)創(chuàng)鎧元素var select = document.createElement("select"); select options

7、O = new Option("加載項(xiàng) 1", "valuel"); selectoptionsl = new Option("加載項(xiàng) 2”，"value2"); select.size = "2"var object = testDiv.appendChild(select);通過(guò)使川document.createElement方法我們可以創(chuàng)建Dom兀素，然后通過(guò)appendChild方法為添 加到指定對(duì)欽上(2)使用jQuery函數(shù)創(chuàng)建元索在jQuery中創(chuàng)建對(duì)彖E加簡(jiǎn)0,比如創(chuàng)建一個(gè)Div元素:$(

8、"<div style="border:solid Ipx #FF0000">動(dòng)態(tài)創(chuàng)建的 div</div>")我們主要使川jQuery核心類庫(kù)中的一個(gè)方法：iOueryf htmh ownerDocument)Returns: jQuery根據(jù)HTML碌始字符串動(dòng)態(tài)創(chuàng)建Dom元素«中html參數(shù)是一個(gè)HTML字符串，在jQueryl3.2中對(duì)此函數(shù)做r改進(jìn): 嚴(yán)I HTML字符串是沒(méi)有屬性的元素是，內(nèi)部使用document.createElement創(chuàng)建元素，比如:/jQuery 內(nèi)部使用 document creat

9、eElement 創(chuàng)建元素： $C<div/>").css("border"/'solid Ipx #FF0000*) .htmlC 動(dòng)態(tài) 創(chuàng)建丫內(nèi) div") appendTo(testDiv);否則使/tJ innerHTML方法創(chuàng)建元素:/jQuery內(nèi)部使用innerHTML創(chuàng)建元素：$("<div style="border:solid Ipx #FF0000">動(dòng)態(tài)創(chuàng)建的 div</div>")appendTo(testDiv);3將元素添加到對(duì)象上我們可以使

10、川上面兩種方式創(chuàng)建一個(gè)而元素，但是上面已經(jīng)提到一定不要在頁(yè)面加載時(shí)就改變貞面的 DOM結(jié)構(gòu)，比如添加一個(gè)元素.正確的做法是在頁(yè)面加載完畢后添加或刪除元素傳統(tǒng)上，便用window.onload完成上述目的:/DOM加載完畢后添加元素傳統(tǒng)方法window.onload = function() testDiv.innerHTML = "<div style="border: solid Ipx #FF0000">動(dòng)態(tài)創(chuàng)建的 div</div>" 雖然能夠在DOM完整加載后，在添加新的元素，但是不舉的是瀏覽器執(zhí)行window.onloa

11、d函數(shù)不僅僅是 在構(gòu)建完DOM樹(shù)之后，也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.所 以如果某個(gè)圖片或者其他資源加載很長(zhǎng)時(shí)間，訪問(wèn)者就會(huì)看到一個(gè)不完整的urifii；甚至在圖片加載之前就 執(zhí)行r需要依賴動(dòng)態(tài)添加的元素的腳木而導(dǎo)致腳木錯(cuò)謀解決辦法就是等DOM被解析后，在圖像和外部資源加裁之前執(zhí)行我們的函數(shù)在jQuery中讓這一實(shí)現(xiàn)變 得可行：/jQuery 使用動(dòng)態(tài)創(chuàng)建的 (document) * ready (function)方法 (document)ready(function0 testDiv.innerHTML = "<div style=&qu

12、ot;border:solid Ipx #FF0000">使用動(dòng)態(tài)創(chuàng)建的 $(docunient) ready(function)方法</div>" 或者便川簡(jiǎn)便語(yǔ)法:/jQuery 使用$(function)方法 $(function() testDiv.innerHTML += "<div style="border:solid Ipx #FF0000">使用(function)方法 </div>" 使川$()將我們的函數(shù)包裝起來(lái)即可.而且可以在一個(gè)頁(yè)而綁定鄉(xiāng)個(gè)函數(shù)，如果使用傳統(tǒng)的 win

13、dow.onload則只能調(diào)用一個(gè)函數(shù).所以請(qǐng)大家將修改DOM的函數(shù)使用此方法調(diào)用.另外還嬰注意documentxreateElement 111innerHTML的區(qū)別.如果可以請(qǐng)盡雖使用document.createElement和$("<div/>")的形式創(chuàng)建對(duì)紀(jì)四管理jQuery包裝集元素既然學(xué)會(huì)了動(dòng)態(tài)創(chuàng)建元素，接下來(lái)就會(huì)想嬰把這些元素放入我們的jQuery包裝集中 我們可以在jQuery包裝集上調(diào)用下面這些函數(shù)，用來(lái)改變我們的原始jQuery包裝集，并且大部分返回的 都是過(guò)濾后的jQuery包裝集jQuery提供了一系列的函數(shù)用來(lái)管理包裝集:1過(guò)濾

14、Filtering名稱說(shuō)明舉例eq( index)獲取第N個(gè)元素獲収匹配的第二個(gè)元素：$("p").eq ilterf expr)篩選出與抬定表達(dá)式匹配的元素集合。保留帶有sebct類的元素： $"p"|-filter(selected"|ilterf fn)篩選出與抬定函數(shù)返回值匹配的元素集合送個(gè)函數(shù)內(nèi)部將對(duì)每個(gè)對(duì)象計(jì)算-次(正如 each*).如果調(diào)用的函數(shù)返回false則這 個(gè)元素被劇除，否則就會(huì)保留。保留子元素中不含冇01的元素： $<*div*). filter (function (index) return $C*ol*,

15、this), size()»):is( expr)注意：這個(gè)函數(shù)返回的不是jQuery包裝集而 迪 Boolean 值出一個(gè)表達(dá)式來(lái)檢査!前選擇的元素集合， 如果其中至少有一個(gè)元素符合這個(gè)給定的表 達(dá)式就返回true.如果沒(méi)有元素符合或者表達(dá)式無(wú)效，都返 false', 'filter'內(nèi)部實(shí)際也是在調(diào)用 送個(gè)函數(shù)，所以.filter0函數(shù)原有的規(guī)則 在這里也適用。由于input冗素的父元素是一個(gè)表W $rinp uttype='checkboxT*),parent|jmapf callback)將一組元素轉(zhuǎn)換成其他數(shù)組(不論是否是元 素?cái)?shù)組你可以用這

16、個(gè)函數(shù)來(lái)建立一個(gè)列表.不論是把form中的每個(gè)input兀素的值建 S<*p*). append( $Cinput*). map(f return $ (this), val();(fl.屬性還是CSS樣式，或者其他特別形式。 這都可以用'$IMp()'來(lái)方便的建立J). get (). join(*» ):riot( expr)W除與指定表達(dá)式匹配的元素從P元素中8W除帶有select的ID ft*$("p*inot( $C*#selectd")tOJ)ilice( start, end )進(jìn)取一個(gè)匹配的子集選擇第一個(gè)p元素： 岸 p

17、9;slice© 1);2査找 Finding名稱說(shuō)明舉例add( expr)K與表達(dá)式匹配的元素添加到j(luò)Ouery對(duì)象 中-這個(gè)函數(shù)可以用于連接分別與兩個(gè)表達(dá) 式匹配的元素結(jié)果集。動(dòng)態(tài)生成一個(gè)元素并添加至匹配的力 $("p*j,add("<span>Again</span>'*|children! lexprl)取得一個(gè)包含匹配的元素集合中每一個(gè)元素 的所有子元素的元素集合。對(duì)以通過(guò)可選的表達(dá)式來(lái)過(guò)濾所匹配的子元 parents()將査找所有祖輩元素， 而childrenO只考慮子元素而不考慮所有后 代元素。件找DW中的每個(gè)子元素

18、：$C*div")xhildren)clo$e$t( expri 1収得與表達(dá)式匹配的最新的父元素為爭(zhēng)件源最近的父婁li對(duì)氟更換樣 $(document) bind("click*» funct$(e target), closest. to»):contentsf)査找匹配元素內(nèi)部所有的子節(jié)點(diǎn)(包括文木 卩點(diǎn))。如果元素是一個(gè)iframe,則査找文檔 內(nèi)容査找所有文本節(jié)點(diǎn)并加粗：$"p"|xontents|,not"tnodType=lJ")-ind(expr1®索所有與指定表達(dá)式匹配的元素。這個(gè)函 數(shù)

19、是找出正在處理的元素的后代元素的好方 法.所有搜索都依釜jOuery表達(dá)式來(lái)完成。這個(gè) 農(nóng)達(dá)式可以使川CSS1-3的選擇器語(yǔ)法來(lái)寫。從所有的段落開(kāi)始進(jìn)一步搜索下面 相同：$(>"'|,find("span")next( lexprl 1取得一個(gè)包含匹配的元素集合中每一個(gè)元素 緊鄰的后面同輩元素的元素集合。送個(gè)函數(shù)只返回后面那個(gè)緊鄰的同輩元素， 而不是后面所有的同輩元素(可以使用 lextAll).可以用一個(gè)可選的表達(dá)式進(jìn)行篩 !£找到毎個(gè)段落的后面緊鄰的同輩元矣 $(0)rwxtOnextAlK fexpri 1査找十前元素之后所有的同輩元

20、素?？梢杂帽磉_(dá)式過(guò)濾給第一個(gè)div之后的所有元素加個(gè)類 $rdiv:first”)rwxtAll()addC3ssCSfUrJoffsetParentf)返回第一個(gè)有定位的父類(比如(relative或 absolute),>arent( fexpri)馭得一個(gè)包含著所有匹配元素的唯一父元素 的元素集合。你可以使用可選的表達(dá)式來(lái)篩選C代找毎個(gè)段落的父元素：5(p')pa 館 ntO>drent$( fexpri 1収得一個(gè)包含著僑有匹配元素的祖托元素的 元素集合(不包含根元素人可以通過(guò)一個(gè)可 進(jìn)的表達(dá)式進(jìn)行篩選。找到毎個(gè)span冗素的僑有祖先元素:$'*span*').parnts()>rev( fexpri)収得一個(gè)包含匹配的元素集合中每一個(gè)元素 緊鄰的前一個(gè)同輩元素的元素集合?？梢杂靡粋€(gè)可選的表達(dá)式進(jìn)行篩選。只有緊 鄰的同輩元素會(huì)被匹配到而不是前面所有 的同輩元素。找到毎個(gè)段落緊鄰的前一個(gè)同輩元語(yǔ) 岸 p").prev()>revAll( lexprl)査找十前元素之前所有的同輩元素 可以用表達(dá)式過(guò)濾。給最后一個(gè)之前的所有div

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論