【51CTO独家特稿】现在使用jQuery的网站数不胜数,它能够成为成最为知名的JavaScript框架,肯定存在着某种原因。作为开发者,我们必须更深入地思考问题,应该能够使用每一种我们想要了解的语言和框架所具有最高级技巧。
关于jQuery更多内容,欢迎访问: 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(){
-
- //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看做一棵树,不过我们想做的是程序员,这些植物学的理论有什么用处?答案就在下一个要点之中。
对树进行选择和转换
选择
就想树一样,网站结构中叶存在子与父。在jQuery中,我们可以利用这一结构。假设我们拥有相同的html,但是现在我们想要选择名为“main”的div中的p元素,但是不想对任何有关p元素的东西造成变化。
我们有三种可能的方案,如下:
- $("#wrapper").children('#main').children('p').css("color","orange");
- $("#wrapper").children().children('p').css("color","orange");
- $("#main").children('p').css("color","orange");
利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器,该方法将仅选择我们需要的元素,如果不是这样,父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。
唯一的不同之处在于:第二个选择器中我们什么也没有指定,所有每一个子元素都会被选中。此处的关键在于:在上图中wrapper这个div元素下除main之外并没有其他子元素,所以我们得到的结果是一样的。
添加元素
现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等,假设我们想要添加一个列表,如下:
- <ul>
-
-
<li>Dog</li>
-
-
<li>Cat</li>
-
-
<li>Frog</li>
-
-
</ul>
只是一些字符串,所以我们可以在JavaScript代码中这样写:
- var list= "<ul>\n"
-
-
+ "<li>Dog</li>\n"
-
-
+ "<li>Cat</li>\n"
-
-
+ "<li>Frog</li>\n"
-
-
"</ul>";
现在我们要在html中某个地方添加字符串。比如,在之前我们选择的p元素之后。
最后我们可以输入完整的代码,如下所示:
- $(document).ready(function(){
-
-
var list= "<ul>\n"
-
-
+ "<li>Dog</li>\n"
-
-
+ "<li>Cat</li>\n"
-
-
+ "<li>Frog</li>\n"
-
-
"</ul>";
-
- $("#wrapper").children('#main').append(list);
-
- });
字面上我们将字符串附加到HTML中的</p>,结果是这个列表显示在p元素之后。
移除元素
移除元素并不难,当我们谈到对树进行转换时,在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落(注意我们可以再次使用选择器)。
- $("#wrapper").children('#main').children('p').remove();
-
在这一代码中,位于选中元素之中的所有元素都将被移除,所以必须十分小心。如果div下有一个列表,当我们移除该div时,div和列表都会被移除。
表面之下
jQuery类似只露出一角的冰山,在水面之下还有更多内容。这一小结中,我们将向你展示某些表面之下的内容。
绑定(Bind)
绑定是一种方法,利用它,我们可以将一个事件(鼠标点击、悬置等等)与一个方法连接起来。这有点类似:当用户单击此处时,调用该方法。听起来很熟悉,对吗?没错,我们经常这样做。看看以下示例:
- $(document).ready(function(){
-
- $("#id").click(function(){
-
- alert("Thatclickwasamazing!");
-
- });
-
- });
上文中click()方法在以下代码相对于wrapper:
- $(document).ready(function(){
-
- $('#id').bind('click', function (){
-
- alert("Thatclickwasamazing!");
-
- });
-
- });
此外,使用unbind()方法可以解除事件与元素的连接。
定义你自己的jQuery方法
目前我们看到了一些方法,如click、bind、hover等等,但是我们如何定义自己的方法?如何使用$(’selector’).mymethod()这样的语句调用这些方法?以下代码提供了这些问题的解决方案。定义一个方法,显示一个元素的值。
- //ThenamewillbealertVal
-
jQuery.fn.alertVal= function(){
-
-
var element=$(this[0]); //That'sourelement
-
- if (element.val())
-
- alert(element.val()); //That'sourelement'svalue
-
- };
- //Thisisthewaywecanuseit
- $("selector").alertVal();
回调(callback)是常用的解决方案
使用回调,我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说:但你做完时,给我电话,因为我要做我的那份工作。不过现在的问题是:如何使用回调?
- $(document).ready(function(){
-
-
myCallBack= function(){
-
- alert("I'macallbackalert.");
-
- }
-
- //WhenthegetfinishesthenmyCallBackisexecuted
-
- $.get('myhtmlpage.html',myCallBack);
-
- });
注意:如果该函数包含参数,我们必须使用以下方式:
- $(document).ready(function(){
-
- $.get('myhtmlpage.html',function(){
-
- myCallBack(param1,param2);
-
- });
-
- });
结论
本文只是介绍一些技巧,能够让你更好的理解有关jQuery的知识。当然,还有许多技巧比本文所讲的内容更为高级,但你可以将本文看做一名优秀的jQuery开发者迈出的第一步,同时关于jQuery,51CTO推荐阅读:
你应该学习jQuery的七大理由。另外,jQuery提供了一些不错的文档,请单击以下链接:
OfficialDocumentation
LearningjQuery(agoodblogtolearnjQuery)
【编辑推荐】
-
你应该学习jQuery的七大理由
-
了解jQuery技巧来提高你的代码质量
-
jQuery 1.4十大新特性解读及代码示例
-
jQuery另类视角:动态扩展对象
-
10个自由丰富的jQuery或JavaScript编辑器
相关推荐
应熟记于心的代码。 自己总结的ADO.NET基础知识,纯代码。 T-SQL与ADO.NET的几种基础代码。
.NET应熟记于心的代码。 基础测试,关于T—Sql与ADO。NET知识的。
vc常识集萃 一些必须熟记于心的东西
一.JDBC原理概述(了解 能说出来就行) 二.JDBC的API (熟记于心) 三.JDBC应用步骤(熟记于心) 四.元数据(了解) 五.事务(Transaction)(熟记于心) 六.JDBC2.0新特性(了解) 其中批处理必须掌握。
中考政治解题方法与熟记技巧.pdf
线性代数必须熟记的结论!!!!!!!!!!!!!!!!
线性代数须熟记的结论 线性代数须熟记的结论 线性代数须熟记的结论 线性代数须熟记的结论 线性代数须熟记的结论
cc++中的一些基础但必须熟记的知识 一些基础的讲解 对于初学者很有用
那时的WINDOWS程序开发还是比较复杂的工作,程序员必须熟记一大堆常用的API函数,而且还得对WINDOWS操作系统有深入的了解。然而随着软件技术的不断发展,在WINDOWS平台上出现了很多优秀的可视化编程环境,程序员可以...
总结了比较常见的面试题,面试过程中问的比较频繁,多看几遍熟记于心
考语文考前微专题:第2章熟记文言基础知识微题2熟记高频实词和古诗文中特殊词语.doc
C#复习文档,包含常见基础知识,以及面试常见问题,是程序员应当熟记于心的知识点。
软考中经常考到一些需要熟记的信息,笔者已通过软考两年,现将自己整理的一些资料上传,以助大家顺利通过软考。
线性代数须熟记的结论 很多性质啊 线性代数须熟记的结论 很多性质啊
SAP (PP)的事务代码,供大家参考,比较简洁清楚。 出血SAP的人,可以此初步了解系统,熟练之后就可以熟记于心了。
初中真题+考点提高物理成绩,这150句物理要点孩子必须熟记!.doc
操作系统是学习计算机很重要的一门学课之一,通过思维导图的方式更清晰的把知识点熟记于心。这个文档将很美观清晰的介绍进程的描述与控制。
教师资格证熟记.pdf