jQuery 是一个JavaScript 库,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。
<!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
jQuery 是什么?
|
请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
|
|
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 实现的相同的功能。
清单 2. 使用了 jQuery 的 DOM 脚本
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});
|
是不是很神奇? 使用 jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。无需对元素进行循环,click()
函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。首先,我们使用了 $()
函数 —— jQuery 中功能最强大的函数。通常,我们都是使用这个函数从文档中选择元素。在本例中,一个包含有一些层叠样式表(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 显示的示例在页面中添加了一个段落。
清单 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 显示了一个发送数据和使用回调的简单示例。
清单 4. 使用 Ajax 向页面发送数据
$.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 页面中。
清单 6. 使用 jQuery 处理 XML 文档
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):
如果需要找出所有不含特定类的元素呢? CSS3 同样提供了一个语法可以完成这个目的,使用 :not
伪选择器: 如下代码显示了如何隐藏所有不含 required
类的输入内容:
$('input:not(.required)').hide();
|
与在 CSS 中一样,可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例:
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 调用。
分享到:
相关推荐
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程,旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
《jQuery基础教程第四版》是一本深受欢迎的前端开发指南,专注于jQuery库的使用和实践。jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了JavaScript操作DOM(文档对象模型)、事件处理、动画制作以及Ajax...
以下是关于jQuery基础教程第5章的一些核心知识点: 1. **选择器**:jQuery的选择器基于CSS,允许开发者轻松地选取DOM中的元素。如`$("#id")`用于选取ID为"id"的元素,`$(".class")`用于选取所有class为"class"的...
《jQuery基础教程(第四版)中文pdf版+配套源码》是针对JavaScript库jQuery的一份详细学习资源,旨在帮助初学者和进阶开发者掌握jQuery的核心概念和技术。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历...
jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记
这个"jQuery基础教程源码"资源包含了与《jQuery基础教程》一书配套的所有实例源代码,旨在帮助读者更好地理解和实践jQuery的核心概念。 在jQuery中,DOM(文档对象模型)操作是其主要功能之一。DOM是HTML和XML文档...
《jQuery基础教程(第4版)》是jQuery经典技术教程的最新升级版,涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了jQuery的核心组件,包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7...
《jQuery基础教程(第二版)源码》是一个用于学习jQuery库的配套资源,包含了多个章节的实例代码。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个教程源码...
### jQuery基础教程知识点详解 #### 一、jQuery技术框架概览 **1.1 jQuery的起源与发展** - **创建者**: John Resig在2006年初创建了jQuery。 - **最新版本**: 截至资料所述时,最新版本为1.3.2。 - **官方...
《jQuery基础教程(第四版)中文》是一本深入浅出介绍jQuery库的指南,适合初学者和有一定经验的开发者。jQuery是JavaScript的一个强大框架,它简化了DOM操作、事件处理、动画效果以及Ajax交互,极大地提高了开发...
**jQuery基础教程(第二版)** jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的使用,尤其是处理HTML文档、事件处理、动画效果以及AJAX交互。本教程将深入探讨jQuery的核心概念和功能,...
"jQuery基础教程源码 第三版"是一本旨在帮助初学者和有经验的开发者深入了解jQuery的著作。在这个版本中,作者深入浅出地介绍了jQuery的核心概念、方法和最佳实践,通过实例代码帮助读者更好地理解和应用jQuery。 ...
《jQuery基础教程第四版》是一本专为初学者设计的指南,旨在帮助读者掌握JavaScript库jQuery的核心概念和技术。jQuery简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务,是Web开发中广泛使用的工具。这...
以上介绍了jQuery基础的相关知识点,包括它作为一种JavaScript库的重要性,学习过程中需要关注的关键点,书籍的版权和使用规范,课程的设计理念,以及如何获取和使用示例代码。掌握这些知识,对于前端开发者来说是一...
### jQuery基础教程(第四版)知识点总结 #### 一、jQuery简介与背景 - **诞生时间**:2006年1月14日 - **创始人**:John Resig,一位年轻的80后程序员 - **背景**: - 在jQuery诞生之前,已经有像Dojo和...
《jQuery基础教程第二版》正是应这样的需求而生。这本书不仅详细地介绍了jQuery的基础知识,还通过实例和代码片段让初学者快速上手。更重要的是,书中涵盖了jQuery的核心概念和高级应用,使得即便是经验丰富的开发者...
**jQuery基础教程(高清中文版PDF)** 这本由Jonathan Chaffer和Karl Swedberg编写的《jQuery基础教程》是国外备受推崇的经典著作,它深入浅出地讲解了jQuery库的基础知识,对于想要掌握JavaScript前端开发的人员来说...