一些應該熟記于心的jQuery函數和技巧
?
文章將為讀者講述一些優秀的實現方法和技巧，正確地使用這些方法和技巧就能夠充分利用這一框架為我們所提供的所有優點。
AD： <script src="http://www.51cto.com/js/article/keywords_ad_new.js"></script>
?
【51CTO獨家特稿】現在使用jQuery的網站數不勝數，它能夠成為成最為知名的JavaScript框架，肯定存在著某種原因。作為開發者，我們必須更深入地思考問題，應該能夠使用每一種我們想要了解的語言和框架所具有最高級技巧。
關于jQuery更多內容，歡迎訪問： jQuery從入門到精通
高級選擇器（selector）
在jQuery中，我們可以使用各種各樣的選擇器，這使得選擇器的使用變得非常精確。51CTO也曾經和讀者分享過 jQuery選擇器深入分析：避免不必要的調用 ，下面我們來一步一步地講解這些選擇器并看看在其他語境中如何使用這些選擇器。
基于屬性的選擇器
在HTML中，幾乎所有元素都具有屬性，比如：
-
<
img
?
src
=
""
?
alt
=
""
?
width
=
""
?
height
=
""
?
border
=
"0"
?
/>
?
-
<
input
?
type
=
"text"
?
name
=
"email"
?
value
=
""
?
size
=
"80"
?
/>
?
上面兩個HMTL元素中包含了九個屬性。利用jQuery，我們可以根據元素的屬性和屬性值來對元素進行選擇。一起看看以下例子中的選擇器：
-
$(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'."); ?
-
?
-
????}); ?
-
?
-
});?
在官方文檔中，我們可以看到許多選擇器與上例中的選擇器非常類似。但關鍵點是一樣的，屬性和屬性值。
多重選擇器
如果你開放的是一個較為大型的網站，選擇器的使用會變得困難。有時為了讓代碼變得更為簡單，最好將它們分割為兩個或三個選擇器。實際上這是非常簡單和基礎的知識，不過非常有用，我們應該把這些知識熟記于心。
-
$(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."); ?
-
?
-
????}); ?
-
?
-
});?
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."); ?
-
?
-
????});? ?
-
?
-
?});?
如上例所示，可供使用的選擇器是多種多樣的，并且它們之前不是互相獨立的，所以我們可以將這些選擇器組合起來進行使用，如上例中的選擇器。
理解網站的結構
網絡的結構可能看起來非常復雜，但事實上并非如此，如果我們想要使用某些選擇器以及作用于網絡結構之上的方法。我們可以將網站視為一個顛倒的樹，樹根在頂部，而其他元素從根部延伸出來。查看下面的代碼，試著想象一棵樹，樹根是body標簽。
-
<
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
>
?
以上示例代碼的樹形圖如下：
很簡單，是不是？從現在開始我們可以將html或xhtml看做一棵樹，不過我們想做的是程序員，這些植物學的理論有什么用處？答案就在下一個要點之中。
對樹進行選擇和轉換
選擇
就想樹一樣，網站結構中葉存在子與父。在jQuery中，我們可以利用這一結構。假設我們擁有相同的html，但是現在我們想要選擇名為“main”的div中的p元素，但是不想對任何有關p元素的東西造成變化。
我們有三種可能的方案，如下：
-
$("#wrapper").children('#main').children('p').css("color","orange"); ?
-
$("#wrapper").children().children('p').css("color","orange"); ?
-
$("#main").children('p').css("color","orange");?
利用children方法可以選擇樹中位于其他元素下的某個元素。如果我們傳遞給它一個選擇器，該方法將僅選擇我們需要的元素，如果不是這樣，父元素的所有子元素都將被選中。讓我們看看第一個和第二個選擇器直接的區別。
唯一的不同之處在于：第二個選擇器中我們什么也沒有指定，所有每一個子元素都會被選中。此處的關鍵在于：在上圖中wrapper這個div元素下除main之外并沒有其他子元素，所以我們得到的結果是一樣的。
添加元素
現在我們在樹中添加元素。這個元素可以是段落、div元素、表格等等，假設我們想要添加一個列表，如下：
-
<
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
>
";?
現在我們要在html中某個地方添加字符串。比如，在之前我們選擇的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>，結果是這個列表顯示在p元素之后。
移除元素
移除元素并不難，當我們談到對樹進行轉換時，在這一過程一定會涉及元素的移除。下面我們來移除之前選擇的那個段落（注意我們可以再次使用選擇器）。
-
$("#wrapper").children('#main').children('p').remove();?
-
?
在這一代碼中，位于選中元素之中的所有元素都將被移除，所以必須十分小心。如果div下有一個列表，當我們移除該div時，div和列表都會被移除。
表面之下
jQuery類似只露出一角的冰山，在水面之下還有更多內容。這一小結中，我們將向你展示某些表面之下的內容。
綁定（Bind）
綁定是一種方法，利用它，我們可以將一個事件（鼠標點擊、懸置等等）與一個方法連接起來。這有點類似：當用戶單擊此處時，調用該方法。聽起來很熟悉，對嗎？沒錯，我們經常這樣做。看看以下示例：
-
$(document).ready(function(){ ?
-
?
-
???$("#id").click(function(){ ?
-
?
-
?????alert("Thatclickwasamazing!"); ?
-
?
-
???}); ?
-
?
-
});?
上文中click()方法在以下代碼相對于wrapper：
-
$(document).ready(function(){ ?
-
?
-
??$('#id').bind('click',?function?(){ ?
-
?
-
????alert("Thatclickwasamazing!"); ?
-
?
-
??}); ?
-
?
-
});?
此外，使用unbind()方法可以解除事件與元素的連接。
定義你自己的jQuery方法
目前我們看到了一些方法，如click、bind、hover等等，但是我們如何定義自己的方法？如何使用$(’selector’).mymethod()這樣的語句調用這些方法？以下代碼提供了這些問題的解決方案。定義一個方法，顯示一個元素的值。
-
//ThenamewillbealertVal ?
-
jQuery.fn.alertVal
=?
function
(){ ?
-
?
-
????var?
element
=$(this[0]);?//That'sourelement ?
-
?
-
????if?(element.val()) ?
-
?
-
????????alert(element.val());?//That'sourelement'svalue ?
-
?
-
}; ?
-
//Thisisthewaywecanuseit ?
-
$("selector").alertVal();?
回調（callback）是常用的解決方案
使用回調，我們可以在其他方法完成時執行某個方法。你可以將回調方法看做對別人說：但你做完時，給我電話，因為我要做我的那份工作。不過現在的問題是：如何使用回調？
-
$(document).ready(function(){ ?
-
?
-
????
myCallBack
=?
function
(){ ?
-
?
-
????????alert("I'macallbackalert."); ?
-
?
-
????}??? ?
-
?
-
//WhenthegetfinishesthenmyCallBackisexecuted ?
-
?
-
??$.get('myhtmlpage.html',myCallBack); ?
-
?
-
});?
注意：如果該函數包含參數，我們必須使用以下方式：
-
$(document).ready(function(){ ?
-
?
-
??$.get('myhtmlpage.html',function(){ ?
-
?
-
????myCallBack(param1,param2); ?
-
?
-
??}); ?
-
?
-
});?
結論
本文只是介紹一些技巧，能夠讓你更好的理解有關jQuery的知識。當然，還有許多技巧比本文所講的內容更為高級，但你可以將本文看做一名優秀的jQuery開發者邁出的第一步，同時關于jQuery，51CTO推薦閱讀：
你應該學習jQuery的七大理由 。另外，jQuery提供了一些不錯的文檔，請單擊以下鏈接：
LearningjQuery(agoodblogtolearnjQuery)
?
【編輯推薦】
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
