服务热线
153 8323 9821
现在使用jQuery的网站数不胜数，它能够成为成最为知名的JavaScript框架，肯定存在着某种原因。作为开发者，我们必须更深入地思考问题，应该能够使用每一种我们想要了解的语言和框架所具有最高级技巧。
高级选择器（Ｓelector）
在jQuery中，我们可以使用各种各样的选择器，这使得选择器的使用变得非常精确。下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。
基于属性的选择器
在HTML中，几乎所有元素都具有属性，比如：
01.<img src="" alt="" width="" height="" border="0" /> 02.<input type="text" name="email" value="" size="80" /> 上面两个HMTL元素中包含了九个属性。利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器：
01.$(document).ready(function(){ 02. 03. //Alltheimageswhosewidthis600px 04. 05. $("img[width=600]").click(function(){ 06. 07. alert("You'vejustＳelectedanimagewhosewidthis600px"); 08. 09. }); 10. 11. //Alltheimageshavingawidthdifferentto600px 12. 13. $("img[width!=600]").click(function(){ 14. 15. alert("You'vejustＳelectedanimagewhosewidthisnot600px"); 16. 17. }); 18. 19. //Alltheinputswhosenameendswith'email' 20. 21. $("input[name$='email']").focus(function(){ 22. 23. alert("Thisinputhasanamewhichendswith'email'."); 24. 25. }); 26. 27.}); 在官方文档中，我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的，属性和属性值。
多重选择器
如果你开放的是一个较为大型的网站，选择器的使用会变得困难。有时为了让代码变得更为简单，最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识，不过非常有用，我们应该把这些知识熟记于心。
$(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.");
});
//WecanalsocombinetheattributesＳelectors
//Allthejpgimageswithanaltattribute(thealt'svaluedoesn'tmatter)
$("img[alt][src$='.jpg']").click(function(){
alert("YouＳelectedajpgimagewiththealtattribute.");
});
});
Widget组件选择器除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：01.$(document).ready(function(){ 02. 03. //Allthehiddenimagesareshown 04. 05. $("img:hidden").show(); 06. 07.//Thefirstpisgoingtobeorange 08. 09. $("p:first").css("color","orange"); 10. 11. //Inputwithtypepassword 12. 13. //thisis$("input[type='password']") 14. 15. $("input:password").focus(function(){ 16. 17. alert("Thisisapassword!"); 18. 19. }); 20. 21.//Divswithparagraph 22. 23. $("div:has(p)").css("color","green"); 24. 25.//Wecanalsocombinethem.with() 26. 27. //Allnotdisabledcheckboxes 28. 29. $("input:checkbox(:not(:disabled))").hover(function(){ 30. 31. alert("Thischeckboxisworking."); 32. 33. }); 34. 35. });
如上例所示，可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。
理解网站的结构
网络的结构可能看起来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部，而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是body标签。
01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head>...</head> 03.<body> 04. 05. <div id="wrapper"> 06. 07. <div id="main"> 08. 09. <h1>CreateanAccount!</h1> 10. 11. <form id="myform" action="#" method="post"> 12. 13. <legend>PersonalInformation</legend> 14. 15. <input type="text" name="email_address" value="EmailAddress"/> 16. 17. <input type="checkbox" name="checking" value=""/> 18. 19. </form> 20. 21. <p>Message</p> 22. 23. </div><!--Endmain--> 24. 25. </div><!--Endwrapper--> 26. 27. <div id="footer"> 28. 29. <p>Footermessage</p> 30. 31. </div><!--Endfooter--> 32. 33.</body> 34.</html>
以上示例代码的树形图如下：
很简单，是不是？从现在开始我们可以将html或xhtml看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。
对树进行选择和转换
选择
就想树一样，网站结构中叶存在子与父。在jQuery中，我们可以利用这一结构。假设我们拥有相同的html，但是现在我们想要选择名为“main”的div中的p元素，但是不想对任何有关p元素的东西造成变化。
我们有三种可能的方案，如下：
01.$("#wrapper").children('#main').children('p').css("color","orange"); 02.$("#wrapper").children().children('p').css("color","orange"); 03.$("#main").children('p').css("color","orange"); 利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。
唯一的不同之处在于：第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。此处的关键在于：在上图中wrapper这个div元素下除main之外并没有其他子元素，所以我们得到的结果是一样的。
添加
上一篇：jQuery入门简介
下一篇：jQuery方法大全
