你的位置:首页 > Java教程

[Java教程]初识JQuery


JQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。那为什么要选择JQuery呢?

 

先让我们来看一个简单的案例:(隔行变色)

使用JavaScript实现效果:

<script type="text/javascript">

window.onload=function(){    //加载HTML文档

var trs  =  document.getElementsByTagName("tr");  //获取行对象集合

for (var i=0 ; i <= trs.length; i++){    //遍历所有行

if(i%2 == 0){   //判断奇偶行

var obj = trs[i];    //根据序号获取行对象

obj.style.backgroundColor = "#ccc";     //为所获取的行对象添加背景颜色

}

}

}

</script>

效果实现图如下:

 

使用JQuery实现效果:

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>   //引入JQuery库文件

<script type="text/javascript">  

$(document).ready(function(){        //加载HTML文档

    $("tr:even").css("background-color","#ccc");   //为表格的偶数行添加背景颜色

});

</script>

 

比较以上两段代码不难发现,使用JQuery制作交互特效的语法更为简单,代码量大大减少了。

 

此外,使用JQuery与单纯使用JavaScript相比最大的优势是能使页面在各浏览器中保持统一的显示效果,即不存在浏览器兼容性问题。

例如,使用JavaScript获取id为"title"的元素,在IE中,可以使用eval("title")或getElementById("title")来获取该元素。

如果使用eval("title")获取元素,则在Firefox浏览器中将不能正常显示,因为在Firefox浏览器中,只支持使用getElementById("title")获取id为"title"的元素。

由于各浏览器对JavaScript的解析方式不同,因此在使用JavaScript编写代码时,就需要分IE和非IE两种情况来考虑,以保证各个浏览器中的显示效果一致。

这对一些开发经验尚浅的人员来说,难度非常大,一旦考虑不周全,就会导致用户使用网站时的体验性变差,从而流失部分潜在客户。

JQuery的用途:

JQuery是JavaScript的程序库之一,因此,许多使用JavaScript能实现的交互特效,使用JQuery都能完美的实现,下面就从以下5个方面来简单的介绍一下JQuery的应用场合。

1)访问和操作DOM元素

使用JQuery可以很方便的获取和修改页面中的指定元素,无论是删除、移动还是复制某元素,JQuery都提供了一整套方便、快捷的方法。既减少了代码的编写,又大大提高了用户对页面的体验度,如添加、删除商品、留言、个人信息等。

2)控制页面样式

通过引入JQuery,程序开发人员可以很便捷的控制页面的CSS文件。浏览器对页面文件的兼容性,一直以来都是页面开发者最为头疼的事情,而是用JQuery操作页面的样式可以很好的兼容各种浏览器。最典型的有微博、博客、邮箱等的换肤功能。

3)对页面事件的处理

引入Jquery后,可以使页面的表现层与功能层分离,开发者更多地专注于程序的逻辑和功效;页面设计者侧重于页面优化与用户体验。通过事件绑定机制,可以很轻松地实现两者的结合。

4)方便地使用JQuery插件

引入JQuery后,可以使用大量的JQuery插件来完善页面的功能和效果。如JQuery UI插件库、Form插件、Validate插件等,这些插件的使用极大地丰富了页面的展示效果,使原来使用JavaScript代码实现起来非常困难的功能通过JQuery插件可轻松地实现。

5)与Ajax技术的完美结合利用Ajax异步读取服务器数据的方法,极大地方便了程序的开发,增强了页面交互,提升了用户体验;而引入JQuery后,不仅完善了原有的功能,还减少了代码的书写,通过其内部对象和函数,加上几行代码就可以实现复杂的功能。

 

 

总结一下JQuery的优势:

Jquery的主旨是write less,do more (以更少的代码,实现更多的功能)。JQuery独特的选择器、链式操作、事件处理机制和封装,以及完善的Ajax都是其他JavaScript库望尘莫及的。总体来说,Jquery主要有以下优势。

(1)轻量级。JQuery的体积较小,压缩之后,大约只有100KB。

(2)强大的选择器。JQuery支持几乎所有的CSS选择器,以及JQuery自定义的特有选择器。由于JQuery具有支持选择器这一特性,使得具备一定CSS经验的开发人员学习JQuery更加容易。

(3)出色的DOM封装。JQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery能够轻松地完成各种使用JavaScript编写时非常复杂的操作,即使JavaScript新手也能编写出出色的程序。

(4)可靠的事件处理机制。JQuery的事件处理机制吸收了JavaScript中的事件处理函数的精华,使得JQuery在处理事件绑定时非常可靠。

(5)出色的浏览器兼容性。作为一个流行的JavaScript库,解决浏览器之间的兼容性是必备的条件之一。JQuery能够同时兼容IE 6.0+、Firefox 3.6+、Safari 5.0+、Opera和Chrome等多种浏览器,使显示效果在各个浏览器之间没有差异。

(6)隐式迭代。当使用JQuery查找到相同名称(类名、标签名等)的元素后隐藏它们时,无须遍历每一个返回元素,它会自动操作所匹配的对象集合,而不是单独的对象,这一举措使得大量的循环机构变得不再必要,从而大幅地减少了代码量。

(7)丰富的插件支持。JQuery的易扩展性,吸引了来自全球的开发者来编写JQuery的扩展插件。目前已经有成千上万的官方插件支持,而且不断有新插件面世。