一些應(yīng)該熟記于心的jQuery函數(shù)和技巧
原創(chuàng)【51CTO獨(dú)家特稿】現(xiàn)在使用jQuery的網(wǎng)站數(shù)不勝數(shù)，它能夠成為成最為知名的JavaScript框架，肯定存在著某種原因。作為開發(fā)者，我們必須更深入地思考問題，應(yīng)該能夠使用每一種我們想要了解的語言和框架所具有***級(jí)技巧。
關(guān)于jQuery更多內(nèi)容，歡迎訪問： jQuery從入門到精通
高級(jí)選擇器（selector）
在jQuery中，我們可以使用各種各樣的選擇器，這使得選擇器的使用變得非常精確。51CTO也曾經(jīng)和讀者分享過jQuery選擇器深入分析：避免不必要的調(diào)用，下面我們來一步一步地講解這些選擇器并看看在其他語境中如何使用這些選擇器。
基于屬性的選擇器
在HTML中，幾乎所有元素都具有屬性，比如：
- <img src="" alt="" width="" height="" border="0" />
- <input type="text" name="email" value="" size="80" />
上面兩個(gè)HMTL元素中包含了九個(gè)屬性。利用jQuery，我們可以根據(jù)元素的屬性和屬性值來對(duì)元素進(jìn)行選擇。一起看看以下例子中的選擇器：
- $(document).ready(function(){
- //Alltheimageswhosewidthis600px
- $("img[width=600]").click(function(){
- alert("You'vejustselectedanimagewhosewidthis600px");
- });
- //Alltheimageshavingawidthdifferentto600px
- $("img[width!=600]").click(function(){
- alert("You'vejustselectedanimagewhosewidthisnot600px");
- });
- //Alltheinputswhosenameendswith'email'
- $("input[name$='email']").focus(function(){
- alert("Thisinputhasanamewhichendswith'email'.");
- });
- });
在官方文檔中，我們可以看到許多選擇器與上例中的選擇器非常類似。但關(guān)鍵點(diǎn)是一樣的，屬性和屬性值。
多重選擇器
如果你開放的是一個(gè)較為大型的網(wǎng)站，選擇器的使用會(huì)變得困難。有時(shí)為了讓代碼變得更為簡(jiǎn)單，***將它們分割為兩個(gè)或三個(gè)選擇器。實(shí)際上這是非常簡(jiǎn)單和基礎(chǔ)的知識(shí)，不過非常有用，我們應(yīng)該把這些知識(shí)熟記于心。
- $(document).ready(function(){
- //Alltheimageswhosewidthis600pxORheightis400px
- $("img[width=600],img[height=400]").click(function(){
- alert("Selectedanimagewhosewidthis600pxORheightis400px");
- });
- //Allpelementswithclassorange_text,divsandimages.
- $("p.orange_text,div,img").hover(function(){
- alert("Selectedapelementwithclassorange_text,adivORanimage.");
- });
- //Wecanalsocombinetheattributesselectors
- //Allthejpgimageswithanaltattribute(thealt'svaluedoesn'tmatter)
- $("img[alt][src$='.jpg']").click(function(){
- alert("Youselectedajpgimagewiththealtattribute.");
- });
- });
#p#
Widget組件選擇器
除了插件的選擇器之前，還有一些基于元素某些屬性或位置的選擇器。下面讓我們看看這些更為重要的選擇器：
- $(document).ready(function(){
- //Allthehiddenimagesareshown
- $("img:hidden").show();
- //Thefirstpisgoingtobeorange
- $("p:first").css("color","orange");
- //Inputwithtypepassword
- //thisis$("input[type='password']")
- $("input:password").focus(function(){
- alert("Thisisapassword!");
- });
- //Divswithparagraph
- $("div:has(p)").css("color","green");
- //Wecanalsocombinethem.with()
- //Allnotdisabledcheckboxes
- $("input:checkbox(:not(:disabled))").hover(function(){
- alert("Thischeckboxisworking.");
- });
- });
如上例所示，可供使用的選擇器是多種多樣的，并且它們之前不是互相獨(dú)立的，所以我們可以將這些選擇器組合起來進(jìn)行使用，如上例中的選擇器。
理解網(wǎng)站的結(jié)構(gòu)
網(wǎng)絡(luò)的結(jié)構(gòu)可能看起來非常復(fù)雜，但事實(shí)上并非如此，如果我們想要使用某些選擇器以及作用于網(wǎng)絡(luò)結(jié)構(gòu)之上的方法。我們可以將網(wǎng)站視為一個(gè)顛倒的樹，樹根在頂部，而其他元素從根部延伸出來。查看下面的代碼，試著想象一棵樹，樹根是body標(biāo)簽。
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>...</head>
- <body>
- <div id="wrapper">
- <div id="main">
- <h1>CreateanAccount!</h1>
- <form id="myform" action="#" method="post">
- <legend>PersonalInformation</legend>
- <input type="text" name="email_address" value="EmailAddress"/>
- <input type="checkbox" name="checking" value=""/>
- </form>
- <p>Message</p>
- </div><!--Endmain-->
- </div><!--Endwrapper-->
- <div id="footer">
- <p>Footermessage</p>
- </div><!--Endfooter-->
- </body>
- </html>
以上示例代碼的樹形圖如下：
很簡(jiǎn)單，是不是？從現(xiàn)在開始我們可以將html或xhtml看做一棵樹，不過我們想做的是程序員，這些植物學(xué)的理論有什么用處？答案就在下一個(gè)要點(diǎn)之中。
#p#
對(duì)樹進(jìn)行選擇和轉(zhuǎn)換
選擇
就想樹一樣，網(wǎng)站結(jié)構(gòu)中葉存在子與父。在jQuery中，我們可以利用這一結(jié)構(gòu)。假設(shè)我們擁有相同的html，但是現(xiàn)在我們想要選擇名為“main”的div中的p元素，但是不想對(duì)任何有關(guān)p元素的東西造成變化。
我們有三種可能的方案，如下：
- $("#wrapper").children('#main').children('p').css("color","orange");
- $("#wrapper").children().children('p').css("color","orange");
- $("#main").children('p').css("color","orange");
利用children方法可以選擇樹中位于其他元素下的某個(gè)元素。如果我們傳遞給它一個(gè)選擇器，該方法將僅選擇我們需要的元素，如果不是這樣，父元素的所有子元素都將被選中。讓我們看看***個(gè)和第二個(gè)選擇器直接的區(qū)別。
唯一的不同之處在于：第二個(gè)選擇器中我們什么也沒有指定，所有每一個(gè)子元素都會(huì)被選中。此處的關(guān)鍵在于：在上圖中wrapper這個(gè)div元素下除main之外并沒有其他子元素，所以我們得到的結(jié)果是一樣的。
添加元素
現(xiàn)在我們?cè)跇渲刑砑釉亍＿@個(gè)元素可以是段落、div元素、表格等等，假設(shè)我們想要添加一個(gè)列表，如下：
- <ul>
- <li>Dog</li>
- <li>Cat</li>
- <li>Frog</li>
- </ul>
只是一些字符串，所以我們可以在JavaScript代碼中這樣寫：
- var list= "<ul>\n"
- + "<li>Dog</li>\n"
- + "<li>Cat</li>\n"
- + "<li>Frog</li>\n"
- "</ul>";
現(xiàn)在我們要在html中某個(gè)地方添加字符串。比如，在之前我們選擇的p元素之后。
***我們可以輸入完整的代碼，如下所示：
- $(document).ready(function(){
- var list= "<ul>\n"
- + "<li>Dog</li>\n"
- + "<li>Cat</li>\n"
- + "<li>Frog</li>\n"
- "</ul>";
- $("#wrapper").children('#main').append(list);
- });
字面上我們將字符串附加到HTML中的</p>，結(jié)果是這個(gè)列表顯示在p元素之后。
移除元素
移除元素并不難，當(dāng)我們談到對(duì)樹進(jìn)行轉(zhuǎn)換時(shí)，在這一過程一定會(huì)涉及元素的移除。下面我們來移除之前選擇的那個(gè)段落（注意我們可以再次使用選擇器）。
- $("#wrapper").children('#main').children('p').remove();
在這一代碼中，位于選中元素之中的所有元素都將被移除，所以必須十分小心。如果div下有一個(gè)列表，當(dāng)我們移除該div時(shí)，div和列表都會(huì)被移除。
表面之下
jQuery類似只露出一角的冰山，在水面之下還有更多內(nèi)容。這一小結(jié)中，我們將向你展示某些表面之下的內(nèi)容。
綁定（Bind）
綁定是一種方法，利用它，我們可以將一個(gè)事件（鼠標(biāo)點(diǎn)擊、懸置等等）與一個(gè)方法連接起來。這有點(diǎn)類似：當(dāng)用戶單擊此處時(shí)，調(diào)用該方法。聽起來很熟悉，對(duì)嗎？沒錯(cuò)，我們經(jīng)常這樣做。看看以下示例：
- $(document).ready(function(){
- $("#id").click(function(){
- alert("Thatclickwasamazing!");
- });
- });
上文中click()方法在以下代碼相對(duì)于wrapper：
- $(document).ready(function(){
- $('#id').bind('click', function (){
- alert("Thatclickwasamazing!");
- });
- });
此外，使用unbind()方法可以解除事件與元素的連接。
#p#
定義你自己的jQuery方法
目前我們看到了一些方法，如click、bind、hover等等，但是我們?nèi)绾味x自己的方法？如何使用$(’selector’).mymethod()這樣的語句調(diào)用這些方法？以下代碼提供了這些問題的解決方案。定義一個(gè)方法，顯示一個(gè)元素的值。
- //ThenamewillbealertVal
- jQuery.fn.alertVal= function(){
- var element=$(this[0]); //That'sourelement
- if (element.val())
- alert(element.val()); //That'sourelement'svalue
- };
- //Thisisthewaywecanuseit
- $("selector").alertVal();
回調(diào)（callback）是常用的解決方案
使用回調(diào)，我們可以在其他方法完成時(shí)執(zhí)行某個(gè)方法。你可以將回調(diào)方法看做對(duì)別人說：但你做完時(shí)，給我電話，因?yàn)槲乙鑫业哪欠莨ぷ鳌２贿^現(xiàn)在的問題是：如何使用回調(diào)？
- $(document).ready(function(){
- myCallBack= function(){
- alert("I'macallbackalert.");
- }
- //WhenthegetfinishesthenmyCallBackisexecuted
- $.get('myhtmlpage.html',myCallBack);
- });
注意：如果該函數(shù)包含參數(shù)，我們必須使用以下方式：
- $(document).ready(function(){
- $.get('myhtmlpage.html',function(){
- myCallBack(param1,param2);
- });
- });
結(jié)論
本文只是介紹一些技巧，能夠讓你更好的理解有關(guān)jQuery的知識(shí)。當(dāng)然，還有許多技巧比本文所講的內(nèi)容更為高級(jí)，但你可以將本文看做一名優(yōu)秀的jQuery開發(fā)者邁出的***步，同時(shí)關(guān)于jQuery，51CTO推薦閱讀：你應(yīng)該學(xué)習(xí)jQuery的七大理由。另外，jQuery提供了一些不錯(cuò)的文檔，請(qǐng)單擊以下鏈接：
LearningjQuery(agoodblogtolearnjQuery)
【編輯推薦】
