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也有一些缺點，比如：不能向後相容、有時候多個外掛程式衝突、引入不同庫的先後順序等，但是這些比起它帶來的方便都不值一提，相信經過不斷的最佳化，以後它的缺點會越來越少，優點將越來越多。