`

一些应该熟记于心的jQuery函数和技巧

 
阅读更多

一些应该熟记于心的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中，几乎所有元素都具有属性，比如：

    

  1. <img src="" alt="" width="" height="" border="0" /> 
    2. 

  2. 
<input type="text" name="email" value="" size="80" /> 

    3.

上面两个HMTL元素中包含了九个属性。利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器：

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3.     //Alltheimageswhosewidthis600px  
    4. 

  4.  
    5. 

  5. 
    $("img[width=600]").click(function(){  

    6. 

  6.  
    7. 

  7.        alert("You'vejustselectedanimagewhosewidthis600px");  
    8. 

  8.  
    9. 

  9.     });  
    10. 

  10.  
    11. 

  11.   //Alltheimageshavingawidthdifferentto600px  
    12. 

  12.  
    13. 

  13.     $("img[width!=600]").click(function(){  
    14. 

  14.  
    15. 

  15.         alert("You'vejustselectedanimagewhosewidthisnot600px");  
    16. 

  16.  
    17. 

  17.     });  
    18. 

  18.  
    19. 

  19.  //Alltheinputswhosenameendswith'email'  
    20. 

  20.  
    21. 

  21.     $("input[name$='email']").focus(function(){  
    22. 

  22.  
    23. 

  23.        alert("Thisinputhasanamewhichendswith'email'.");  
    24. 

  24.  
    25. 

  25.     });  
    26. 

  26.  
    27. 

  27. }); 
    28.

在官方文档中，我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的，属性和属性值。

多重选择器

如果你开放的是一个较为大型的网站，选择器的使用会变得困难。有时为了让代码变得更为简单，最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识，不过非常有用，我们应该把这些知识熟记于心。

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3.     //Alltheimageswhosewidthis600pxORheightis400px  
    4. 

  4.  
    5. 

  5. 
    $("img[width=600],img[height=400]").click(function(){  

    6. 

  6.  
    7. 

  7.        alert("Selectedanimagewhosewidthis600pxORheightis400px");  
    8. 

  8.  
    9. 

  9.     });  
    10. 

  10.  
    11. 

  11.  //Allpelementswithclassorange_text,divsandimages.  
    12. 

  12.  
    13. 

  13.     $("p.orange_text,div,img").hover(function(){  
    14. 

  14.  
    15. 

  15.         alert("Selectedapelementwithclassorange_text,adivORanimage.");  
    16. 

  16.  
    17. 

  17.     });   
    18. 

  18.  
    19. 

  19. //Wecanalsocombinetheattributesselectors  
    20. 

  20.  
    21. 

  21.     //Allthejpgimageswithanaltattribute(thealt'svaluedoesn'tmatter)  
    22. 

  22.  
    23. 

  23.     $("img[alt][src$='.jpg']").click(function(){  
    24. 

  24.  
    25. 

  25.        alert("Youselectedajpgimagewiththealtattribute.");  
    26. 

  26.  
    27. 

  27.     });  
    28. 

  28.  
    29. 

  29. }); 
    30.

Widget组件选择器

除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3.     //Allthehiddenimagesareshown  
    4. 

  4.  
    5. 

  5.     $("img:hidden").show();         
    6. 

  6.  
    7. 

  7. //Thefirstpisgoingtobeorange  
    8. 

  8.  
    9. 

  9.     $("p:first").css("color","orange");  
    10. 

  10.  
    11. 

  11.  //Inputwithtypepassword  
    12. 

  12.  
    13. 

  13. 
    //thisis$("input[type='password']")  

    14. 

  14.  
    15. 

  15.     $("input:password").focus(function(){  
    16. 

  16.  
    17. 

  17.        alert("Thisisapassword!");  
    18. 

  18.  
    19. 

  19.     });                    
    20. 

  20.  
    21. 

  21. //Divswithparagraph  
    22. 

  22.  
    23. 

  23.     $("div:has(p)").css("color","green");  
    24. 

  24.  
    25. 

  25. //Wecanalsocombinethem.with()  
    26. 

  26.  
    27. 

  27.     //Allnotdisabledcheckboxes  
    28. 

  28.  
    29. 

  29.     $("input:checkbox(:not(:disabled))").hover(function(){  
    30. 

  30.  
    31. 

  31.        alert("Thischeckboxisworking.");  
    32. 

  32.  
    33. 

  33.     });   
    34. 

  34.  
    35. 

  35.  }); 
    36.

如上例所示，可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。

理解网站的结构

网络的结构可能看起来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部，而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是body标签。

    

  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2. 

  2. 
<head>...</head> 

    3. 

  3. 
<body> 

    4. 

  4.  
    5. 

  5. 
    <div id="wrapper"> 

    6. 

  6.  
    7. 

  7. 
        <div id="main"> 

    8. 

  8.  
    9. 

  9. 
            <h1>CreateanAccount!</h1> 

    10. 

  10.  
    11. 

  11. 
            <form id="myform" action="#" method="post"> 

    12. 

  12.  
    13. 

  13. 
                <legend>PersonalInformation</legend> 

    14. 

  14.  
    15. 

  15. 
                <input type="text" name="email_address" value="EmailAddress"/> 

    16. 

  16.  
    17. 

  17. 
                <input type="checkbox" name="checking" value=""/> 

    18. 

  18.  
    19. 

  19. 
            </form> 

    20. 

  20.  
    21. 

  21. 
            <p>Message</p> 

    22. 

  22.  
    23. 

  23. 
        </div><!--Endmain--> 

    24. 

  24.  
    25. 

  25. 
    </div><!--Endwrapper--> 

    26. 

  26.  
    27. 

  27. 
    <div id="footer"> 

    28. 

  28.  
    29. 

  29. 
        <p>Footermessage</p> 

    30. 

  30.  
    31. 

  31. 
    </div><!--Endfooter--> 

    32. 

  32.  
    33. 

  33. 
</body> 

    34. 

  34. 
</html> 

    35.

以上示例代码的树形图如下：

以上示例代码的树形图

很简单，是不是？从现在开始我们可以将html或xhtml看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。

对树进行选择和转换

选择

就想树一样，网站结构中叶存在子与父。在jQuery中，我们可以利用这一结构。假设我们拥有相同的html，但是现在我们想要选择名为“main”的div中的p元素，但是不想对任何有关p元素的东西造成变化。

对树进行选择和转换

我们有三种可能的方案，如下：

    

  1. $("#wrapper").children('#main').children('p').css("color","orange");  
    2. 

  2. $("#wrapper").children().children('p').css("color","orange");  
    3. 

  3. $("#main").children('p').css("color","orange"); 
    4.

利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。

唯一的不同之处在于：第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。此处的关键在于：在上图中wrapper这个div元素下除main之外并没有其他子元素，所以我们得到的结果是一样的。

添加元素

现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等，假设我们想要添加一个列表，如下：

    

  1. <ul> 
    2. 

  2.  
    3. 

  3. 
    <li>Dog</li> 

    4. 

  4.  
    5. 

  5. 
    <li>Cat</li> 

    6. 

  6.  
    7. 

  7. 
    <li>Frog</li> 

    8. 

  8.  
    9. 

  9. 
</ul> 

    10.

只是一些字符串，所以我们可以在JavaScript代码中这样写：

    

  1. var list= "<ul>\n" 
    2. 

  2.  
    3. 

  3. 
            + "<li>Dog</li>\n"  

    4. 

  4.  
    5. 

  5. 
            + "<li>Cat</li>\n"  

    6. 

  6.  
    7. 

  7. 
            + "<li>Frog</li>\n"  

    8. 

  8.  
    9. 

  9. 
            "</ul>"; 

    10.

现在我们要在html中某个地方添加字符串。比如，在之前我们选择的p元素之后。

添加字符串

最后我们可以输入完整的代码，如下所示：

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3. 
    var list= "<ul>\n" 

    4. 

  4.  
    5. 

  5. 
                + "<li>Dog</li>\n"  

    6. 

  6.  
    7. 

  7. 
                + "<li>Cat</li>\n"  

    8. 

  8.  
    9. 

  9. 
                + "<li>Frog</li>\n"  

    10. 

  10.  
    11. 

  11. 
                "</ul>";         

    12. 

  12.  
    13. 

  13. $("#wrapper").children('#main').append(list);  
    14. 

  14.  
    15. 

  15. }); 
    16.

字面上我们将字符串附加到HTML中的</p>，结果是这个列表显示在p元素之后。

移除元素

移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。

    

  1. $("#wrapper").children('#main').children('p').remove(); 
    2. 

  2.  
    3.

在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。如果div下有一个列表，当我们移除该div时，div和列表都会被移除。

表面之下

jQuery类似只露出一角的冰山，在水面之下还有更多内容。这一小结中，我们将向你展示某些表面之下的内容。

绑定（Bind）

绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。这有点类似：当用户单击此处时，调用该方法。听起来很熟悉，对吗？没错，我们经常这样做。看看以下示例：

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3.    $("#id").click(function(){  
    4. 

  4.  
    5. 

  5.      alert("Thatclickwasamazing!");  
    6. 

  6.  
    7. 

  7.    });  
    8. 

  8.  
    9. 

  9. }); 
    10.

上文中click()方法在以下代码相对于wrapper：

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3.   $('#id').bind('click', function (){  
    4. 

  4.  
    5. 

  5.     alert("Thatclickwasamazing!");  
    6. 

  6.  
    7. 

  7.   });  
    8. 

  8.  
    9. 

  9. }); 
    10.

此外，使用unbind()方法可以解除事件与元素的连接。

定义你自己的jQuery方法

目前我们看到了一些方法，如click、bind、hover等等，但是我们如何定义自己的方法？如何使用$(’selector’).mymethod()这样的语句调用这些方法？以下代码提供了这些问题的解决方案。定义一个方法，显示一个元素的值。

    

  1. //ThenamewillbealertVal  
    2. 

  2. 
jQuery.fn.alertVal= function(){  

    3. 

  3.  
    4. 

  4. 
    var element=$(this[0]); //That'sourelement  

    5. 

  5.  
    6. 

  6.     if (element.val())  
    7. 

  7.  
    8. 

  8.         alert(element.val()); //That'sourelement'svalue  
    9. 

  9.  
    10. 

  10. };  
    11. 

  11. //Thisisthewaywecanuseit  
    12. 

  12. $("selector").alertVal(); 
    13.

回调（callback）是常用的解决方案

使用回调，我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说：但你做完时，给我电话，因为我要做我的那份工作。不过现在的问题是：如何使用回调？

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3. 
    myCallBack= function(){  

    4. 

  4.  
    5. 

  5.         alert("I'macallbackalert.");  
    6. 

  6.  
    7. 

  7.     }     
    8. 

  8.  
    9. 

  9. //WhenthegetfinishesthenmyCallBackisexecuted  
    10. 

  10.  
    11. 

  11.   $.get('myhtmlpage.html',myCallBack);  
    12. 

  12.  
    13. 

  13. }); 
    14.

注意：如果该函数包含参数，我们必须使用以下方式：

    

  1. $(document).ready(function(){  
    2. 

  2.  
    3. 

  3.   $.get('myhtmlpage.html',function(){  
    4. 

  4.  
    5. 

  5.     myCallBack(param1,param2);  
    6. 

  6.  
    7. 

  7.   });  
    8. 

  8.  
    9. 

  9. }); 
    10.

结论

本文只是介绍一些技巧，能够让你更好的理解有关jQuery的知识。当然，还有许多技巧比本文所讲的内容更为高级，但你可以将本文看做一名优秀的jQuery开发者迈出的第一步，同时关于jQuery，51CTO推荐阅读：

你应该学习jQuery的七大理由。另外，jQuery提供了一些不错的文档，请单击以下链接：

OfficialDocumentation

LearningjQuery(agoodblogtolearnjQuery)

 

【编辑推荐】

  1. 你应该学习jQuery的七大理由
  2. 了解jQuery技巧来提高你的代码质量
  3. jQuery 1.4十大新特性解读及代码示例
  4. jQuery另类视角：动态扩展对象
  5. 10个自由丰富的jQuery或JavaScript编辑器
分享到：
| 浏览器是如何工作的？（工作原理）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics