- 浏览: 367661 次
文章分类
- 全部博客 (401)
- hibernate 入门 (24)
- it生活 (3)
- MapReduce 算法设计 (1)
- Android (13)
- java (6)
- web (4)
- 技术文章 (9)
- javascript (1)
- html5 (1)
- 数据库 (3)
- jquary (1)
- 1.网站首页原创Java技术区(对首页文章的要求: 原创、高质量、经过认真思考并精心写作。BlogJava管理团队会对首页的文章进行管理。) (0)
- 2.Java新手区 (0)
- 4.其他技术区 (0)
- 6.转载区(Java技术文章转载, 请注明原文出处) (0)
- 5.提问区(Java方面的技术提问) (0)
- servlet (1)
- IT 生活 (2)
- Struts2 (2)
- Struts 2 教程 (2)
- jQuery (1)
- DOM (1)
- ibatis,hibernate (1)
- 数据分析师 (1)
最新评论
-
NIIT_zhu:
我现在要做一个 基于exchange 2010的webmail ...
Exchange 2003 升级到Exchange 2010 之申请证书并分配服务! -
yinren13:
实在不行试试简单易用的turbomeeting,连接速度很快的 ...
QQ远程协助没动静?QQ版本有讲究 -
jicu7766240:
写得很好。赞一个!2年开发的我深有感触。这些我觉得说得很对。要 ...
老程序员的忠告:不要做浮躁的软件工程师 -
haohao-xuexi02:
好像很多人都买起却看不起书。。找各种理由不看。。我的书也这样 ...
老程序员的忠告:不要做浮躁的软件工程师 -
Judy123456:
希望可以提供源代码噢,我最近正好在学这个底部菜单,非常希望楼 ...
Android仿微信底部菜单
jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM)脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家,jQuery 都会是您的首选。
jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery,您可以把握问题的要点,并使用尽可能最少的代码实现您想要的功能。
毫无疑问,jQuery 的原理是独一无二的:它的目的就是保证代码简洁并可重用。当您理解并体会这一原理后,便可以开始学习本教程了,看看 jQuery 对我们的编程方式有多少改进吧。
|
一些简单的代码简化
下面是一个简单示例,它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务,比方说为页面的某一区域中的每个链接附加一个单击(click)事件,您可以使用纯 JavaScript 代码和 DOM 脚本来实现,如清单 1 所示。
清单 1. 没有使用 jQuery 的 DOM 脚本
- var external_links = document.getElementById('external_links');
- var links = external_links.getElementsByTagName('a');
- for (var i=0;i < links.length;i++) {
- var link = links.item(i);
- link.onclick = function() {
- return confirm('You are going to visit: ' + this.href);
- };
- }
清单 2. 使用了 jQuery 的 DOM 脚本
- $('#external_links a').click(function() {
- return confirm('You are going to visit: ' + this.href);
- });
是不是很神奇? 使用 jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。无需对元素进行循环,click()
函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。首先,我们使用了 $()
函数 —— jQuery XX能最强大的函数。通常,我们都是使用这个函数从文档中选择元素。在本例中,一个包含有一些层叠样式表(Cascading Style Sheet,CSS)语法的字符串被传递给函数,然后 jQuery 尽可能高效地把这些元素找出来。
如果您具备 CSS 选择器的基本知识,那么应该很熟悉这些语法。在 清单 2 中,#external_links
用于检索 id
为 external_links
的元素。a
后的空格表示 jQuery 需要检索external_links
元素中的所有 <a>
元素。用英语说起来非常绕口,甚至在 DOM 脚本中也是这样,但是在 CSS 中这再简单不过了
$()
函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组,但是它附带有大量特殊的 jQuery 函数。比方说,您可以通过调用click
函数把 click 处理函数指定给 jQuery 对象中的所有元素。
还可以向 $()
函数传递一个元素或者一个元素数组,该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象,比方说window
对象。例如,我们通常会像下面这样把函数分配给加载事件:
- window.onload = function() {
- // do this stuff when the page is done loading
- };
使用 jQuery 编写的功能相同的代码:
- $(window).load(function() {
- // run this when the whole page has been downloaded
- });
您可能有所体会,等待窗口加载的过程是非常缓慢而且令人痛苦的,这是因为必须等整个页面加载完所有的内容,包括页面上所有的的图片。有的时候,您希望首先完成图片加载,但是在大多数情况下,您只需加载超文本标志语言(Hypertext Markup Language,HTML)就可以了。通过在文档中创建特殊的ready
事件,jQuery 解决了这个问题,方法如下:
- $(document).ready(function() {
- // do this stuff when the HTML is all ready
- });
这个代码围绕 document
元素创建了一个 jQuery 对象,然后建立一个函数,用于在 HTML DOM 文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的 jQuery 格式,使用快捷方式调用这个函数。这很简单,只需向$()
函数传递一个函数就可以了:
- $(function() {
- // run this when the HTML is done downloading
- });
到目前以止,我已经向大家介绍了 $()
函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象。清单 3 显示的示例在页面中添加了一个段落。
- $('<p></p>')
- .html('Hey World!')
- .css('background', 'yellow')
- .appendTo("body");
在前一个例子中您可能已经注意到,jQuery 中的另一个功能强大的特性就是方法链接(method chaining)。每次对 jQuery 对象调用方法时,方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法,那么您不必重新键入选择器就可以实现这一目的:使 Ajax 变得简单
- $('#message').css('background', 'yellow').html('Hello!').show();
|
使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用 load()
函数即可。下面是一个用于更新统计信息的示例:
- $('#stats').load('stats.html');
通常,我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现这一操作非常地简单。您可以使用 $.post()
或者$.get()
,这由所需的方法决定。如果需要的话,您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。
- $.post('save.cgi', {
- text: 'my string',
- number: 23
- }, function() {
- alert('Your data has been saved.');
- });
如果您确实需要编写一些复杂的 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('Error loading XML document');
- },
- success: function(xml){
- // do something with xml
- }
- });
当 success 回调函数返回 XML 文档后,您可以使用 jQuery 检索这个 XML 文档,其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易,并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了success
函数的一个扩展,它为 XML 中的每个 <item>
元素都添加了一个列表项到 Web 页面中。
- success: function(xml){
- $(xml).find('item').each(function(){
- var item_text = $(this).text();
- $('<li></li>')
- .html(item_text)
- .appendTo('ol');
- });
- }
为 HTML 添加动画
可以使用 jQuery 处理基本的动画和显示效果。animate()
函数是动画代码的核心,它用于更改任何随时间变化的数值型的 CSS 样式值。比方说,您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度,定为毫秒或者预定义的速度:慢速,中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。请注意,这些参数没有开始值,只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。
- $('#grow').animate({ height: 500, width: 500 }, "slow", function(){
- alert('The element is done growing!');
- });
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 对象。
如果配合方法链接(method chaining)一起使用,这些函数可以使复杂的操作看上去非常简单。清单 7显示了一个示例,其中包含有一个登录表单并处理了一些与之有关的元素。
清单 7. 轻松地遍历和处理 DOM
- $('form#login')
- // hide all the labels inside the form with the 'optional' class
- .find('label.optional').hide().end()
- // add a red border to any password fields in the form
- .find('input:password').css('border', '1px solid red').end()
- // add a submit handler to the form
- .submit(function(){
- return confirm('Are you sure you want to submit?');
- });
不管您是否相信,这个示例只是一行满是空白的被链接的代码。首先,选择登录表单。然后,发现其中含有可选标签,隐藏它们,并调用 end()
返回表单。然后,我创建了密码字段,将其边界变为红色,再次调用end()
返回表单。最后,我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是(除了其简洁性以外),jQuery 完全优化了所有的查询操作,确保将所有内容很好地链接在一起后,不需要对一个元素执行两次查询。
处理常见事件就像调用函数(比方说 click()
、submit()
或 mouseover()
)和为其传递事件处理函数一样简单。此外,还可以使用bind('eventname', function(){})
指定自定义的事件处理程序。可以使用unbind('eventname')
删除某些事件或者使用unbind()
删除所有的事件。有关这些函数的使用方法的完整列表,请参阅参考资料 中的 jQuery 应用程序编程接口(Application Program Interface,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', '1px solid #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(){
- return this;
- };
虽然非常简单,但是还是需要对这个插件进行一些解释。首先,如果要为每一个 jQuery 对象添加一个函数,必须把该函数指派给 $.fn
。第二,这个函数必须要返回一个this
(jQuery 对象),这样才不至于打断方法链接(method chaining)。
可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件,以替代使用 css('background')
,可以使用下面的代码:
- $.fn.background = function(bg){
- return this.css('background', bg);
- };
清注意,可以只从 css()
返回值,因为已经返回了 jQuery 对象。因此,方法链接(method chaining)仍然运作良好。
我建议在需要重复工作的时候使用 jQuery 插件。比方说,如果您需要使用 each()
函数反复执行相同的操作,那么可以使用一个插件来完成。
由于 jQuery 插件相当易于编写,所以有上百种可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器,以及我们可以想到的一切效果。有关插件的完整列表,请参阅参考资料。
最为复杂、使用最为广泛的插件要属界面(Interface),它是一种动画插件,用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面(User Interface,UI)。界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 一样。
表单插件也同样流行且非常有用,通过它可以使用 Ajax 在后台中轻松地提交表单。这个插件用于处理一些常见的情况:您需要截获某个表单的提交事件,找出所有不同的输入字段,并使用这些字段构造一个 Ajax 调用。
发表评论
-
CSS中position属性值relative与absolute区别
2012-04-21 21:45 927背景: 在做网页设计时,需要定位HTML元素位置时 ... -
基于jquery的树-xtree操作文档
2012-04-21 21:42 1221XTREE使用的树结构 <!- ... -
XmlHttpRequest部分浏览器中不支持put/delete
2012-04-20 20:17 1118后端同事想采用REST风格,hailiang在看jQue ... -
java5线程并发库的应用
2012-04-19 16:17 1090[java] view plaincop ... -
JSTL标签用法
2012-04-19 16:15 769关键字:JSTL标签、<c:choose>、 ... -
java多线程Socket实用例子
2012-04-18 18:26 1459//服务器import java.io.Buffere ... -
Java 文件上传和下载组件的设计与实现
2012-04-18 18:24 1111概 述 文件上传 ... -
Java程序员常用工具集
2012-04-18 18:22 1084我发现很多人没办法高效地解决问题的关键原因是 ...
相关推荐
总的来说,jmpress.js是一个强大的工具,它利用jQuery库的力量,为网页开发人员提供了一种创造性的方法来构建引人注目的3D幻灯片展示,同时提供了丰富的自定义选项,以满足各种项目需求。无论是展示产品、分享故事...
8)Ajax请求:使用jQuery的$.ajax方法,实现异步数据加载,更新网页内容: ```javascript $.ajax({ url: "data.json", type: "GET", dataType: "json", success: function(data) { // 更新HTML元素,展示获取...
Jquery+.net实现图像缩放截取(类似开心网) ...这个ui库完全兼容jquery的语法,也就是说隐式迭代、超级强大的selector等都可以无缝的使用,这比起dojo,ext等组件库使用起来要更为方便和轻量些。
jQuery是目前最流行的JavaScript库之一,它极大地简化...jQuery的流行也得益于它的易用性和强大的功能,通过学习这些网站上的内容,可以帮助开发者快速掌握这一技术,并且能够有效地利用它来增强网页的功能性和交互性。
使用选择器 $('#slides') 来选取页面中ID为"slides"的元素,并对其调用slides方法,这是jQuery插件提供的一个专门用于实现幻灯片效果的方法。在调用该方法时,可以设置多个参数以自定义轮播的特性,如: - preload:...
在这篇关于jQuery回调函数的文章中,作者通过一个简单的示例向我们展示了如何使用回调函数来控制事件执行的顺序。以下是本文所涉及的知识点: 1. jQuery的定义和作用: jQuery是一个快速、小巧且功能丰富的...
jQuery作为一款强大的JavaScript库,提供了丰富的API和插件,使得实现Tab切换功能变得既快速又简单。本文将深入探讨如何利用jQuery实现Tab切换,并分享一些适用于PC和移动端的技巧。 一、jQuery Tab切换基础 1. ...
- **选择器**:jQuery强大的选择器能够轻松地选取DOM元素,方便对爱心动画的控制。 - **动画效果**:jQuery的`.animate()`方法可实现平滑的动画效果,用于爱心的出现、消失、旋转等视觉特效。 - **事件处理**:...
为了提高开发效率和代码质量,开发者可能会使用jQuery或Three.js等框架。jQuery简化了DOM操作,而Three.js则专门用于创建3D图形,虽然“超级跳”可能是2D游戏,但某些效果可能借鉴了3D技术。 4. **微信JS-SDK**: ...
- jQuery选择器的强大功能与使用技巧。 - 使用jQuery简化DOM操作的方法。 - jQuery插件开发基础。 2. **JavaScript框架高级编程** - **核心知识点**: - 前端主流框架(如React、Vue.js)的核心概念。 - 组件...
熟悉JQuery的基本选择器、DOM操作方法(如`.append()`、`.remove()`)以及动画效果(如`.fadeIn()`)是必备技能。 JSP(JavaServer Pages)是Java的动态网页技术,将Java代码嵌入到HTML中,用于服务器端的编程。面试...
Jquery+.net实现图像缩放截取(类似开心网) ...这个ui库完全兼容jquery的语法,也就是说隐式迭代、超级强大的selector等都可以无缝的使用,这比起dojo,ext等组件库使用起来要更为方便和轻量些。 作者:brightwang
ITEYE是中国知名的IT技术交流平台,博主“jushi1988”可能在博客中详细介绍了这个日历系统的特点、使用方法或者源码分析,帮助其他开发者理解和使用。 【标签】:“源码”标签表明这个日历应用或库是开放源代码的,...
总的来说,这款“超漂亮flash迷你播放器”以其精美的设计、强大的功能和灵活的自定义性,为网页音乐播放提供了新的可能。在实际应用中,开发者可以通过深入学习和实践,发掘其更多的潜力,让网页的音乐播放更加生动...
5. **jQuery的$.ajax()**:如果游戏需要与服务器进行数据交换,如保存分数、获取排行榜等,jQuery的`$.ajax()`方法可以方便地发起异步请求。这使得游戏具有网络社交特性,用户可以分享得分或与朋友竞争。 总的来说...
1. **学习成本**:虽然H-ui.admin3.1设计精美且功能强大,但初次接触可能需要花费一定时间来熟悉其结构和用法。 2. **依赖库**:该模版可能依赖于一些前端库,如jQuery、Bootstrap等,确保项目中已正确引入这些库...
- **DOM操作**:使用jQuery库操作DOM元素,实现页面动态加载和更新。 - **函数定义**:如`reload_html()`用于重载页面,`addhtml()`添加HTML内容等。 - **动画实现**:使用`<canvas>`和JavaScript绘制动态图案,如...
9. **文档支持**:为了帮助用户更好地理解和使用模板,开发者通常会提供详细的使用指南或文档,解释模板的特点、设置方法以及常见问题的解决方案。 10. **版权与许可**:最后,模板的使用需要遵循一定的版权规定,...
- **基本数据结构**:讲解 JavaScript 中的基本数据类型(如字符串、数字、布尔值等)以及复合数据类型(数组、对象等)的使用方法。 - **程序构成**:探讨 JavaScript 程序的基本组成部分,包括变量声明、函数定义...
5. **jQuery插件开发**:“梅超风”插件可能包含了自定义的jQuery方法,用于初始化布局、监听滚动事件和加载新内容等关键功能。 6. **适配性**:考虑到不同的浏览器对CSS3和jQuery的支持程度,开发此类布局时需要...