一些应该熟记于心的jQuery函数和技巧（1转）

最新推荐文章于 2022-07-29 17:21:49 发布

原创最新推荐文章于 2022-07-29 17:21:49 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #XHTML #HTML #ViewUI

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析jQuery中的高级选择器，包括基于属性的选择器、多重选择器和Widget组件选择器，通过具体实例展示如何在HTML中精准定位元素。同时，结合网站结构分析，提供更高级的选择器组合技巧，旨在帮助开发者更高效地进行网页操作。

高级选择器（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(){ //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."); }); });
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标签。

<html xmlns="http://www.w3.org/1999/xhtml"> <head>...</head> <body> <div id="wrapper"> <div id="main"> <h1>CreateanAccount!</h1> <form id="myform" action="#" method="post"> <legend>PersonalInformation</legend> <input type="text" name="email_address" value="EmailAddress"/> <input type="checkbox" name="checking" value=""/> </form> <p>Message</p> </div> </div> <div id="footer"> <p>Footermessage</p> </div> </body> </html> 以上示例代码的树形图如下：

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