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

【独家特稿】现在使用jQuery的网站数不胜数，它能够成为成最为知名的JavaScript框架，肯定存在着某种原因。作为开发者，我们必须更深入地思考问题，应该能够使用每一种我们想要了解的语言和框架所具有***级技巧。

关于jQuery更多内容，欢迎访问： jQuery从入门到精通

高级选择器（selector）

在jQuery中，我们可以使用各种各样的选择器，这使得选择器的使用变得非常精确。也曾经和读者分享过jQuery选择器深入分析：避免不必要的调用，下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。

基于属性的选择器

在HTML中，几乎所有元素都具有属性，比如：

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

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

#p#

Widget组件选择器

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

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

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

理解网站的结构

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

 
 
 
 
  
  
  
   
  
  
  
  ... 
  
  
  
   
  
  
  
   
  
  
  
       
  
  
  
   
  
  
  
           
  
  
  
   
  
  
  
              CreateanAccount!
 
  
  
  
   
  
  
  
               
  
  
  
   
  
  
  
                  PersonalInformation 
  
  
  
   
  
  
  
                   
  
  
  
   
  
  
  
                   
  
  
  
   
  
  
  
               
  
  
  
   
  
  
  
              Message

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

var list= "
- + "
- Dog
- + "
- Cat
- + "
- Frog
- "
";

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

$(document).ready(function(){
$("#id").click(function(){
alert("Thatclickwasamazing!");
});
});

$(document).ready(function(){
$('#id').bind('click', function (){
alert("Thatclickwasamazing!");
});
});

//ThenamewillbealertVal
jQuery.fn.alertVal= function(){
var element=$(this[0]); //That'sourelement
if (element.val())
alert(element.val()); //That'sourelement'svalue
};
//Thisisthewaywecanuseit
$("selector").alertVal();

$(document).ready(function(){
myCallBack= function(){
alert("I'macallbackalert.");
}
//WhenthegetfinishesthenmyCallBackisexecuted
$.get('myhtmlpage.html',myCallBack);
});

$(document).ready(function(){
$.get('myhtmlpage.html',function(){
myCallBack(param1,param2);
});
});