jQuery

生活百科 2023-01-25 18:03生活百科www.aizhengw.cn

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+等。

基本介绍

  • 中文名极快瑞
  • 外文名jQuery
  • 核心理念write less,do more
  • 发布时间2006年1月
  • 发布人John Resig
  • 发布地点美国纽约
  • 最新版本jQuery 3.4.1
  • 第一个版本jQuery 1.0(2006年1月)
  • 内部引入库Sizzle.js

发展历程

2005年8月,John Resig提议改进Prototype的“Behaviour”库,于是他在blog上发表了自己的想法,并用了3个例子做简单的流程说明。
第一个例子是为元素注册一个事件
Behaviour.register({    '#example li': function(e){        e.onclick = function(){            this.parentNode.removeChild(this);        }    }});
他认为应该改写为
$('#example li').bind('click',function(){    this.parentNode.removeChild(this);});    第二个例子是为不同的元素注册不同的事件
Behaviour.register({    'b.someclass' : function(e){        e.onclick = function(){            alert(this.innerHTML);        }    },    '#someid u' : function(e){        e.onmouseover = function(){            this.innerHTML = "BLAH!";        }    }});
他认为应该改写为
$('b.someclass').bind('click',function(){    alert(this.innerHTML);});$('#someid u').bind('mouseover',function(){    this.innerHTML = 'BLAH!';});
第三个例子是为不断变化的元素注册不同的事件
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';}});
他认为应该改写为
$('#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.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和ML的简称,可以开发出非常灵敏无刷新的网页,特别是开发伺服器端网页时,比如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 元素选择器基于元素名选取元素。
$("p")
在页面中选取所有 <p> 元素
id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下
$("#test")
class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下
$(".test")

事件处理

jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件
$("p").click();
下一步是定义什幺时间触发事件。您可以通过一个事件函式实现
$("p").click(function(){    // 动作触发后执行的代码!!});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全载入完后执行函式。该事件方法在jQuery 语法章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函式。
该函式在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素
$("p").click(function(){    $(this).hide();});
dblclick()
当双击元素时,会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函式
$("p").dblclick(function(){    $(this).hide();});
mouseenter()
当滑鼠指针穿过元素时,会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函式。
$("#p1").mouseenter(function(){    alert("You entered p1!");});
mouseleave()
当滑鼠指针离开元素时,会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函式
$("#p1").mouseleave(function(){    alert("Bye! You now leave p1!");});
mousedown()
当滑鼠指针移动到元素上方,并按下滑鼠按键时,会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函式
$("#p1").mousedown(function(){    alert("Mouse down over p1!");});
mouseup()
当在元素上鬆开滑鼠按钮时,会发生 mouseup 事件。
方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函式
$("#p1").mouseup(function(){    alert("Mouse up over p1!");});
hover()
hover()方法用于模拟游标悬停事件。
当滑鼠移动到元素上时,会触发指定的第一个函式(mouseenter);当滑鼠移出这个元素时,会触发指定的第二个函式(mouseleave)。
$("#p1").hover(function(){    alert("You entered p1!");    },    function(){    alert("Bye! You now leave p1!");});
focus()
当元素获得焦点时,发生focus事件。
当通过滑鼠点击选中元素或通过tab键定位到元素时,该元素就会获得焦点。
focus()方法触发 focus 事件,或规定当发生focus事件时运行的函式。
$("input").focus(function(){    $(this).css("background-color","#cccccc");});
blur()
当元素失去焦点时,发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函式
$("input").blur(function(){    $(this).css("background-color","#ffffff");});
参考资料来源

技术套用

网站
只需要少量的代码,即可将它们集成到网站上,并且能够帮助访问者分享网站上的内容。
移动端
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 提供了方便。
上一篇:cda(CD音频格式) 下一篇:PANTONE色卡

Copyright@2015-2025 www.aizhengw.cn 癌症网版板所有