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

1、现在使用jquery 的网站数不胜数，它能够成为成最为知名的javascript框架，肯定存在着某种原因。 作为开发者， 我们必须更深入地思考问题，应该能够使用每一种我们想要了解的语言和框架所具有最高级技巧。关于 jquery 更多内容，欢迎访问：jquery 从入门到精通高级选择器（selector）在 jquery 中，我们可以使用各种各样的选择器，这使得选择器的使用变得非常精确。51cto也曾经和读者分享过jquery 选择器深入分析：避免不必要的调用，下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。基于属性的选择器在 html中，几乎所有元素都具有属性，比如：1

2、.2.上面两个hmtl元素中包含了九个属性。利用jquery ，我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器：3.$(document).ready(function() 4.5. /alltheimageswhosewidthis600px 6.7. $(imgwidth=600 ).click(function() 8.9. alert(youvejustselectedanimagewhosewidthis600px); 10.11. ); 12.13. /alltheimageshavingawidthdifferentto600px 14.15. $(i

3、mgwidth!=600).click(function() 16.17. alert(youvejustselectedanimagewhosewidthisnot600px); 18.19. ); 20.21. /alltheinputswhosenameendswithemail 22.23. $(inputname$=email).focus(function() 24.25. alert(thisinputhasanamewhichendswithemail.); 26.27. ); 28.29.); 在官方文档中， 我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的，

4、属性和属性值。多重选择器如果你开放的是一个较为大型的网站，选择器的使用会变得困难。有时为了让代码变得更为简单， 最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识，不过非常有用，我们应该把这些知识熟记于心。30.$(document).ready(function() 31.32. /alltheimageswhosewidthis600pxorheightis400px 33.34. $(imgwidth=600 ,imgheight=400 ).click(function() 35.36. alert(selectedanimagewhosewidthis600pxorhe

5、ightis400px); 37.38. ); 39.40. /allpelementswithclassorange_text,divsandimages. 41.42. $(p.orange_text,div,img).hover(function() 43.44. alert(selectedapelementwithclassorange_text,adivoranimage.);45.46. ); 47.48./wecanalsocombinetheattributesselectors 49.50. /allthejpgimageswithanaltattribute(thealt

6、svaluedoesntmatter) 51.52. $(imgaltsrc$=.jpg).click(function() 53.54. alert(youselectedajpgimagewiththealtattribute.); 55.56. ); 57.58.); widget 组件选择器除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：1.$(document).ready(function() 2.3. /allthehiddenimagesareshown 4.5. $(img:hidden).show(); 6.7./thefi

7、rstpisgoingtobeorange 8.9. $(p:first).css(color,orange); 10.11. /inputwithtypepassword 12.13. /thisis$(inputtype =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.w

8、ith() 26.27. /allnotdisabledcheckboxes 28.29. $(input:checkbox(:not(:disabled).hover(function() 30.31. alert(thischeckboxisworking.); 32.33. ); 34.35. ); 如上例所示， 可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。理解网站的结构网络的结构可能看起来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部

9、， 而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是body 标签。36.37. .38.39.40.41.42.43.44. createanaccount!45.46.47.48.personalinformation49.50.51.52.53.54.55.56.message 57.58.59.60.61.62.63.64. footermessage65.66.67.68.69.以上示例代码的树形图如下：很简单，是不是？从现在开始我们可以将html 或 xhtml 看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。对树进行选择和转

10、换选择就想树一样，网站结构中叶存在子与父。在jquery 中，我们可以利用这一结构。假设我们拥有相同的html ，但是现在我们想要选择名为“main”的div 中的 p 元素，但是不想对任何有关p 元素的东西造成变化。我们有三种可能的方案，如下：1.$(#wrapper).children(#main).children(p).css(color,orange); 2.$(#wrapper).children().children(p).css(color,orange); 3.$(#main).children(p).css(color,orange); 利用 children方法可以选择树

11、中位于其他元素下的某个元素。如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样， 父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。唯一的不同之处在于：第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。 此处的关键在于： 在上图中wrapper 这个 div 元素下除 main 之外并没有其他子元素，所以我们得到的结果是一样的。添加元素现在我们在树中添加元素。这个元素可以是段落、div 元素、表格等等，假设我们想要添加一个列表，如下：4.5.6.dog7.8.cat 9.10.frog 11.12.只是一些字符串，所以我们可以在javasc

12、ript代码中这样写：13.var list= n14.15. + dog n 16.17. + cat n 18.19. + frog n 20.21. ; 现在我们要在html 中某个地方添加字符串。比如，在之前我们选择的p 元素之后。最后我们可以输入完整的代码，如下所示：22.$(document).ready(function() 23.24. var list= n25.26. + dogn 27.28. + cat n 29.30. + frog n 31.32. ; 33.34.$(#wrapper).children(#main).append(list); 35.36.);

13、字面上我们将字符串附加到html中的 ，结果是这个列表显示在p 元素之后。移除元素移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。37.$(#wrapper).children(#main).children(p).remove(); 38.在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。如果div 下有一个列表，当我们移除该div 时， div 和列表都会被移除。表面之下jquery 类似只露出一角的冰山，在水面之下还有更多内容。这一小结中，我们将向你展示某些表面之下的内容。绑定（

14、 bind）绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。这有点类似：当用户单击此处时，调用该方法。听起来很熟悉，对吗？没错，我们经常这样做。看看以下示例：39.$(document).ready(function() 40.41. $(#id).click(function() 42.43. alert(thatclickwasamazing!); 44.45. ); 46.47.); 上文中 click()方法在以下代码相对于wrapper ：48.$(document).ready(function() 49.50. $(#id).bind(clic

15、k, function () 51.52. alert(thatclickwasamazing!); 53.54. ); 55.56.); 此外，使用unbind() 方法可以解除事件与元素的连接。定义你自己的jquery 方法目前我们看到了一些方法，如click、bind 、hover 等等，但是我们如何定义自己的方法？如何使用 $(selector ).mymethod() 这样的语句调用这些方法？以下代码提供了这些问题的解决方案。定义一个方法，显示一个元素的值。1./thenamewillbealertval 2.jquery.fn.alertval= function() 3.4. v

16、ar element=$(this0); /thatsourelement 5.6. if (element.val() 7.8. alert(element.val(); /thatsourelementsvalue 9.10.; 11./thisisthewaywecanuseit 12.$(selector).alertval(); 回调（ callback）是常用的解决方案使用回调，我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说：但你做完时，给我电话，因为我要做我的那份工作。不过现在的问题是：如何使用回调？13.$(document).ready(function() 14.15.mycallback= function() 16.17. alert(imacallbackalert.); 18.19. 20.21./whenthegetfinishesthenmycallbackisexecuted 22.23. $.get(myhtmlpage.html,mycallback); 24.25.); 注意：如果该函数包含参数，我们必须使用以下方式：26.$(document).ready(function() 27.28. $.get(myhtmlpage.html,function() 29.30