$(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.");  
  
  
  
  
 
  
  
  
  
    });  
  
  
  
  
 
  
  
  
  
}); 
 
 
 
 

 
 
 
 

  
  
  
  
$(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.");  
  
  
  
  
 
  
  
  
  
    });   
  
  
  
  
 
  
  
  
  
 }); 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
... 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
         
  
  
  
  
 
  
  
  
  
            
CreateanAccount!
 
  
  
  
  
 
  
  
  
  
             
  
  
  
  
 
  
  
  
  
                
PersonalInformation
 
  
  
  
  
 
  
  
  
  
                 
  
  
  
  
 
  
  
  
  
                 
  
  
  
  
 
  
  
  
  
             
  
  
  
  
 
  
  
  
  
            
Message
 
  
  
  
  
 
  
  
  
  
        

以上示例代碼的樹(shù)形圖如下：

很簡(jiǎn)單，是不是？從現(xiàn)在開(kāi)始我們可以將html或xhtml看做一棵樹(shù)，不過(guò)我們想做的是程序員，這些植物學(xué)的理論有什么用處？答案就在下一個(gè)要點(diǎn)之中。

#p#

對(duì)樹(shù)進(jìn)行選擇和轉(zhuǎn)換

選擇

就想樹(shù)一樣，網(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方法可以選擇樹(shù)中位于其他元素下的某個(gè)元素。如果我們傳遞給它一個(gè)選擇器，該方法將僅選擇我們需要的元素，如果不是這樣，父元素的所有子元素都將被選中。讓我們看看***個(gè)和第二個(gè)選擇器直接的區(qū)別。

唯一的不同之處在于：第二個(gè)選擇器中我們什么也沒(méi)有指定，所有每一個(gè)子元素都會(huì)被選中。此處的關(guān)鍵在于：在上圖中wrapper這個(gè)div元素下除main之外并沒(méi)有其他子元素，所以我們得到的結(jié)果是一樣的。

添加元素

現(xiàn)在我們?cè)跇?shù)中添加元素。這個(gè)元素可以是段落、div元素、表格等等，假設(shè)我們想要添加一個(gè)列表，如下：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
    
Dog
 
  
  
  
  
 
  
  
  
  
    
Cat
 
  
  
  
  
 
  
  
  
  
    
Frog
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

只是一些字符串，所以我們可以在JavaScript代碼中這樣寫：

 
 
 
 

  
  
  
  
var list= "
\n" 
  
  
  
  
 
  
  
  
  
            + "
Dog
\n"  
  
  
  
  
 
  
  
  
  
            + "
Cat
\n"  
  
  
  
  
 
  
  
  
  
            + "
Frog
\n"  
  
  
  
  
 
  
  
  
  
            "
"; 
 
 
 
 

現(xiàn)在我們要在html中某個(gè)地方添加字符串。比如，在之前我們選擇的p元素之后。

***我們可以輸入完整的代碼，如下所示：

 
 
 
 

  
  
  
  
$(document).ready(function(){  
  
  
  
  
 
  
  
  
  
    var list= "
\n" 
  
  
  
  
 
  
  
  
  
                + "
Dog
\n"  
  
  
  
  
 
  
  
  
  
                + "
Cat
\n"  
  
  
  
  
 
  
  
  
  
                + "
Frog
\n"  
  
  
  
  
 
  
  
  
  
                "
";         
  
  
  
  
 
  
  
  
  
$("#wrapper").children('#main').append(list);  
  
  
  
  
 
  
  
  
  
}); 
 
 
 
 

字面上我們將字符串附加到HTML中的

移除元素

移除元素并不難，當(dāng)我們談到對(duì)樹(shù)進(jìn)行轉(zhuǎn)換時(shí)，在這一過(guò)程一定會(huì)涉及元素的移除。下面我們來(lái)移除之前選擇的那個(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è)方法連接起來(lái)。這有點(diǎn)類似：當(dāng)用戶單擊此處時(shí)，調(diào)用該方法。聽(tīng)起來(lái)很熟悉，對(duì)嗎？沒(méi)錯(cuò)，我們經(jīng)常這樣做?？纯匆韵率纠?/p>

 
 
 
 

  
  
  
  
$(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()這樣的語(yǔ)句調(diào)用這些方法？以下代碼提供了這些問(wèn)題的解決方案。定義一個(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ì)別人說(shuō)：但你做完時(shí)，給我電話，因?yàn)槲乙鑫业哪欠莨ぷ?。不過(guò)現(xiàn)在的問(wè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開(kāi)發(fā)者邁出的***步，同時(shí)關(guān)于jQuery，推薦閱讀：你應(yīng)該學(xué)習(xí)jQuery的七大理由。另外，jQuery提供了一些不錯(cuò)的文檔，請(qǐng)單擊以下鏈接：

OfficialDocumentation

LearningjQuery(agoodblogtolearnjQuery)