JQuery相信每个做过web开发的程序员都很熟悉,它是继Prototype之后又一个优秀的Javascript框架,由于它的兼容性要比直接使用JS好很多(它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器),所以越来越多的人在开发web项目的时候都会引入JQuery的相关文件,即使用不到一些特效我们也还是很愿意引入它(它的宗旨:WRITE LESS,DO MORE,写更少的代码,做更多的事情),它不仅能够给我提供比JS更好的兼容性,而且还封装了一些操作,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互,所以web开发非常建议使用JQuery。当让更加高级的封装也有,比如JQuery-UI等,让我们开发的弹出窗口更加美观,操作也更加简单。下面我根据平时使用及网络资料总结了一些我们常用的JQuery常用的特性。
1、首先需要引入JQuery的核心库
JQuery核心js文件也就几十kb,基本不会影响页面加载速度。
<script type="text/javascript" src="${ctx}/js/jquery-1.9.1.min.js"></script>
2、选择器功能
JQuery的选择器用起来很方便,好比要找到某个dom对象的相邻元素js可能要写好几行代码,而JQuery一行代码就搞定了,再比如要将一个表格的隔行变色,JQuery也是一行代码搞定。下面是一个例子:
<script type="text/javascript">
//隔行变色
$(document).ready(function(){
$(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
$(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe_tb tr:even").addClass("alt"); //给class为stripe_tb的表格的偶数行添加class值为alt
});
</script>
/*注意选择器的层叠关系*/
.stripe_tb tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*这个将是鼠标高亮行的背景色
3、跨浏览器兼容
JQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
4、Ajax操作支持
JQuery简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信。当然也可以配合div或iframe完成返回一个页面的异步刷新功能,下面的连接是我写的Jquery+div实现异步刷新的例子:
http://blog.csdn.net/huangaigang6688/article/details/17038579
5、事件、样式、动画支持
JQuery还简化了js操作css的代码,并且代码的可读性也比js要强。下面是Jquery实现的一些动态效果:
//1、点击出现爆炸效果:
$(document).ready(function(){
$('div').click(function(){
$(this).effect('explode');
});
});
//2、点击出现滑动效果
$(document).ready(function(){
$('img').animate({top: '+=100px'},1000);
});
//3、点击出现上下跳动的效果
$(document).ready(function(){
$('div').click(function(){
$(this).effect('bounce', {times:3}, 500);
});
});
//4、点击出现闪现的效果
$(document).ready(function(){
$('div').click(function(){
$(this).effect('slide');
});
});
//5、可以拖动重新排序
$(document).ready(function(){
$('ol').sortable();
});
//6、点击出现可折叠的效果
$(document).ready(function(){
$('#menu').accordion();
});
6、链式操作
JQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
选中网页元素以后,就可以对它进行某种操作。jQuery允许将所有操作连接在一起,以链条的形式写出来。这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。
$('div').find('h3').eq(2).html('Hello');
7、可扩展性强
JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用(Jquery-UI)。
JQuery提供了扩展接口:JQuery.extend(object),可以在JQuery的命名空间上增加新函数。JQuery的所有插件都是基于这个扩展接口开发的。
总结:其实想了解更多的特性还是直接去参考官方的文档,上面说的很全面,当然我们也不用全部去记忆,用到了什么效果直接去查就可以,只要我们平时没事多看看,知道有些什么样的效果就ok了。
JQuery实现脚本与页面的分离,只要有标签id就可以实现添加各种效果,就像CSS让样式代码与页面代码分离开一样,这样我们可以实现灵活性非常强的清晰页面代码。当然JQuery也有一些缺点,比如:不能向后兼容、有时候多个插件冲突、引入不同库的先后顺序等,但是这些比起它带来的方便都不值一提,相信经过不断的优化,以后它的缺点会越来越少,优点将越来越多。