【精品】JQuery學(xué)習(xí)心得

1、/引入包<script type= 1ftext/javascript ">$(document) ready (function ()/$ (1.author 1) addclass (1aut1);$1#selected-plays>li1) addclass(1 horizontal1);$1#selected-plays li:not(horizontal) f) addclass(1 sub-level1); );</script>原樣式: comedieso o all's well thato a dreamo bbbbbbbbbb

2、 tragedieso o macbetlio ccccccccc historieso henry iv parti pail iio henry ivo riclirid ii代碼執(zhí)行會后效果圖為histories o henry iv pail i pail ii o henry ivo riclirid iicomedieso o all *s well thato a dreamo bbbbbbbbbbtragedieso o macbetlio cccccccccpm2.4 xpath選擇符xpath (xml path language, xml路徑語言)是在xml文檔中識別不同

3、元素或者元素值的 一種語言，與css在html文檔中識別元素的方式類似。jquery庫支持一組基本的xpath選擇符， 如果愿意也可以將它們與css選擇符一同使用。而且，在jquery中，無論對什么類型的文檔都可 以使用xpath和css選擇符。在涉及屈性選擇符(auributu selector)時，jquery使用了xpath中的慣例來標(biāo)識屬性，即將屬 性前置一個符號并放在一對方括號中。也就是說，jquery沒有采用css中不夠靈活的屬性選擇符 語法.例如，要選擇所有帶titled性的鏈接，可以使用下面的代碼，此外，方括號在xpath語法中還有另外一種用途，即在不帶師置符號的悄況下，可以用

4、來指 定包含在另一個元素中的元素。例如，我們可以通過下面的選擇符表達式，収得包含一個元素 的所有div元素叭為連接添加樣式要取得所有指向pdf文件的鏈接，需要使用美元符號($)而不是脫字符號(t,來取得所 有帶href屬性并以pdf結(jié)尾的鏈接，相應(yīng)的代碼如下所示：$(document).ready(function()$ (1 a(ohref-mmailto：n 1) .addclass(1mailto1)；$ ( 1 a dhre£$n11 .pdf11 1 ) addclass ( pdf link ););$(1 ahrefa=hmailtoh *).addclass(* ma

5、ilto *);$ ( ,ahref$=".pdf" 1) .addclass('pdf1);/匹配屬性,加入時沒效果,估計改版了,我的版本是jquery-1.532.5自定義選擇符除了css和xpath選擇符之外，jquery還添加了獨有的完全不同的自定義選擇符?？梢哉f， jquery中的多數(shù)自定義選擇符都可以讓我們基于某個標(biāo)準(zhǔn)選出特定的元素。自定義選擇符的語法 與css中的偽類選樣符語法相同，即選樣符以個冒號(：)開頭。例如，我們想要從匹配的帶有 horizontal類的div集合中，選擇第2個項，那么應(yīng)該使用下面的代碼：$('div.horizonta

6、l:eq <1) *)注意，因為javascript數(shù)組采用從0開始的編號方式，所以eq(l)取得的是集合中的第2個元素。 而css則是從1開始的，因此css選擇符$(*div：nth-child(l)，)取得的是作為其父元素第1個子 元素的所有div。交替地為表格行添加樣式j(luò)query庫中的兩個十分有用的自定義選擇符是：odd和:eveno下而，我們就來看一看如何通 過這兩個選擇符為表格添加基本的條紋樣式，針對下面的表格：$ ( 'tr:odd f) addclass(!odd1);$(1tr:even 1) .addclass(1 even 1);乍一看，表格行的背最顏色似乎

7、與我們的意圖相反。但是，與:eq()選擇符一樣，：odd() 和:even()選擇符使用的都是javascript本身的從0開始的編號方式。因此，表格的第1行編號為0 (偶數(shù))，而表格的第2行編號是1 (奇數(shù))，然后依此類推。下面，我們介紹最后一個自定義選擇符。假設(shè)出于某種原因，我們希望突出顯示提到任何一 種henry游戲的所有表格單元。為此，我們所要做的就是在樣式表中添加一個聲明了粗體和紅色 文本的類(.highlight font-weight:bold； color: #f00;然后向jquery代碼中添加一 行代碼，其中使用的是:contains ()選擇符。$(document).r

8、eady(function() $(1tr：odd1) addclass(* odd!)；$(1tr：even') addclass('even1)；$(1td:contains("henry")1)addclass('highlight');)；這樣，在我們可愛的條紋表格中，就能夠看到突出顯示的henry游戲了，如圖26所示。$(1td:contains(n 2 2 2 n) 1) addclass(pdf');想把424農(nóng)單項后血元素都設(shè)宜相同屬性。那么:$ ( 1 td: contains (11424n ) 1) .paren

9、t () . find ( 1 td: gt (0) 1 ) . addclass ( 1 aut1 );(1) 取得包含henry的單元格，然后取得該單元格的所有同輩元素(不僅僅是下一個同輩元 素)。最后添加類：$ (1 td：contains (mhenry11) ) .siblings () .addclass (highlight )；(2) 取得包含henry的單元格，再取得它的父元素，然后找到該元素中包含的所有編號大于0 (0是第1單元格)的單元格。最后添加類：$(1td：contain呂("henry")1)parent()find(td：gt(0)'

10、) addclass(1highlight1)；(3) 取得包含henry的單元格，再取得它的父元素，找到該元素中包含的所有單元格，然后過濾這些單元格排除包含henry的那一個。最后添加類:$ ( td:contains (11 henrym) ) .parent () .find(1 td1) .not (:contains(nhenryw)1) ).addclass(1highlight1)；2.7訪問dom元素所有選擇符表達式和多數(shù)jquery方法都返回一個jquciy對象，而這通常都是我們所希望的,因為jquery對象能夠提供隱式迭代和連綴能力。盡管如此，我們?nèi)匀挥行枰诖a中直接訪問

11、dom元素的時候。例如，可能需要為另一個javascript庫提供一組元素的結(jié)果集合?；蛘撸赡懿坏貌辉L問某個元素的標(biāo)簽名。對于這些少見 但合理的情形，jquery提供了get()方法。要訪hjquery對象引用的第1個dom元素，可以使 用.get (0) o如果需要在循環(huán)中使用dom元素，那么應(yīng)該使用.get (index) o因而，如果想知道 帶有id=w-element«®性的元素的標(biāo)簽名，應(yīng)該使用如下代碼：var mytag = $(1#my'element1)get(0)tagname；為了進一步簡化這些代碼，jquery還為.get()方法提供了一種簡

12、寫方式。比如，可以將 $ ( #my-element *) .get (0)簡寫為$ (' #my-element *) q,也就是說，可以在選擇符后面直接 使用方括號。顯然，這種語法與訪問dom元素數(shù)組很相似，而使用方括號就好像剝掉jquery的包 裝并直接取得這些元素。小案例：點擊按鈕，變換字體$(document)-ready(function()$ ( 1#switcher .button 1) .click(bindbutton););bindbutton=function()$ ( 1 body 1) removeclass();if(thisid=1 switcher-d

13、efault 1)else if(thisid=1switcher-narrow1)$('body1 ) addclass('narrow');else$(1 body 1) .addclass(1 large 1);$ ( 1#switcher button 1) removeclass1 selected1);$(this) addclass(1 selected 1);style sv/itcherdefaultnarrow columnlarge printa christmas carolin prose, being a ghost story of chr

14、istmasby charles dicke nsprefacei have endeavoured in this ghostly little book, to raise the ghost of an idea. which shall not put my readers out of humour with themselves, wrth each other, with the season. or with me. may it haunt their houses pleasantly, and no one wish to lay it.their faithful fr

15、iend and servant,style switcherdefaultnarrow columnlarge printa christmas carolin prose, being a ghost story of christmasby charles dicke nsprefacei have endeavoured in this ghostly little book, to raise the ghost of an idea, which shall not put my readers out of humour with themselves, with each ot

16、her, with the seas on, or with me. may it haunt their houses pleasantly, and no one wish to lay it.their faithful friend and servant,3.3復(fù)合事件jquery中的多數(shù)事件處理方法都會直接響應(yīng)javascript的本地事件。但是，也有少數(shù)出于跨瀏 覽器優(yōu)化和方便性考慮而添加的自定義處理程序。其中，我們前面詳細(xì)討論過的.ready ()方法 就是其中之一。另外，.toggle()和.hover()方法則是另外兩個自定義的事件處理程序。對于 后兩個方法，由于它們截取組

17、合的用戶操作，并且以多個函數(shù)作為響應(yīng)，因此被稱為復(fù)合事件處 理程序。我們這里所說的.toggle ()方法接受兩個參數(shù)，而且這兩個參數(shù)都是函數(shù)。第1次在元素上 電擊會調(diào)用第1個函數(shù)，第2次單擊則會觸發(fā)第2個函數(shù)。此后，這兩個函數(shù)會隨著每一次單擊交i 皆執(zhí)行。有了3ggg()方法，實現(xiàn)我們的可折疊的樣式轉(zhuǎn)換器就非常簡單了：$(document).ready(function()/$(1#switcher h3') .toggle(h3_toggle_lz h3_toggle_2);$('#switcher h31).click(h3_toggleclassf);$(t #swit

18、cher .button!) .click(bindbutton);)；/點擊h3標(biāo)題事件。第二種處理方式h3_toggleclassf=function()$(* #switcher button').toggleclass('hidden');/點擊h3標(biāo)題事件處理函數(shù)1h3_toggle_l=function()/alert ( '11);$(1#switcher button 1) addclass(1 hidden');/點擊h 3標(biāo)題申件處理歯數(shù)2h3_toggle_2=function()/alert(* 2');$('#s

19、witcher button').removeclass('hidden');3.3.2突出顯示可單擊的項在說明基于通常不可單擊的頁面元素處理單擊事件的能力時，我們構(gòu)思的界面中己經(jīng)給出了一些提示按鈕實際上都是活動的。為了改進界面，我們可以為按鈕添加一種翻轉(zhuǎn)狀態(tài)，以 便清楚地表明它們能與鼠標(biāo)進行某種方式的交互：#switcher .hover cursor: pointer;background-color : #afa; $(document)ready(function() button 1) hover(bt_hover_l,bt_hover_2); h31).ho

20、ver(bt_hover_l,bt_hover_2);h3 t) .click(h3_toggleclassf); button 1) .click(bindbutton);/$('#switcher h31).toggle(h3_toggle_l,h3_toggle_2); $('#switcher$('#switcher$ ( ! #switcherbt_hover_l=function()$(this) addclass(1 hover 1);bt_hover_2=function()$(this) removeclass(1 hover 1);style sv/

21、itcherlarge printstyle sv/itcherdefaultnarrow columnlarge print3.4限制和終止事件剛才介紹的mouseout事件的例子，說明有必要對事件的作用范圍進行限制。當(dāng)使 用.click0®處理這種特殊例子時，需要考慮其他一些從空間(阻止事件被發(fā)送到某些元素)或 時間(阻止事件在某個時間發(fā)送)上限制事件的情況。3.4.1阻止事件冒泡我們在前面已經(jīng)舉例說明事件胃泡可能會導(dǎo)致問題的一種情形。為了展示一種.hover ()也幫不上我們的情況，需要改變前面實現(xiàn)的折疊行為。假設(shè)我們希望增大觸發(fā)樣式轉(zhuǎn)換器折疊或擴展的可單擊區(qū)域。一種方案就是將

22、事件處理程序 從標(biāo)簽移至包含它的div元素：$(document)ready(function() $('#switcher)click(function() $(1#switcher button1).toggleclass(1 hiddenf)；)；okb); '這種改變會使樣式轉(zhuǎn)換器的整個區(qū)域都可以通過單擊切換其可見性。而這樣一來就造成了一 個問題，即單擊按鈕會在修改內(nèi)容區(qū)的樣式之后折疊樣式轉(zhuǎn)換器。導(dǎo)致這個問題的原因就是事件最終隱藏按鈕。要解決這個問題，必須訪問事件對象。事件對象是一種javascript結(jié)構(gòu)，它會在元素獲得處理 事件的機會時被傳遞給相應(yīng)的事件處理程序。這

23、個對象中包含著與事件有關(guān)的信息（例如事件發(fā) 生時的鼠標(biāo)指針位置），也提供了可以用來影響事件在dom中傳遞進程的一些方法。為了在處理程序中使用事件對象，需要為函數(shù)添加一個參數(shù)：h3_toggleclassf=function(event)if (event.target=this)$ ( * #switcher .button') toggleclass('hidden');1.事件目標(biāo)現(xiàn)在，事件處理程序中的變量event保存著事件對象。而event.target屬性保存著發(fā)生事件的目標(biāo)元素。這個屬性是dom api中規(guī)定的，但是沒有被所有瀏覽器實現(xiàn)。jquery對這個事

24、 件對象進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。通過北arget,可以確定dom中首先接收到事件的元素（即實際被單擊的元素）。而且，我們知道this引用的是處理事件的dom元素，所以可以編寫下列代碼:$(document)ready(function() $(switcher*)click(function(event) i£ (eventtarget = this) $(* #switcher button1) toggleclass('hidden1)；)；)；此時的代碼確保了被單擊的元素是vdiv id=»switcherm>®

25、,而不是其他后代元素?，F(xiàn)在,單擊按鈕不會再折疊樣式轉(zhuǎn)換器，而單擊邊框則會觸發(fā)折疊操作。但是，單擊標(biāo)簽同樣什么也不會發(fā)生，因為它也是一個后代元素。實際上，我們可以不把檢查代碼放在這里，而是通過修改忙鈕的行為來達到目標(biāo)。/if(eventtarget=this)$(1#switcher .button1) .toggleclass(1 hidden 1); 注釋掉時：點擊按鈕，h3標(biāo)題會隱藏。我們只想要改變字體，而不像訃h3處理函數(shù)調(diào)用。則必須 判斷阻止/點擊h3標(biāo)題事件。第二種處理方式 h3_t oggleclassf=function(event)if (eventtarget=this)$(

26、* #switcher button 1) toggleclass(1 hidden 1);這樣就完成了阻止其他項調(diào)用：2.停止事件傳播事件對象還提供了一個.stoppropagation ()方法，該方法可以完全阻止事件冒泡。 與.target,這個方法也是一種純javascript#性，但在跨瀏覽器的環(huán)境中則無法安全地使用6 不過，只要我們通過jquery來注冊所有的事件處理程序，就可以放心地使用這個方法。下面，我們會刪除剛才添加的檢査語句event.target = this,并在按鈕的單擊處理程序中添加一些代碼:3.4.2移除事件處理程序有時候，我們需要停用以前注冊的一個事件處理程序。

27、可能是因為頁面的狀態(tài)發(fā)生了變化, 導(dǎo)致相應(yīng)的操作不再有必要。處理這種情形的一種典型做法，就是在事件處理程序中使用條件語 句。但是，如果能夠完全移除處理程序顯然更有效率。假設(shè)我們希望樣式轉(zhuǎn)換器在頁面沒有使用正常樣式的情況下保持?jǐn)U展?fàn)顟B(tài)。那么，可以在樣 式轉(zhuǎn)換器中的按鈕被單擊時，調(diào)用.unbindo方法來移除相應(yīng)的事件處理程序。為此，首先要給 作為處理程序的函數(shù)起個名字，以便可以多次調(diào)用這個處理程序：$(document).ready(function () var togglesty1eswitcher = function() $(1#8witcher .button1)>togglec

28、lass(1 hidden1);$(switcher')click(togglestyleswitcher);)；3.5模仿用戶操作有時候，即使某個事件沒有真正發(fā)生，但如果能執(zhí)行綁定到該事件的代碼將會很方便。例如, 假設(shè)我們想讓樣式轉(zhuǎn)換器在一開始時處于折疊狀態(tài)。那么，可以通過樣式來隱藏按鈕，或者在$ (document) . ready ()處理程序中調(diào)用.hide ()方法。不過，還有一種方法，就是模擬單擊樣式 轉(zhuǎn)換器，以觸發(fā)我們設(shè)定的折疊機制。通過.trigger ()方法就可以完成模擬事件的操作:$(document)ready(function() $(1#switcher1)

29、 trigger(1 click1);)；這樣，隨著頁面加載完成，樣式轉(zhuǎn)換器也會被折疊起來，就好像是被單擊了一樣。4.1修改內(nèi)聯(lián)css在接觸漂亮的jquery效果之前，有必要先簡單地談一談css。在前幾章中，為了修改文檔的 外觀，我們都是先在單獨的樣式表中為類定義好樣式，然后再通過jqiwry來添加或者移除這些類。 一般而言，這都是為html應(yīng)用css的首選方式，因為這種方式不會影響樣式表負(fù)責(zé)處理頁面表 現(xiàn)的角色。但是，在有些情況下，可能我們要使用的樣式?jīng)]有在樣式表中定義，或者通過樣式表 定義不是那么容易。針對這種情況，jquery提供了css()方法。這個方法集獲取方法(getter)和設(shè)置

30、方法(setter)于一體。為取得某個樣式屬性的值，可 以為這個方法傳遞一個字符串形式的屬性名，比如css(1 backgroundcolor')。對于由多個單 詞構(gòu)成的屬性名，jqueiy既可以解釋連字符版的css表示法(如background-color),也可以解 釋駝峰大小寫形式(camel-cased)的dom表示法(如backgroundcolor)o在設(shè)置樣式屬性 時，css()方法能彎接受的參數(shù)有兩種，一種是為它傳遞一個單獨的樣式屬性和值，另一種是 為它傳遞_個由屬社-值對構(gòu)成的映射(map)： css(*propertyr j value1) css(property

31、l: 1valuel' 'property-21: *value2')有經(jīng)驗的javascript開發(fā)者會將這些jquery映射看成是javascript象字面量。說明 一般來說，數(shù)字值不需要加引號而字符串值需要加引號。但是，當(dāng)使用映射表示法時, 如果屬性名使用駝峰大小寫形式的dom表示法，則可以省略引號.$ (document) :reedy (function () /兩數(shù)綁定$(1#switcher-large 1) .click(largef);$ ( 1#switcher-narrow1) .click (narrowf);$ ( 1#switcher-def

32、ault') click(defaultf);)； var largef=function () /speech 內(nèi)容變?nèi)藇ar speech=$(1#speech1);var currentsize=speech.css(1 font-size 1);var num=parsefloat(currentsize, 10);var unit=currentsizeslice(-2);num*=l4;speech.css(1 font-size!,num+unit);var narrowf=function () / /speech 內(nèi)容變小var speech=$(1#speech!)

33、;var currentsize=speechcss('font-size 1);var num=parsefloat(currentsize, 10);varcuttentsizeslice(-2);num/=l4;speechcss('font-size',num+unit);var defaultf=function ()/恢復(fù)默認(rèn)var speech=$(1#speech!;speech.css(1 font-size 1z 115px1);marley was dead: to begin with. there is no doubt whatever ab

34、out that. the register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. scrooge signed it: and scrooge's name was good upon change, for anything he chose to put his hand to. old marley was as dead as a door-nail.style switcherdefaultnarrow columnlarge

35、print要通過單擊switcher-small div減小字體大小，需要使用除法而不是乘法，即num /= 1.4© 同樣，更好的方案是把對這兩個div的單擊操作，通過button類組合到一個.click ）處理程序中。在設(shè)置完變量后.再根據(jù)用戶單擊的div的id來決定使用乘法還是除法。下面就是相應(yīng)的代碼:$ (documpnt) rearly (funrt4 on ()$('div.button').click(function() var $speech = $(1 div.speech1)； var currentsize = $speech.css(1 fo

36、ntsize 1); var num = parsefloat(currentsize, 10);var unit = currentsize.slice(-2)；i£ (thisid = 1 switcherlarge，) num *= 1«4; else if (this丄d = 1 switcher-small1) num /= 1.4;$speech.css(fontsize1, num + unit)；););4.2基本的隱藏和顯示基本的.hide()和.show()方法不帶任何參數(shù)?？梢园阉鼈兿脲璩深愃芻ss ('display', string

37、.)方法的簡寫方式，其中string是適當(dāng)?shù)娘@示值。不錯，這兩個方法的作用就是立即隱 藏或顯示匹配的元素集合，不帶任何動畫效果。其中，.hide()方法會將匹配的元素集合的內(nèi)聯(lián)style屬性設(shè)置為display：none；但它的聰明之處是，它能夠在把display的值變成none之前，記住原先的display值，通常是block或inlineo恰好相反，show()方法會將匹配的元素集合的display屬性，恢復(fù)為應(yīng)用display: none之前的可見屬性。show()和.hide ()的這種特性,使得它們非常適合隱藏那些默認(rèn)的display屬性在樣式表中 被修改的元素。例如，在默認(rèn)情況下，

38、vli元素具有di splay： block屬性，但是，為了構(gòu)建水 平的導(dǎo)航菜單，它們可能會被修改成display:inline«而在類似這樣的vli元素上面使 用.show()方法，不會簡單地把它重置為默認(rèn)的displayzblockr因為那樣會導(dǎo)致把vli元素放 到單獨的一行中；相反，show()方法會把它恢復(fù)為先前的display: inline狀態(tài)，從而維持水 平的菜單設(shè)計。4.3效果和速度當(dāng)在.show()或hide()中指定一個速度參數(shù)時，就會產(chǎn)生動畫效果，即效果會在一個特定 的時間段內(nèi)發(fā)生。例如.hidespeed，)方法，會同時減少元素的高度、寬度和不透明度，直至 這3個屬性的值都達到0,與此同時會為該元素應(yīng)用css規(guī)則display: none©而.show (* speed *) 方法則會從上到下增大元素的高度，從左到右增大元素的寬度，同時從0到1增加元素的不透明度, 直至其內(nèi)容完全可見。1. 指定顯示速度對于jquery提供的任何效果，都可以指定3種速度參數(shù)：slow、normal和fast。使用 .show ('slo