十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
创新互联公司执着的坚持网站建设,成都微信小程序;我们不会转行,已经持续稳定运营十余年。专业的技术,丰富的成功经验和创作思维,提供一站式互联网解决方案,以客户的口碑塑造品牌,携手广大客户,共同发展进步。
jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。所以在网站设计中使用jQuery可以写更少的代码实现更多的功能。而且它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
扩展资料:
jQuery的语言特点:
1、快速获取文档元素
jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。
2、提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。
3、创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。
参考资料:百度百科——jQuery
:
建议不要用新的版本,个人建议初学用早年的1.5.1版本。
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。
历史
大概在 1992 年,一家称作 Nombas 的公司开发了一种叫做 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。Cmm 背后的理念很简单:一个足够强大可以替代宏操作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中,它首次向开发人员展示了这种语言的威力。
Nombas 最终把 Cmm 的名字改成了 ScriptEase,原因是后面的部分(mm)听起来过于消极,同时字母 C “令人害怕”。
当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。
当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。此时,大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络,即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是,仅仅为了简单的表单有效性验证,就要与服务器进行多次地往返交互。设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段。
那时正处于技术革新最前沿的 Netscape,开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。
当时工作于 Netscape 的 Brendan Eich,开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。
就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报,JavaScript 从此变成了因特网的必备组件。
因为 JavaScript 1.0 如此成功,Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候,微软决定进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉,但也成为 JavaScript 语言发展过程中的重要一步。
在微软进入后,有 3 种不同的 JavaScript 版本同时存在:Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是,JavaScript 并没有一个标准来统一其语法或特性,而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。
2006年1月,jQuery的第一个版本面世,至今已经有10年多了(注:这个时间点是截止至出书时间)。虽然过了这么久,但它依然以其简洁、灵活的编程风格让人一见倾心。在本篇文章中,我们将讲述jQuery的发展 历史 ,让读者对jQuery有更多的了解。
在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()方法。 2005年8月,John Resig提议改进Prototype的“Behaviour”库,于是他在blog上发表了自己的想法,并用了3个例子做说明。
2010年2月,jQuery 1.4.2版发布,它新增了有关事件委托的两个方法:delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便,而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件
特点
1.动态特效
2.AJAX
3.通过插件来扩展
4.方便的工具 - 例如浏览器版本判断
5.渐进增强
6.链式调用
7.多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)
历史 版本
jQuery 1.0
(2006年8月):该库的第一个稳定版本,已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。
jQuery 1.1
(2007年1月):这一版大幅简化了API。许多较少使用的方法被合并,减少了需要掌握和解释的方法数量。
jQuery 1.1.3
(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。
jQuery 1.2
(2007年9月):这一版去掉了对XPath选择符的支持,原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。
jQuery UI(2007年9月):这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件(widget),以及一组用于构建高级元素(例如可拖放的界面元素)的工具。
jQuery 1.2.6
(2008年5月):这一版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。
jQuery 1.3
(2009年1月):这一版使用了全新的选择符引擎Sizzle,库的性能也因此有了极大提升。这一版正式支持事件委托特性。
jQuery 1.3.2
(2009年2月):这次小版本升级进一步提升了库的性能,例如改进了:visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外,也支持查询的元素按文档顺序返回。
jQuery 1.4
(2010年1月14号):对代码库进行了内部重写组织,开始建立一些风格规范。老的core.js文件被分为attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js;CSS和attribute的逻辑分离。
重要变化:
1. Ajax重写
Ajax模块完全进行了重写。新增一个jXHR对象,为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制,比如JSONP请求,jXHR对象也可以进行处理。(详情可以参见:jQuery.ajax文档)
此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。
2. 延迟对象
延迟对象(Deferred Object,jQuery.Deferred对象)是一个可链接的(chainable)实用工具对象,实现了Promise接口,可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的,其结果是在jQuery中能够将依赖于某个任务(事件)结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此通过jQuery编写Ajax程序将自动获得这一功能。
开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果),而且第一次能够附加多个事件处理器。
例如,使用了新的jQuery内部Ajax API就可以实现下面的代码了:
// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete"); });
此外,使用jQuery.Deferred还可以开发自己的延迟对象。更多详情参见:延迟对象文档。
3. jQuery.sub()
jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget工厂。
值得注意的是,sub函数并不提供真正的隔离,所有方法、数据、调用仍然依靠jQuery本身来支持。
4. 遍历性能提高
在新版本中.children(),.prev(),.next()几个常用的遍历函数性能有了显著提高。
5. 内部开发系统
John Resig还特别提到了jQuery团队内部开发系统的两点改变:一是服务器端用Node.js替换了老的Java/Rhino系统,使得团队可以专注于JavaScript环境的新变化;二是所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意。
使用方法
jQuery可以下载使用,有两个版本的 jQuery 可供下载
Production version - 用于实际的网站中,已被精简和压缩。
Development version - 用于测试和开发(未压缩,是可读的代码)
jQuery 1.8.0版时压缩前后的对比
插件机制
jQuery的官方插件是jQuery UI。开发者可以任意扩展jQuery的函数库或者按照自己的需求开发UI组件。网上已经有数以万计的jQuery插件,覆盖各种各样的需求。例如Ajax辅助、数据表格、动态列表、XML工具、拖曳、cookie处理、弹出层等等。jQuery 的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择,例如ComponentOne Studio for ASP NET Wijmo.
随着jQuery插件在网站建设过程中的使用率不断的增加,所以有必要跟进时代步伐开发出一些新的插件/代码片段,以此来巩固并提高前端用户体验,将用户体验提升到一个新的高度。其中包括Flat jQuery Price Slider、Gmaps jQuery Map Plugin 、FormChimp——MailChimp Ajax plugin for jQuery 等。
控件
jQuery Gantt控件是一个基于原生HTML5/jQuery,功能丰富的控件,该控件真正实现了跨平台,在许多设备和浏览器中无缝的运行。
使用项目甘特图中内置的调度,依赖等功能实现任务分层列表的可视化。
使用资源甘特图实现一个资源利用视图。
使用基于API的jQuery或者基于API的MVC可帮您轻松地安装甘特图并加快应用速度。
可与诸如KnockOut(KO),jQuery.tmpl等流行的jQuery模式一同使用。
Jquery实战
基本的CSS选择器
熟悉web开发的人员一定对css的选择功能相当的了解,通过css选择功能,我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制,使jQuery的元素选择能力易常强大。
a——选择所有元素
#specialID——选择匹配id为specialID的元素
.specialClass——选择匹配拥有css类sepcialClass的元素
a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的元素
p a.specialClass——匹配拥有css类specialClass、在
元素内的元素
除了支持传统的css选择器,Jquery还支持CSS3选择功能。
子节点选择器
$("p a") 选择元素
的直接子节点的元素,非直接子节点的元素将不会被选择到
特性选择器
特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素
如我们需要做如下的'选择:匹配所有指向本网站之外地址的链接,我们可以这样选择
$("a[href^=http://") 该选择器选择具有href属性,且href属性值以http://开始的链接元素
特性选择的语法是:
选择具有某特性(属性)的元素
form[method]
选择具有某特性,且属性值为指定值的元素
input[type=text]
选择匹配特性以特定字符开头的元素
div[title^=my] ——选择匹配title特性值已my开头的所有div元素
选择匹配特性以特定字符结束的元素
a[href$=.pdf] ——选择引用了pdf文件的所有链接元素
其他
a[href*=jquery.com]选择引用jQuery网站的所有链接元素
过滤符
通过过滤符选择器可以在已选择的元素中过滤出需要的元素,上面的特性选择器也属于过滤符,另外还有“:”字符
如:
li:has(a)—— 选择匹配包含元素的所有
元素
1. 基础过滤符:
:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象
:not(selector):匹配去除了not后面选择符中内容的项,not中的selector只能是过滤选择器,不能是查找选择器
:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个
:eq(index):匹配某一下表的单独某元素
:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素
:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6
:animated:匹配所有有动画效果的元素
2. 内容过滤符:
:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
:empty:匹配所有没有子元素的对象
:has(selector):匹配所有至少含有一个子选择符的对象
:parent:匹配元素,这些元素包含子元素(包括文本元素)
3. 可见性过滤符:
:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象
4. 子过滤符:
:nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征 nth-child过滤器,从1开始计数,这主要是与css标准兼容。
:first-child:匹配第一个子元素
:last-child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
:only-child:如果一个父元素只有一个子元素,就匹配这个子元素
5. 表单过滤符
:input :匹配表单内input元素
:text :匹配表单内input type为text的元素
:password :匹配表单内input type为password的元素
:radio :匹配表单内input type为radio的元素
:checkbox :匹配表单内input type为checkbox的元素
:submit :匹配表单内input type为submit的元素
:image :匹配表单内image的元素
:reset :匹配表单内input type为reset的元素
:button :匹配表单内input type为button的元素
:file :匹配表单内input type为file的元素.
:hidden :匹配表单内input type为hidden的元素或者hidden区域
:enabled :匹配所有启用元素
:disabled :匹配所有非启用元素
:checked :匹配所有选中元素
:selected :匹配所有下拉列表选中元素
查找选择器和筛选选择器的概念区别
为了能灵活的使用jQuery,认清查找选择器、筛选选择器之间的区别是非常重要的。筛选选择器,通过对元素应用更高的选择标准(如过滤特性或或其他相关值),缩小正在匹配的元素的集合;查找选择器,比如后代选择器(空格)、子节点选择器()以及兄弟节点选择器(+)等,则查找与已选择元素具有某种关系的其他元素,而不是通过把标准应用于已匹配元素来限制匹配范围。 ;
Web开发人员每天都使用JavaScript为他们创建的网站带来必要的功能。jQuery提供了一个提供强大功能和灵活性的特殊工具。jQuery是一个JavaScript库,有助于简化和标准化JavaScript代码和HTML元素之间的交互。JavaScript允许网站具有交互性和动态性,jQuery是一种有助于简化流程的工具。
同时JQuery也是一个紧凑,快速且功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。JQuery结合了多功能性和可扩展性,改变了数百万人编写JavaScript的方式。换句话说,由于JQuery,JavaScript以简化形式呈现。阅读起来相当舒服。
扩展资料:
JQuery的优点
1、易于使用:如果我们将它与标准JavaScript和其他库进行比较,它使用起来既简单又快捷。它由简单的语法组成,并且需要较少的代码行。
2、巨大的库:与其他库相比,它允许您执行大量功能。
3、插件的可用性:可以使用许多预先编写的插件来立即压缩开发过程。这背后的另一个优点是脚本的效率和安全性。
4、综合教程: JQuery网站提供了不言自明的文档和教程,以便在绝对的编程初学者面前进行理解。
5、AJAX支持:它允许我们轻松地开发Ajax模板,Ajax支持更流畅的界面,可以在页面上执行操作,而不需要重新加载整个页面。
6、灵活性:所有浏览器中的契约,是目前最流行的JavaScript库。