jQuery使用资料.docx
《jQuery使用资料.docx》由会员分享,可在线阅读,更多相关《jQuery使用资料.docx(12页珍藏版)》请在冰豆网上搜索。
![jQuery使用资料.docx](https://file1.bdocx.com/fileroot1/2023-8/19/4a689775-8c32-423a-aee8-bdc32b3db6da/4a689775-8c32-423a-aee8-bdc32b3db6da1.gif)
jQuery使用资料
使用jQuery简化Ajax开发
jQuery是什么?
jQuery由JohnResig创建于2006年初,对于任何使用JavaScript代码的程序员来说,它是一个非常有用的JavaScript库。
无论您是刚刚接触JavaScript语言,并且希望获得一个能解决文档对象模型(DocumentObjectModel,DOM)脚本和Ajax开发中一些复杂问题的库,还是作为一个厌倦了DOM脚本和Ajax开发中无聊的重复工作的资深JavaScript专家,jQuery都会是您的首选。
jQuery能帮助您保证代码简洁易读。
您再也不必编写大堆重复的循环代码和DOM脚本库调用了。
使用jQuery,您可以把握问题的要点,并使用尽可能最少的代码实现您想要的功能。
毫无疑问,jQuery的原理是独一无二的:
它的目的就是保证代码简洁并可重用。
当您理解并体会这一原理后,便可以开始学习本教程了,看看jQuery对我们的编程方式有多少改进吧。
一些简单的代码简化
下面是一个简单示例,它说明了jQuery对代码的影响。
要执行一些真正简单和常见的任务,比方说为页面的某一区域中的每个链接附加一个单击(click)事件,您可以使用纯JavaScript代码和DOM脚本来实现,如清单1所示。
清单1.没有使用jQuery的DOM脚本
varexternal_links=document.getElementById('external_links');
varlinks=external_links.getElementsByTagName('a');
for(vari=0;ivarlink=links.item(i);
link.onclick=function(){
returnconfirm('Youaregoingtovisit:
'+this.href);
};
}
清单2显示了使用jQuery实现的相同的功能。
清单2.使用了jQuery的DOM脚本
$('#external_linksa').click(function(){
returnconfirm('Youaregoingtovisit:
'+this.href);
});
是不是很神奇?
使用jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。
无需对元素进行循环,click()函数将完成这些操作。
同样也不需要进行多个DOM脚本调用。
您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。
首先,我们使用了$()函数——jQuery中功能最强大的函数。
通常,我们都是使用这个函数从文档中选择元素。
在本例中,一个包含有一些层叠样式表(CascadingStyleSheet,CSS)语法的字符串被传递给函数,然后jQuery尽可能高效地把这些元素找出来。
如果您具备CSS选择器的基本知识,那么应该很熟悉这些语法。
在清单2中,#external_links用于检索id为external_links的元素。
a后的空格表示jQuery需要检索external_links元素中的所有元素。
用英语说起来非常绕口,甚至在DOM脚本中也是这样,但是在CSS中这再简单不过了
$()函数返回一个含有所有与CSS选择器匹配的元素的jQuery对象。
jQuery对象类似于数组,但是它附带有大量特殊的jQuery函数。
比方说,您可以通过调用click函数把click处理函数指定给jQuery对象中的所有元素。
还可以向$()函数传递一个元素或者一个元素数组,该函数将把这些元素封装在一个jQuery对象中。
您可能会想要使用这个功能将jQuery函数用于一些对象,比方说window对象。
例如,我们通常会像下面这样把函数分配给加载事件:
window.onload=function(){
//dothisstuffwhenthepageisdoneloading
};
使用jQuery编写的功能相同的代码:
$(window).load(function(){
//runthiswhenthewholepagehasbeendownloaded
});
您可能有所体会,等待窗口加载的过程是非常缓慢而且令人痛苦的,这是因为必须等整个页面加载完所有的内容,包括页面上所有的的图片。
有的时候,您希望首先完成图片加载,但是在大多数情况下,您只需加载超文本标志语言(HypertextMarkupLanguage,HTML)就可以了。
通过在文档中创建特殊的ready事件,jQuery解决了这个问题,方法如下:
$(document).ready(function(){
//dothisstuffwhentheHTMLisallready
});
这个代码围绕document元素创建了一个jQuery对象,然后建立一个函数,用于在HTMLDOM文档就绪的时候调用实例。
可以根据需要任意地调用这个函数。
并且能够以真正的jQuery格式,使用快捷方式调用这个函数。
这很简单,只需向$()函数传递一个函数就可以了:
$(function(){
//runthiswhentheHTMLisdonedownloading
});
到目前以止,我已经向大家介绍了$()函数的三种用法。
第四种方法可以使用字符串来创建元素。
结果会产生一个包含该元素的jQuery对象。
清单3显示的示例在页面中添加了一个段落。
清单3.创建和附加一个简单的段落
$('')
.html('HeyWorld!
')
.css('background','yellow')
.appendTo("body");
在前一个例子中您可能已经注意到,jQuery中的另一个功能强大的特性就是方法链接(methodchaining)。
每次对jQuery对象调用方法时,方法都会返回相同的jQuery对象。
这意味着如果您需要对jQuery对象调用多个方法,那么您不必重新键入选择器就可以实现这一目的:
$('#message').css('background','yellow').html('Hello!
').show();
回页首
使Ajax变得简单
使用jQuery将使Ajax变得及其简单。
jQuery提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。
Ajax最常见的用法就是把一块HTML代码加载到页面的某个区域中去。
为此,只需简单地选择所需的元素,然后使用load()函数即可。
下面是一个用于更新统计信息的示例:
$('#stats').load('stats.html');
通常,我们只需简单地把一些参数传递给服务器中的某个页面。
正如您所预料的,使用jQuery实现这一操作非常地简单。
您可以使用$.post()或者$.get(),这由所需的方法决定。
如果需要的话,您还可以传递一个可选的数据对象和回调函数。
清单4显示了一个发送数据和使用回调的简单示例。
清单4.使用Ajax向页面发送数据
$.post('save.cgi',{
text:
'mystring',
number:
23
},function(){
alert('Yourdatahasbeensaved.');
});
如果您确实需要编写一些复杂的Ajax脚本,那么需要用到$.ajax()函数。
您可以指定xml、script、html或者json,jQuery将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。
还可以指定beforeSend、error、success或者complete回调函数,向用户提供更多有关Ajax体验的反馈。
此外,还有一些其它的参数可供使用,您可以使用它们设置Ajax请求的超时,也可以设置页面“最近一次修改”的状态。
清单5显示了一个使用一些我所提到的参数检索XML文档的示例。
清单5.$.ajax()使Ajax由复杂变简单
$.ajax({
url:
'document.xml',
type:
'GET',
dataType:
'xml',
timeout:
1000,
error:
function(){
alert('ErrorloadingXMLdocument');
},
success:
function(xml){
//dosomethingwithxml
}
});
当success回调函数返回XML文档后,您可以使用jQuery检索这个XML文档,其方式与检索HTML文档是一样的。
这样使得处理XML文档变得相当地容易,并且把内容和数据集成到了您的Web站点里面。
清单6显示了success函数的一个扩展,它为XML中的每个- 元素都添加了一个列表项到Web页面中。
清单6.使用jQuery处理XML文档
success:
function(xml){
$(xml).find('item').each(function(){
varitem_text=$(this).text();
$('
')
.html(item_text)
.appendTo('ol');
});
}
回页首
为HTML添加动画
可以使用jQuery处理基本的动画和显示效果。
animate()函数是动画代码的核心,它用于更改任何随时间变化的数值型的CSS样式值。
比方说,您可以变化高度、宽度、不透明度和位置。
还可以指定动画的速度,定为毫秒或者预定义的速度:
慢速,中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。
请注意,这些参数没有开始值,只有最终值。
开始值取自元素的当前尺寸。
同时我也附加了一个回调函数。
$('#grow').animate({height:
500,width:
500},"slow",function(){
alert('Theelementisdonegrowing!
');
});
jQuery的内置函数使更多常见的动画更容易完成。
可以使用show()和hide()元素,立即显示或者以特定的速度显示。
还可以通过使用fadeIn()和fadeOut(),或者slideDown()和slideUp()显示和隐藏元素,这取决于您所需要的显示效果。
下面的示例定义了一个下滑的导航菜单。
$('#nav').slideDown('slow');
回页首
DOM脚本和事件处理
或许jQuery最擅长的就是简化DOM脚本和事件处理。
遍历和处理DOM非常简单,同时附加、移除和调用事件也十分容易,且不像手动操作那样容易出错。
从本质上说,jQuery可以使DOM脚本中的常用操作变得更加容易。
您可以创建元素并且使用append()函数把它们与其它的一些元素链接到一起,使用clone()复制元素,使用html()设置内容,使用empty()函数删除内容,使用remove()函数删除所有的元素,即便是使用wrap()函数,用其他元素将这些元素包装起来。
通过遍历DOM,一些函数可以用于更改jQuery对象本身的内容。
可以获得元素所有的siblings()、parents()和children()。
还可以选择next()和prev()兄弟元素。
find()函数或许是功能最强大的函数,它允许使用jQuery选择器搜索jQuery对象中元素的后代元素。
如果结合使用end()函数,那么这些函数将变得更加强大。
这个函数的功能类似于undo函数,用于返回到调用find()或parents()函数(或者其它遍历函数)之前的jQuery对象。
如果配合方法链接(methodchaining)一起使用,这些函数可以使复杂的操作看上去非常简单。
清单7显示了一个示例,其中包含有一个登录表单并处理了一些与之有关的元素。
清单7.轻松地遍历和处理DOM
$('form#login')
//hideallthelabelsinsidetheformwiththe'optional'class
.find('label.optional').hide().end()
//addaredbordertoanypasswordfieldsintheform
.find('input:
password').css('border','1pxsolidred').end()
//addasubmithandlertotheform
.submit(function(){
returnconfirm('Areyousureyouwanttosubmit?
');
});
不管您是否相信,这个示例只是一行满是空白的被链接的代码。
首先,选择登录表单。
然后,发现其中含有可选标签,隐藏它们,并调用end()返回表单。
然后,我创建了密码字段,将其边界变为红色,再次调用end()返回表单。
最后,我在表单中添加了一个提交事件处理程序。
其中尤为有趣的就是(除了其简洁性以外),jQuery完全优化了所有的查询操作,确保将所有内容很好地链接在一起后,不需要对一个元素执行两次查询。
处理常见事件就像调用函数(比方说click()、submit()或mouseover())和为其传递事件处理函数一样简单。
此外,还可以使用bind('eventname',function(){})指定自定义的事件处理程序。
可以使用unbind('eventname')删除某些事件或者使用unbind()删除所有的事件。
有关这些函数的使用方法的完整列表,请参阅参考资料中的jQuery应用程序编程接口(ApplicationProgramInterface,API)文档。
回页首
释放jQuery选择器的强大能量
我们经常会使用ID来选择元素,比如#myid,或者通过类名,比如div.myclass来选择元素。
然而,jQuery提供了更为复杂和完整的选择器语法,允许我们在单个选择器中选择几乎所有的元素组合。
jQuery的选择器语法主要是基于CSS3和XPath的。
对CSS3和XPath了解的越多,使用jQuery时就越加得心应手。
有关jQuery选择器的完整列表,包括CSS和XPath,请参阅参考资料中的链接。
CSS3包含一些并不是所有浏览器都支持的语法,因此我们很少使用它。
然而,我们仍然可以在jQuery中使用CSS3选择元素,因为jQuery具备自己的自定义选择器引擎。
比方说,要在表格中的每一个空列中都添加一个横杠,可以使用:
:
empty伪选择器(pseudo-selector):
$('td:
empty').html('-');
如果需要找出所有不含特定类的元素呢?
CSS3同样提供了一个语法可以完成这个目的,使用:
not伪选择器:
如下代码显示了如何隐藏所有不含required类的输入内容:
$('input:
not(.required)').hide();
与在CSS中一样,可以使用逗号将多个选择器连接成一个。
下面是一个同时隐藏页面上所有类型列表的简单示例:
$('ul,ol,dl').hide();
XPath是一种功能强大的语法,用于在文档中搜寻元素。
它与CSS稍有区别,不过它能实现的功能略多于CSS。
要在所有复选框的父元素中添加一个边框,可以使用XPath的/..语法:
$("input:
checkbox/..").css('border','1pxsolid#777');
jQuery中也加入了一些CSS和XPath中没有的选择器。
比方说,要使一个表更具可读性,通常可以在表格的奇数行或偶数行中附加一个不同的类名——也可以称作把表分段(striping)。
使用jQuery不费吹灰之力就可以做到这点,这需要归功于odd伪选择器。
下面这个例子使用striped类改变了表格中所有奇数行的背景颜色:
$('table.striped>tr:
odd').css('background','#999999');
我们可以看到强大的jQuery选择器是如何简化代码的。
不论您想处理什么样的元素,不管这个元素是具体的还是模糊的,都有可能找到一种方法使用一个jQuery选择器对它们进行定义。
回页首
使用插件扩展jQuery
与大多数软件不同,使用一个复杂的API为jQuery编写插件并不是非常困难。
事实上,jQuery插件非常易于编写,您甚至希望编写一些插件来使代码更加简单。
下面是可以编写的最基本的jQuery插件:
$.fn.donothing=function(){
returnthis;
};
虽然非常简单,但是还是需要对这个插件进行一些解释。
首先,如果要为每一个jQuery对象添加一个函数,必须把该函数指派给$.fn。
第二,这个函数必须要返回一个this(jQuery对象),这样才不至于打断方法链接(methodchaining)。
可以轻松地在这个示例之上构建。
要编写一个更换背景颜色的插件,以替代使用css('background'),可以使用下面的代码:
$.fn.background=function(bg){
returnthis.css('background',bg);
};
清注意,可以只从css()返回值,因为已经返回了jQuery对象。
因此,方法链接(methodchaining)仍然运作良好。
我建议在需要重复工作的时候使用jQuery插件。
比方说,如果您需要使用each()函数反复执行相同的操作,那么可以使用一个插件来完成。
由于jQuery插件相当易于编写,所以有上百种可供你选择使用。
jQuery提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器,以及我们可以想到的一切效果。
有关插件的完整列表,请参阅参考资料。
最为复杂、使用最为广泛的插件要属界面(Interface),它是一种动画插件,用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面(UserInterface,UI)。
界面对于jQuery来说就如Scriptaculous对于Prototype一样。
表单插件也同样流行且非常有用,通过它可以使用Ajax在后台中轻松地提交表单。
这个插件用于处理一些常见的情况:
您需要截获某个表单的提交事件,找出所有不同的输入字段,并使用这些字段构造一个Ajax调用。
回页首
结束语
我只是简要地介绍了使用jQuery可能完成的任务。
jQuery使用起来非常有趣,因此我们总是能学到看上去很简单的新技巧和新特性。
从刚开始使用jQuery的那一刻起,jQuery便可以完全简化您的JavaScript和Ajax编程;每学会一点新知识,您的代码就会更简单一点。
学习了jQuery之后,我在使用JavaScript语言进行编程的同时也获得了许多的乐趣。
不用操心所有无聊的内容,我可以专注地编写有趣的内容。
使用jQuery后,我几乎就告别了编写for循环代码的时代。
甚至在想到要使用其它JavaScript库时,不禁会有所畏缩不前。
jQuery确确实实改变了我对JavaScript编程的看法。