jQuery框架使用入门

常见的JavaScript框架有jQuery、Dojo、ExtJS、Prototype、Mootools和Spry等。目前以jQuery最受开发者的追捧，下面简要介绍这些框架的特点和用途。

(1)jQuery是一个优秀的JavaScript框架，它能使用户更方便地处理HTML文档。events事件、动画效果、Ajax交互等。它的出现极大地改变了开发者使用JavaScript的习惯。

(2)Prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到的JavaScript方法与Ajax交互处理过程。

(3)Mootools是一个简洁、模块化、面向对象的JavaScript框架。它能够帮助用户更快、更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype多，整体设计也比Prototype要相对完善，功能更强大，如增加了动画特效、拖放操作等。

(4) ExtJS是一个跨浏览器，用于开发RIA应用的JavaScript框架，提供高性能、可定制的Web U工控件库;具有良好的设计、丰富的文档和可扩展的组件模型。

1.jQuery框架的功能

jQuery框架的主要功能可以归纳为以下几点:

(1)访问页面的局部。这是前面介绍的DOM模型所完成的主要工作之一，通过示例可以看到，DOM获取页面中某个节点或者某一类节点有固定的方法，而jQuery则大大简化了其操作的步骤。

(2)修改页面的表现(Presentation)。CSS的主要功能就是通过样式风格来修改页面的表现。然而由于各个浏览器对CSS 3标准的支持程度不同，使得很多CSS的特性没能很好地体现。jQuery很好地解决了这个问题，它通过封装好的jQuery选择器代码，使各种浏览器都能很好地使用CSS 3标准，极大地丰富了CSS的运用。

(3)更改页面的内容。jQuery可以很方便地修改页面的内容，包括修改文本的内容、插入新的图片、修改表单的选项，甚至修改整个页面的框架。

(4)响应事件。引入jQuery之后，可以更加轻松地处理事件，而且开发人员不再需要考虑复杂的浏览器兼容性问题。

(5)为页面添加动画。通常在页面中添加动画都需要开发大量的JavaScript代码，而jQuery大大简化了这个过程。jQuery库提供了大量可自定义参数的动画效果。

(6)与服务器异步交互。jQuery提供了一整套Ajax相关的操作，大大方便了异步交互的开发和使用。

(7)简化常用的JavaScript操作。jQuery还提供了很多附加的功能来简化常用的JavaScript操作，如数组的操作、迭代运算等。

2.如何下载并使用jQuery

jQuery的官方网站(http://jquery.com)提供了最新的jQuery框架下载，通常只需要下载最小的]Query包(Minified)即可。目前最新的版本jquery-1. 6.2.min.js文件只有55.9 KB。

jQuery是一个轻量级(Lightweight)的JavaScript框架，所谓轻量级，是说它根本不需要安装，因为jQuery实际上就是一个外部js文件，使用时直接将该js文件用标记链接到自己的页面中即可，代码如下:

将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。

3.jQuery中的“$”及其作用

在jQuery中，最频繁使用的莫过于美元符号“$”，它能提供各种各样的功能.包括选择页面中的一个或一类元素、作为功能函数的前缀、创建页面的DOM节点等。

jQuery中的“$”实际上等同于“jQuery"，如$(”h2”)等同于jQuery("h2”)，为了编写代码的方便，才采用“$”来代替“jQuery"。“$”的功能主要表现在以下几方面。

1)“$”用做选择器

在CSS中选择器的作用是选中页面中某些匹配元素，而jQuery中的“$”作为选择器。同样可选中单个元素或元素集合。

例如，在CSS中，"h2>a”表示选中h2的所有直接下级元素a，而在jQuery中同样可以通过如下代码选中这些元素，作为一个对象数组，供JavaScript调用。

$("h2>a")    //jQuery的子选择器,引号不能省略

jQuery支持所有CSS 3的选择器，也就是说可以把任何CSS选择器都写在$(””)中，像上面的“h2>a"这种子选择器本来IE 6是不支持的，但把它转换成jQuery的选择器$(”h2>a")后，则所有浏览器都能支持。改写后，则使得本来不支持子选择器的IE6也能支持子选择器了。

上面仅仅展示了用jQuery选择器实现CSS选择器的功能，实际上，jQuery选择器的主要作用是选中元素后再为它们添加行为。就是通过jQuery的id选择器选中了某个按钮，接着为它添加单击时的行为。还可以通过jQuery选择器获取元素的HTML属性或修改HTML属性。

2)“$”用做功能函数前缀

在jQuery中，提供了一些JavaScript中没有的函数，用来处理各种操作细节。例如$.each()函数，它用来对数组或jQuery对象中的元素进行遍历。为了指明该函数是jQuery的，就需要为它添加“$.”前缀。

说明:

①$.each函数用来遍历数组或对象，因此它的语法有如下两种形式:

①$.each(对象，function(属性，属性值){...});

②$.each(数组，function(元素序号，元素的值){...});

$.each()函数的第一个参数为需要遍历的对象或数组，第二个参数为一个函数function。function函数为集合中的每个元素都要执行的函数，它可以接受两个参数，第一个参数为数组元素的序号或者是对象的属性，第二个参数为数组元素或者属性的值。

②调用$.each)时，对于数组和类似数组的对象(具有length属性，如函数的arguments对象)，将按序号从0到length-1进行遍历，对于其他对象则通过其命名属性进行遍历。

③此处的$.each()函数与前面的jQuery方法有明显的区别，jQuery方法都需要通过一个jQuery对象进行调用(如$("#buttonid").click)，而$.each()函数没有被任何jQuery对象所调用，一般称这样的函数为jQuery全局函数。

④$.each()函数不同于each()函数。后者仅能用来遍历jQuery对象。例如，可以利用each()方法配合this关键字来批量设置或获取DOM元素的属性。下面的代码首先利用$("img")获取页面中所有img元素的集合，然后通过each()方法遍历这个图片集合。通过this关键字设置页面上4个空元素的src属性和title属性，使这4个空的标记显示图片和提示文字。

提示:代码中的this指代的是DOM对象而非]Query对象，如果想得到jQuery对象,可以用$(this)。

3)用做$

在jQuery中，采用$(document).ready()函数替代了JavaScript中的window.onload函数。

其中，(document)是指整个网页文档对象(即JavaScript中的window. document对象)，那么$(document).ready事件的意思是在文档对象就绪的时候触发。

$(document).ready()不仅可以替代window.unload函数的功能，而且比wind.unload函数还具有很多优越性，下面来比较两者的区别。

第一，若要将id为loading的图片在网页加载完成后隐藏起来，window. unload的写法是:

function hide(){

document.getElementByld("loading").style.display=“none";}

window.onload=hide;          //注意hide不能写成hide()

由于window.onload事件会使hide()函数在页面(包括HTML文档和图片等其他文档)完全加载完毕后才开始执行，因此在网页中id为“loading"的图片会先显示出来等整个网页加载完成后执行hide   函数才会隐藏。

而jQuery的写法是:

$(document).ready(function(){

("#loading").css("display","none);

})

jQuery的写法则会使页面仅加载完DOM结构后就执行(即加载完HTML文档后)，还没加载图像等其他文件就执行ready()函数，给图像添加“display: none”的样式，因此id为“loading"的图片不可能被显示。

所以说，$(document).ready()比window.onload载入执行更快。

第二，如果该网页的HTML代码中没有id为loading的元素，那么window.onload函数中的getElementByld("loading")会因找不到该元素，导致浏览器报错。所以为了容错，最好将代码改为:

function hide(){

if(docunent.getElementById("loading")){        

document.getElementById("loading"), style.display="none”;

}}

而jQuery的$(document).ready()则不需要考虑这个问题，因为jQuery已经在其封装好的ready()函数代码中做了容错处理。

第三，由于页面的HTML框架需要在页面完全加载后才能使用，因此在DOM编程时window.onload函数被频繁使用。倘若页面中有多处都需要使用该函数，将会产生冲突。而jQuery采用ready()方法很好地解决了这个问题，它能够自动将其中的函数在页面加载完成后运行，并且在一个页面中可以使用多个ready()方法，不会发生冲突。

总之，jQuery中的$(document).ready()函数有以下三大优点。

(1)在DOM文档载入后就执行，而不必等待图片等文件载入，执行速度更快。

(2)如果找不到DOM中的元素，能够自动容错。

(3)在页面中多个地方使用ready()方法不会发生冲突。

4)创建DOM元素

在jQuery中通过使用“$”可以直接创建DOM元素，下面的代码用于创建一个段落，并设置其align属性以及段落中的内容。

当然，创建了DOM元素后还必须使用其他方法将其插入到文档中，否则文档中不会显示新创建的元素。

5)解决“$”的冲突

尽管在通常情况下都使用“$”来代替jQuery，而且也推荐使用这种方式。但如果开发者在JavaScript中定义了名称为“$”的函数，如“function$(){...}”，或使用了其他的类库框架，而这些框架中也使用了“$”，那么就会发生冲突。jQuery同样提供了noConflict()方法来解决“$”的冲突问题。

4.jQuery对象与DOM对象

当使用jQuery选择器选中某个或某组元素后，实际上就创建了一个jQuery对象，jQuery对象是通过jQuery包装DOM对象后产生的对象。但jQuery对象和DOM对象是有区别的。

1)jQuery对象转换成DOM对象

也就是说，如果一个对象是jQuery对象，那么它就可以使用jQuery中的方法，例如html()就是jQuery中的一个方法。但jQuery对象无法使用DOM对象中的任何方法，同样DOM对象也不能使用jQuery中的任何方法。

但如果jQuery没有封装想要的方法，不得不使用DOM方法的时候，有以下两种方法将jQuery对象转换成DOM对象。

(1) jQuery对象是一个数组对象，可以通过添加数组下标的方法得到对应的DOM对象。例如，$<"#msg")[0]，就将jQuery对象转变成了一个DOM对象。

(2)使用jQuery中提供的get()方法得到相应的DOM对象，如$("#msg").get(0)。

2)DOM对象转换成jQuery对象

相应地，DOM对象也可以转换成jQuery对象，只需要用$()把DOM对象包装起来就可以获得一个jQuery对象。

3)jQuery对象的链式操作

jQuery对象的一个显著优点是支持链式操作。所谓链式操作，是指基于一个jQuery对象的多数操作将返回该jQuery对象本身，从而可以直接对它进行下一个操作。例如，对一个jQuery对象执行大多数方法后将返回jQuery对象本身，因此可以对返回的jQuery对象继续执行其他方法。