jQuery框架使用入门

2016-07-11 1564 2 编辑:Monster 来源: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对象继续执行其他方法。


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢