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的扩展插件。目前已经有成千上万的官方插件支持,而且不断有新插件面世。