《jquery函数与技巧.doc

一些应该熟记于心的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(){ //All the images whose width i s600px $(img[width=600]).click(function(){ alert(Youvejustselectedanimagewhosewidthis600px); }); //Alltheimageshavingawidthdifferentto600px $(img[width!=600]).click(function(){ alert(Youvejustselectedanimagewhosewidthisnot600px); }); //All the inputs whose name ends withemail $(input[name$=email]).focus(function(){ alert(Thisinputhasanamewhichendswithemail.); }); }); 在官方文档中，我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的，属性和属性值。 多重选择器 如果你开放的是一个较为大型的网站，选择器的使用会变得困难。有时为了让代码变得更为简单，最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识，不过非常有用，我们应该把这些知识熟记于心。 $(document).ready(function(){ //Alltheimageswhosewidthis600pxORheightis400px $(mon[width=600],mon[height=400]).click(function(){ alert(Selectedanimagewhosewidthis600pxORheightis400px); }); //Allpelementswithclassorange_text,divsandimages. $(p.orange_text,div,img).hover(function(){ alert(Selectedapelementwithclassorange_text,adivORanimage.); }); //Wecanalsocombinetheattributesselectors //Allthejpgimageswithanaltattribute(thealtsvaluedoesntmatter) $(img[alt][src$=.jpg]).click(function(){ alert(Youselectedajpgimagewiththealtattribute.); }); }); Widget组件选择器 除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器： $(document).ready(function(){ //All the hidden images are shown $(img:hidden).show(); //The first pis going to be orange $(p:first).css(color,orange); //Input with type password //thisis$(input[type=password]) $(input:password).focu