Jquery学习文档重点学习汇总.docx

Jquery学习文档重点学习汇总.docx

《Jquery学习文档重点学习汇总.docx》由会员分享，可在线阅读，更多相关《Jquery学习文档重点学习汇总.docx（182页珍藏版）》请在冰豆网上搜索。

Jquery学习文档重点学习汇总

JQuery文档

一、认识jQuery

随着Web2.0的兴起，JavaScript越来越受到重视，一系列的JavaScript库也蓬勃发展起来。

从早期的Prototype、Dojo到2006年的jQuery，再到2007年的ExtJS，互联网正在掀起一场JavaScript风暴。

jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。

1.1JavaScript和JavaScript库

1.1.1JavaScript简介

在正式介绍jQuery之前，有必要先了解一下JavaScript。

JavaScript是Netscape公司开发的一种脚本语言（scriptinglanguage）。

JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含更多活跃的元素和更加精彩的内容。

JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。

正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术-Ajax（AsynchronousJavaScriptAndXML，异步的JavaScript和XML）诞生了。

而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用，例如Gmail、GoogleSuggest和GoogleMap等。

互联网基于JavaScript的应用也越来越多，使JavaScript不再是一种仅仅用于制作Web页面的简单脚本。

1.1.2JavaScript库作用及对比

为了简化JavaScript的开发，一些JavaScript库诞生了。

JavaScript库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。

下面是目前几种流行的JavaScript库的介绍和对比。

Prototype：

Prototype是最早成型的JavaScript库之一，对JavaScript的内置对象（例如String对象、Array对象等）做了大量的扩展。

现在还有很多项目使用Prototype。

Prototype可以看做是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。

使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。

但是由于Prototype成型年代早，从整体上对于面向对象的编程思想把握不是很到位，导致了其结构的松散。

不过现在Prototype也在慢慢改进。

Dojo：

Dojo的强大之处在于Dojo提供了很多其他JavaScript库所没有提供的功能。

例如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等等。

Dojo是一款非常适合企业级应用的JavaScript库，并且得到了IBM、SUN和BEA等一些大公司的支持。

但是Dojo的缺点也是很明显的：

学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。

但是自从Dojo的1.0.0版出现以后，情况有所好转。

Dojo还是一个很有发挥潜力的库。

YUI：

YUI是由Yahoo公司开发的一套完备的、扩展项良好的富交互网页程序工具集。

YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括了几个核心的CSS文件。

该库本身文档极其完备，代码编写也非常规范。

ExtJS：

ExtJS常简称为Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的各种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。

Ext可以用来开发富有华丽外观的富客户端应用，能使B/S应用更加具有活力。

但是由于Ext侧重于界面，本身比较臃肿，所以使用之前请先权衡利弊。

另外，需要注意的事，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。

MooTools：

MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。

MooTools的语法几乎和Prototype一样，但却提供了更为强大的功能、更好的扩展性和兼容性。

其模块化思想非常优秀，核心代码大小只有8KB。

无论用到哪个模块都可及时导入，即使是完整版大小也不超过160KB。

MooTools完全彻底的面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript库。

jQuery：

jQuery同样是一个轻量级的库，拥有强大的选择器，出色的DOM操作，可靠的事件处理、完善的兼容性和链式操作等功能。

这些优点吸引了一批批的JavaScript开发者去学习它、研究它。

总之，每个JavaScript库都有各自的优点和缺点，同时也有各自的支持者和反对者。

自从jQuery诞生那天起，其关注度就一直在稳步上升，jQuery已经逐渐从其他JavaScript库中脱颖而出，成为Web开发人员的最佳选择。

1.2jQuery

1.2.1jQuery简介

jQuery是继Prototype之后有一个优秀的JavaScript库，是一个由JohnResig创建于2006年1月的开源项目。

现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。

团队中由3个核心人物：

JohnResig、BrandonAaron和JornZaefferer。

jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。

其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

总之，无论是网页设计师、后台开发者、业余爱好者是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够都的理由去学习jQuery。

1.2.2jQuery的优势

jQuery强调的理念是写的少，做得多（writeless，domore）。

jQuery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。

概括起来，jQuery有以下优势。

（1）轻量级。

jQuery非常轻巧，采用DeanEdwards编写的Parker压缩后，大小不到30KB。

如果使用Min版并且在服务器启用Gzip压缩后，大小只有18KB。

（2）强大的选择器。

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。

由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易地切入到jQuery的学习中来。

（3）出色的DOM操作的封装。

jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。

JQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。

（4）可靠的事件处理机制

吸取了JavaScript专家DeanEdwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。

在预留退路（gracefuldegradation）、循序渐进以及非入侵式（Unobtrusive）编程思想方法，jQuery也做的非常不错。

（5）完善的Ajax

jQuery将所有的Ajax操作封装到一个函数$.ajax（）里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

（6）不污染顶级变量。

jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。

其别名$也可以随时交出控制权，绝对不会污染其他的对象。

该特性使jQuery可以与其他JavaScript库共存，在项目中放心的引用而不需要考虑到后期可能的冲突。

（7）出色的浏览器兼容性。

作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。

jQuery能够在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常运行。

jQuery同时修复了一些浏览器之间的差异，是开发者不必在开展项目前建立浏览器兼容性。

（8）链式操作方式。

jQuery中最有特色的莫过与它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连接写而无需重复获取对象。

这一特点使jQuery的代码无比优雅。

（9）隐式迭代

当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。

相反，jQuery里的方法都被设计成自动操作对象的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。

（10）行为层与结构层的分离。

开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。

这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。

同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

（11）丰富的插件支持。

jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。

目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。

（12）完善文档。

jQuery的文档非常丰富，现阶段多为英文文档，中文文档相对较少。

很多热爱jQuery团队都在努力完善jQuery的中文文档，例如jQuery的中文API，图灵教育的翻译的《LearningjQuery》等等。

（13）开源。

jQuery是一个开源的产品，任何人都可以自由地使用并提出改进意见。

1.3jQuery代码的编写

JQuery不需要安装，把下载的jquery-1.4.1.js放到网站上的一个公共的位置，想要在某各页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件即可。

在实际项目中，读者可以根据实际需要调整jQuery库路径。

1.3.1第一个jQuery程序（HelloWorld！

）

在开始编写第一个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$（“#foo”）和jQuery（“#foo”）是等价的，如果没有特殊说明，程序中的$符号都是jQuery的一个简写形式。

第一个jQuery程序的主要代码如下：

运行结果如图1-1所示。

图1-1输出HelloWorld

在上面的代码中有一个陌生的代码片段，如下：

$（document）.ready（function（）{

//…………

}）;

这段代码的作用类似于传统JavaScript中的window.onload方法，不过与window.onload还是有些区别。

表格1-1对它们进行了简单对比。

表1-1window.onload与$（document）.ready（）的对比

Window.onload

$（document）.ready（）;

执行时机

必须等待网页中所有内容加载完毕后（包含图片）才能执行

网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完

编写个数

不能同时编写多个以下代码无法正确执行：

window.onload=function（）{

alert（"test1"）

};

window.onload=function（）{

alert（"test2"）

};

结果只会输出“test2”

能同时编写多个

以下代码正确执行

$（document）.ready（function（）{

alert（"HelloWorld!

"）;

}）;

$（document）.ready（function（）{

alert（"Helloagain!

"）;

}）;

结果两次都输出

简化写法

无

$（document）.ready（function（）{

…………….

}）

简写成：

$（function（）{

……………..

}）

1.4jQuery对象和DOM对象

1.4.1DOM对象和jQuery对象简介

刚开始学习jQuery，经常分辨不清哪些是jQuery对象，哪些是DOM对象，因此需要重点了解jQuery对象和DOM对象以及它们之间的关系。

1.DOM对象

DOM（DocumentObjectModel，文档对象模型），每一份DOM都可以表示成一棵树。

下面来构建一个基本的网页，网页代码如下：

初始化效果如图1-2所示。

可以把上面的HTML结构描述成一棵DOM树，如图1-3所示。

图1-2基本网页运行结果

图1-3网页元素可看成一棵树

在这棵DOM树中，

、

、

以及
的3个
• 子节点都是DOM元素节点。

  可以通过JavaScript中的getElementByTagName或者getElementById来获取元素节点。

  像这样得到的DOM元素就是DOM对象。

  DOM对象可以使用JavaScript中的方法，

  示例代码如下：

  vardomObj=document.getElementsById（"id"）;//Dom对象

  varObjHTML=domObj.innerHTML;//使用JavaScript中的innerHTML方法

  2.jQuery对象

  jQuery对象就是通过jQuery包装DOM对象后产生的对象。

  jQuery对象是jQuery独有的。

  如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。

  例如：

  $（"#foo"）.html（）;//获取id为foo的元素内的html代码。

  这段代码等同于：

  document.getElementById（"foo"）.innerHTML;

  在jQuery对象中无法使用DOM对象的任何方法。

  例如$（"#id"）.innerHTML和$（"#id"）.checked之类的写法都是错误的，可以用$（"#id"）.html（）和$（"#id"）.attr（"checked"）之类的jQuery方法代替。

  同样，DOM对象也不能使用jQuery里的方法，例如document.getElementById（"id"）.html（）也会报错，只能用document.getElementById（"id"）.innerHTML语句。

  1.4.2jQuery对象和DOM对象的相互转换

  在讨论jQuery对象和DOM对象的相互转换之前，先约定好定义变量的风格。

  如果获取的对象是jQuery对象，那么在变量前面加上$，例如：

  var$variable=jQuery对象；

  如果获取的是DOM对象，则定义如下：

  varvarible=DOM对象；

  1.jQuery对象转成DOM对象

  jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不适用DOM对象的时候，有以下处理方法。

  jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get（index）.

  （1）jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。

  jQuery代码如下：

  var$cr=$（"#cr"）;//jQuery对象；

  varcr=$cr[0];//DOM对象；

  alert（cr.checked）;

  （2）另一种方法是jQuery本身提供的，通过get（index）方法得到相应的DOM对象。

  jQuery代码如下：

  var$cr=$（"#cr"）;//jQuery对象

  varcr=$cr.get（0）;//DOM对象

  alert（cr.checked）;//检测这个checkbox是否被选中了

  2.DOM对象转换成jQuery对象

  对于一个DOM对象，只需要用$（）把DOM对象包装起来，就可以获得一个jQuery对象了。

  方式为$（DOM对象）。

  jQuery代码如下：

  varcr=document.getElementById（"cr"）;//DOM对象

  var$cr=$（cr）;//jQuery对象

  转换后，可以任意使用jQuery中的方法。

  通过以上方法，可以任意地相互转换jQuery对象和DOM对象。

  最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM，关于jQuery的DOM操作将在后面进行详细讲解。

  注意：

  平时用到的jQuery对象都是通过$（）函数制造出来的，$（）函数就是一个jQuery对象的制造工厂。

  1.4.3实例研究

  下面举个简单的例子，来加深对jQuery对象和DOM对象的理解。

  有些论坛在用户注册的时候，必须先要同意论坛的规章制度，才可以进行下一步操作。

  编写一段简单的代码来实现这个功能。

  新建一个空白页面，然后添加以下HTML代码：

  我已经阅读了上面的制度。

  HTML代码初始效果如图1-4所示。

  图1-4初始效果

  然后编写JavaScript部分。

  前面讲过，没有特殊声明，jQuery库是默认导入的。

  通过$（"#cr"）获取到复选框元素，然后通过判断复选框是否被选中，来执行下一步操作。

  首先，用DOM方式来判断复选框是否被选中，代码如下：

  $（document）.ready（function（）{

  var$cr=$（"#cr"）;//jQuery对象

  varcr=$cr.get（0）;//DOM对象，获取$cr[0]

  $cr.click（function（）{

  if（cr.checked）{//DOM方式判断

  alert（"感谢你的支持!

  你可以继续操作!

  "）;

  }

  }）

  }）;

  实现上述代码后，选中“我已经阅读了上面制度”复选框，如图1-5所示。

  图1-5选中选项后的效果图

  换一种方式，使用jQuery中的方法来判断选项是否被选中，代码如下：

  $（document）.ready（function（）{

  var$cr=$（"#cr"）;//jQuery对象

  $cr.click（function（）{

  if（$cr.is（":

  checked"））{//jQuery方式判断

  alert（"感谢你的支持!

  你可以继续操作！

  "）;

  }

  }）

  }）;

  上面的例子简单地演示了DOM对象和jQuery对象的不同，但最终效果一样的。

  二、jQuery选择器

  选择器是jQuery的根基，在jQuery中，对事件的处理、遍历DOM和Ajax操作都依赖于选择器。

  如果能熟练地使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

  2.1jQuery选择器是什么

  jQuery中的选择器完全继承了css的风格。

  利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器。

  学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。

  下面来看一个简单的例子，代码如下：

  Functiondemo（）{

  Alert（“JavaScriptdemo.”）;

  }

  点击我

  本段代码的作用是为

  元素设置一个onclick事件，当单击此元素时，会弹出一个对话框。

  像上面这样把JavaScript代码和html代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以建议使用下面的方法，代码如下：

  jQueryDemo

  $（“.demo”）.click（function（）{//给class为demo的元素添加行为

  Alert（“jQuerydemo!

  ”）;

  }）

  此时，可以对css的写法和jQuery的写法进行比较。

  Css获取到元素的代码如下：

  .demo{//给class为demo的元素添加样式

  …….

  }

  jQuery获取到元素的代码如下：

  $（“.demo”{//给class为demo的元素添加行为

  …………

  jQuery选择器的写法与css选择器的写法十分类似，只不过两者的作用效果不同，css选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。

  需要特别说明的是，jQuery中涉及操作css样式部分比单纯的css功能更为强大，并且拥有跨浏览器的兼容性。

  2.2jQuery选择器的优势

  1.简洁的写法

  $（）函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。

  其中，$（“#ID”）用来代替document.getElementById（）函数，即通过ID获取元素；$（“tagName”）用来代替document.getElementByTagName（）函数，即通过标签名获取HTML元素。

  2．支持css1到css3选择器

  jQuery选择器支持css1，css2的全部和css3的部分选择器，同时他也有少量独有的选择器，因此对拥有一定css基础的开发人员来说，学习jQuery选择器是件非常容易的事，而对没有接触过css技术的开发人员来说，在学习jQuery选择器的同时也可以掌握css选择器的基本规则。

  使用css选择器时，开发人员需要考虑是否支持某些选择器。

  而在jQuery中，开发人员则可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

  3.完善的处理机制

  使用jQuery选择器不仅比用传统的getElementById（）和getElementsByTagName（）函数简洁得多，而且还能避免某些错误。

  看下面这个例子，代码如下：

  test

  document.getElementById（“tt”）.style.color=”red”;

  运行上面的代码，浏览器就会报错，原因是网页中没有id为“tt”的元素。

  改进后的代码如下：

  test

  if（document.getElementById（“tt”））{

  document.getElementById（“tt”）.style.color=”red”;

  }

  这样就可以避免浏览器报错，但如果要操作的元素很多，可能对每个元素都要进行一次判断，大量重复的工作会使开发人员感到厌倦，而jQuer