Jquery使用总结

      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也有一些缺点，比如：不能向后兼容、有时候多个插件冲突、引入不同库的先后顺序等，但是这些比起它带来的方便都不值一提，相信经过不断的优化，以后它的缺点会越来越少，优点将越来越多。