Jul 23

[原] jQuery介绍 晴

linuxing , 18:23 , 编程 » JavaScript , 评论(0) , 引用(0) , 阅读(18694) , Via 本站原创 | |
    jQuery由John Resig创建的开源项目,是一个强大的JavaScript库,其核心团队由富有献身精神的顶尖JavaScript开发人员组成。jQuery在一个紧凑的文件中提供了丰富的特性、简单易学的语法和稳健的跨平台兼容性。还有过百种为jQuery开发的扩展插件,使得它几乎成为各类客户端脚本编程的必备工具。

一、jQuery是什么
jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM)脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家,jQuery 都会是您的首选。
jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery,您可以把握问题的要点,并使用尽可能最少的代码实现您想要的功能。
毫无疑问,jQuery 的原理是独一无二的:它的目的就是保证代码简洁并可重用。当您理解并体会这一原理后,便可以开始学习本教程了,看看 jQuery 对我们的编程方式有多少改进吧。

jQuery官方网站:http://jquery.com

二、jQuery能做什么
jQuery库为共同的web脚本提供了一种通用的抽象层,使用其特定的语法定义,这些核心特性能满足以下需求:
1、获取页面的部分内容
不适用JavaScript库,必须写很多代码来遍历DOM树,并定位一个HTML文档的指定部分。jQuery提供了一个强大而有效的选择机制来返回被检查或被操作的文档。
2、修改页面的外观
jQuery可改变文档一部分中的类或独立的样式属性,方便配合CSS使用。
3、修改页面的内容
jQuery可以用很少的按键就可修改文档的内容本身。文本可改变,图像可插入或替换,列表可重新排序或整个HTML结构被重写和扩展。
4、在页面中响应用户的交互
jQuery库提供了一个优雅的方法来截取很多事件,而不需要将事件句柄混杂到HTML代码中。同时,事件句柄API也解决了浏览器标准不一致的问题。
5、给页面加上动画
jQuery提供了一组效果来实现动画,而提供有效的交互行为。
6、无刷新返回服务器端的信息
也就是AJAX应用,协助web开发者制作可响应的功能丰富的网站。
7、简化共同的JavaScript任务
除了jQuery指定的文档特性外,这个库还提供了改进基本JavaScript结构,如迭代和数组操作。

三、为什么选择jQuery
可选择的JavaScript框架很多,例如Spry等。选择jQuery的原因是:
1、CSS的知识
以CSS选择器定位页面元素机制为基础,jQuery集成了表现文档结构的简洁而易读的方法。
2、支持扩展
为了避免特征变化,jQuery提供了专项用途的插件,很多扩展功能都可通过插件来完成。甚至基本的jQuery有很大部分的特性也是通过插入式结构内部实现的,可以按需缩小库。
3、去除浏览的错误
jQuery加入了一个抽象层来规范不同浏览器的共同的任务,并减少代码的大小,尽量的简化它,目前已经支持主流的各种浏览器。
4、总是以集合工作
当我们通知jQuery,查找所有某个类时,不必循环每个返回的元素,相反,jQuery使用称为隐含迭代的模式,这意味着很多循环结构变得不必要了。
5、允许在一行有多个动作
为了避免过度使用临时的变量或浪费的重复,jQuery在它的大多数方法中使用了一个称为链式的变成模式,这意味着在对象的很多操作的结果都是这个对象的本身,为下一个动作做准备以应用它。

这些战略让jQuery包很请求,同时提供了保持使用这个库的自定义代码的简单技术,而且该开源项目是在GNU Public License和MIT License两重许可下发布的,用户可完全免费使用。

三、一个简单的jQuery代码
在使用导入jQuery库后,即可使用类似如下的代码:

$(document).ready(function () {
  $('.poem-stanza').addClass('emphasized');
});

代码的含义非常简单:
$()是一个选择符,根据输入的内容在DOM中选择特定的元素,例如$(document)是指DOM的根,$('.poem-stanza')则选择了属于class=poem-stanza的类元素,这里使用的就是CSS的定位方式;
然后,$(document).ready()选择了一个事件,即在DOM被夹在完毕后调用该方法,而方法利用一个匿名函数来定义;
最后,给特定的元素通过addClass方法添加新的class类,完成改变或修改CSS类的动作。由于jQuery会自动进行迭代,我们就不需要手动输入循环的代码了。
Tags:
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]