JS-jQuery：百科

ylbtech-JS-jQuery：百科

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.返回顶部

1、

中文名：极快瑞

外文名：jQuery

核心理念：write less,do more

发布时间：2006年1月

发布人：John Resig

发布地点：美国纽约

最新版本：jQuery 3.4.1

第一个版本：jQuery 1.0（2006年1月）

内部引入库：Sizzle.js

目录

1. 1 发展历程
2. 2 编程开发
3. 3 语言特点
4. 4 工作原理

1. 5 语言基础
2. ▪ 选择器
3. ▪ 事件处理
4. 6 技术应用

1. 7 学习指南
2. 8 语言评价

2、

2.返回顶部

1、

发展历程

2005年8月，John Resig提议改进Prototype的“Behaviour”库，于是他在blog上发表了自己的想法，并用了3个例子做简单的流程说明。

第一个例子是为元素注册一个事件：

1 2 3 4 5 6 7

Behaviour.register({     '#example li': function(e){         e.onclick = function(){             this.parentNode.removeChild(this);         }     } });

他认为应该改写为：

1 2 3 4 5

$('#example li').bind('click',function(){     this.parentNode.removeChild(this); });       第二个例子是为不同的元素注册不同的事件：

1 2 3 4 5 6 7 8 9 10 11 12

Behaviour.register({     'b.someclass' : function(e){         e.onclick = function(){             alert(this.innerHTML);         }     },     '#someid u' : function(e){         e.onmouseover = function(){             this.innerHTML = "BLAH!";         }     } });

他认为应该改写为：

1 2 3 4 5 6

$('b.someclass').bind('click',function(){     alert(this.innerHTML); }); $('#someid u').bind('mouseover',function(){     this.innerHTML = 'BLAH!'; });

第三个例子是为不断变化的元素注册不同的事件：

1 2 3 4 5 6 7 8 9 10 11 12

Behaviour.register({     '#foo ol li': function(a) {        a.title = "List Items!";        a.onclick = function(){ alert('Hello!'); };     },     '#foo ol li.tmp': function(a) {        a.style.color = 'white';     },     '#foo ol li.tmp .foo': function(a) {        a.style.background = 'red'; } });

他认为应该改写为：

1 2 3 4 5 6 7

$('#foo ol li')     .set('title','List Items!')     .bind('click',function(){ alert('Hello!'); })     .select('.tmp')     .style('color','white')     .select('.foo')     .style('background','red');

这些代码也是jQuery语法的最初雏形。当时John的想法很简单：他发现这种语法相对现有的JavaScript库更为简洁。但他没想到的是，这篇文章一经发布就引起了业界的关注。于是John开始认真思考着这件事情（编写语法更为简洁的JavaScript程序库），直到2006年1月14日，John正式宣布以jQuery的名称发布自己的程序库。随之而来的是jQuery的快速发展。

2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。

2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。同年9月，jQuery 1.2版发布，它去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。这一版能够对效果进行更为灵活的定制，而且借助新增的命名空间事件，也使插件开发变得更容易。同时，jQuery UI项目也开始启动，这个新的套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放、拖拽、排序）的工具。

2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多BUG，而且有不少的性能得到提高。因此，如果以前的jQuery版本升级到1.2.6，那么完全可以从代码中排除Dimensions插件（一个获得元素尺寸、定位的插件）。

在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员，其他成员还有Google，Intel，IBM，Intuit等公司。

2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle，在各个浏览器下全面超越其他同类型JavaScript框架的查询速度，程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法，使用live()方法可以为当前及将来增加的元素绑定事件，在1.3版之前，如果要为将来增加的元素绑定事件，需要使用livequery插件，而在1.3版中，可以直接用live()方法。

2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jquery14.com站点，带来了连续14天的新版本专题介绍。

在1.3及更早版本中，jQuery通过JavaScript的eval方法来解析json对象。在1.4中，如果你用的浏览器支持，则会使用原生的JSON.parse解析json对象，这样对json对象的书写验证则更为严格。比如：{foo: "bar"}的写法将不会被验证为合法的json对象，必须写成{"foo":"bar"}。如果你的程序打算升级到1.4版本，那么这一点要尤其注意。

2010年2月，jQuery 1.4.2版发布，它新增了有关事件委托的两个方法：delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便，而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件，代码如下：

1 2 3 4 5 6 7 8 9 10

//1.4.2 $("table").delegate("td", "hover", function(){     $(this).toggleClass("hover"); }); //1.3.2 $("table").each(function(){     $("td", this).live("hover", function(){         $(this).toggleClass("hover");     }); });

2011年1月，jQuery 1.5版发布。

2011年11月，jQuery 1.7版发布。

 

编程开发

运行jQuery所需的条件很简单：一台计算机、一个智能电话或一个可以运行现代浏览器的设备。jQuery对浏览器的要求也相当自由。官方网站列出了下列支持jQuery的浏览器：

FirefoX 2．0+

Internet Explorer 6+

Safari 3+

Opera 10．6+

Chrome 8+

编程工具

Notepad++：一套有特色的自由软件的纯文字编辑器，有完整的中文化接口及支持多国语言编写的功能。它的功能比Windows中的 Notepad（记事本）强大，除了可以用来制作一般的纯文字说明文件，也十分适合当作编写电脑程序的编辑器。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。

Brackets：一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 （IDE工具）。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持Windows、Linux平台。Brackets的特点是简约、优雅、快捷，它的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等。

JS Nice：一款让经过混淆处理的JavaScript代码可读更好的工具。它使用一种用于JavaScript代码美化的去混淆和去压缩引擎。JSNice采用先进的机器学习和程序分析技术，从可用的开源项目学习命名和类型规律。

 

语言特点

快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

创建AJAX无刷新网页

AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

 

工作原理

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

在构造jQuery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle（一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合）遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。

浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果，其他模块则基于这些测试结果来解决浏览器之间的兼容性问题。

在底层支持模块中，回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；异步队列模块用于解耦异步任务和回调函数，它在回调函数列表的基础上为回调函数增加了状态，并提供了多个回调函数列表，支持传播任意同步或异步回调函数的成功或失败状态；数据缓存模块用于为DOM元素和Javascript对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的入队和出队操作，并确保函数按顺序执行，它基于数据缓存模块实现。

在功能模块中，事件系统提供了统一的事件绑定、响应、手动触发和移除机制，它并没有将事件直接绑定到DOM元素上，而是基于数据缓存模块来管理事件；Ajax模块允许从服务器上加载数据，而不用刷新页面，它基于异步队列模块来管理和触发回调函数；动画模块用于向网页中添加动画效果，它基于队列模块来管理和执行动画函数；属性操作模块用于对HTML属性和DOM属性进行读取、设置和移除操作；DOM遍历模块用于在DoM树中遍历父元素、子元素和兄弟元素；DOM操作模块用于插入、移除、复制和替换DOM元素；样式操作模块用于获取计算样式或设置内联样式；坐标模块用于读取或设置DOM元素的文档坐标；尺寸模块用于获取DOM元素的高度和宽度。

 

语言基础

 

选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

1

$("p")

在页面中选取所有 <p> 元素

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

1	$("#test")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

1	$(".test")

 

事件处理

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

1	$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

1 2 3

$("p").click(function(){     // 动作触发后执行的代码!! });

　　

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

1 2 3

$("p").click(function(){     $(this).hide(); });

dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

1 2 3

$("p").dblclick(function(){     $(this).hide(); });

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

1 2 3

$("#p1").mouseenter(function(){     alert("You entered p1!"); });

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

1 2 3

$("#p1").mouseleave(function(){     alert("Bye! You now leave p1!"); });

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

1 2 3

$("#p1").mousedown(function(){     alert("Mouse down over p1!"); });

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

1 2 3

$("#p1").mouseup(function(){     alert("Mouse up over p1!"); });

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。

1 2 3 4 5 6

$("#p1").hover(function(){     alert("You entered p1!");     },     function(){     alert("Bye! You now leave p1!"); });

focus()

当元素获得焦点时，发生focus事件。

当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。

focus()方法触发 focus 事件，或规定当发生focus事件时运行的函数。

1 2 3

$("input").focus(function(){     $(this).css("background-color","#cccccc"); });

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

1 2 3

$("input").blur(function(){     $(this).css("background-color","#ffffff"); });

参考资料来源

 

技术应用

网站

只需要少量的代码，即可将它们集成到网站上，并且能够帮助访问者分享网站上的内容。 [12] 

移动端

JQuery Mobile 1. 2是JQuery运行在手机和平板设备上的版本。JQuery Mobile 1. 2给主流移动平台提供了JQuery的核心库，发布了一个完整统一的JQuery移动UI设计框架，在不同的智能手机和桌面电脑的web浏览器上形成统一的用户UI。支持全球主流的移动平台，对每个平台的支持分为三个等级：A、B、C，实现了对Android 2.1-2.3、3.2、4.0、4. 1、windows Phone 7-7 .5，Palm WebOS 1.4-2.0、3.0、Firefox Mobile 15，Opera Mobile 11.5-12等平台的A级支持。JQuery Mobile 1. 2的核心使得基本的HTML标签在所有的浏览器中生效，并且对网页的行为和效果均进行了增强，让网页在等级较高的浏览器中能获得优秀的体验，在较差的浏览器中也能正常的使用。

 

学习指南

jQuery JavaScript与CSS开发入门经典：本书浓墨重彩地描述jQuery的API及jQuery框架的所有基础知识，在实例引导下演示如何使用jQuery框架以超越纯JavaScript的速度实现更多功能，以及如何使用极少代码完成繁琐任务。本书还介绍jQuery UI库的用法，指导使用jQuery UI库创建赏心悦目的专业用户界面。

 

语言评价

jQuery 是继prototype 之后又一个优秀的轻量级JavaScript 框架。其宗旨是———“Write Less, Do More”,写更少的代码,做更多的事情。 它是一个快速和简洁的JavaScript 库，可以简化HTML 文档元素的遍历，事件处理，动画和Ajax 交互以实现快速Web 开发，它被设计用来改变编写JavaScript 脚本的方式。

jQuery 的文档非常丰富，因为其轻量级的特性，文档并不复杂，随着新版本的发布，可以很快被翻译成多种语言，这也为jQuery 的流行提供了条件。jQuery 被包在语法上，jQuery 支持CSS1-3 的选择器， 兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等浏览器。同时，jQuery 有约几千种丰富多彩的插件，大量有趣的扩展和出色的社区支持，这弥补了jQuery功能较少的不足并为jQuery 提供了众多非常有用的功能扩展。加之其简单易学，jQuery 很快成为当今最为流行的JavaScript 库，成为开发网站等复杂度较低的Web 应用程序的首选JavaScript 库，并得到了大公司如微软，Google 的支持。

jQuery 最有特色的语法特点就是与CSS 语法相似的选择器，并且它支持CSS1 到CSS3 的几乎所有选择器，并兼容所有主流浏览器，这为快速访问DOM 提供了方便。

2、

3.返回顶部

 

4.返回顶部

 

5.返回顶部

0、

https://baike.baidu.com/item/jquery

1、

https://jquery.com/

2、

 

6.返回顶部

 

作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。