JQuery篇之jQuery簡介

     不得不承認，《鋒利的jQuery》是一本很好的jQuery教程，和jQuery本身一樣，write less，do more。

     Javascript是NetScape公司開發的一種腳步語言(Script language)。它的出現使得網頁和用戶之間實現了一種實時的、動態的、交互的關系，使得網頁可以包含更多活躍的內容和更加精彩的內容。但是Javascript也有自己的缺陷之處，即復雜的文檔對象類型（DOM）、不一致的瀏覽器實現（瀏覽器的兼容性）和開發、調試工具的缺乏。  為了簡化Javascript的開發，一系列javascript程序庫應運而生，也幫助用戶輕松搞定高難度交互的富客戶端頁面，并且兼容各種瀏覽器。jQuery就是其中的一種，它是一個輕量級的庫，擁有強大的選擇器、出色的DOM操作、可靠的事件處理、完善的兼容性和鏈式操作等功能。憑借這些優勢，Jquery迅速從Javascript庫中脫穎而出，成為WEB開發人員的最佳選擇。

      1 jQuery特性

        1.1 輕量級。jQuery庫壓縮后只有幾十(KB)的大小。

        1.2 強大的選擇器。1)CSS 1至CSS 3幾乎所有的選擇器。2)jQuery獨創的高級而復雜的選擇器。3)加入插件后，使其支持XPath選擇器。4)自定義選擇器。

        1.3 出色的DOM操作的封裝。jQuery封裝大量常用的DOM操作，能夠輕松完成原本非常復雜的操作。

        1.4 可靠的事件處理機制。jQuery事件綁定相當可靠，在預留退路(graceful degradation)、循序漸進以及非入侵式(Unobtrusive)編程思想方面也都非常不錯。

        1.5 完善的Ajax。jQuery將所有的Ajax操作封裝到一個函數$.ajax()里，使得開發者處理ajax的時候能夠專心處理業務邏輯而無需關心復雜的瀏覽器兼容性和XMLHttpRequest對象的創建和使用的問題。 

        1.6 不污染頂級變量。jQuery只建立一個名為jQuery的對象，其所有的函數方法都在這個對象下。其別名$也可以隨時交出控制器，絕對不會污染其他的對象。該特性使得  jQuery可以與其他javascript可以共存，不會產生沖突。

        1.7 出色的瀏覽器兼容性。jQuery在各大瀏覽器下都能正常運行。

        1.8 鏈式操作方式。對發生在同一個對象上的一組動作，可以直接連寫而無需重復獲取對象。

        1.9 隱式迭代。jquery對象都是集合對象。而jQuery方法也被設計自動操作對象集合，無需循環遍歷每一個返回的元素。

        1.10 行為層和結構層的分離。避免開發沖突和個人單干的開發模式，后期維護也很方便。

        1.11 豐富的插件支持。

        1.12 完善的文檔。

        1.13 開源。

     2  jQuery代碼

         2.1 鏈式操作風格

              1)對于同一對象不超過3個操作的，可以直接寫成一行。

                 $("li").show().unbind("click");

               2)對于同一對象的較多操作，建議每行寫一個操作。

                  $(this).removeClass("mouseout")

                            .addClass("mouseover")

                            .stop()

                            .fadeTo("fast","0.6")

                            .unbind("click");

                3)對于多個對象的少量操作，可以每個對象寫一行，如果涉及子元素，可以考慮適當的縮進。

                  $(this).addClass("highlight")

                           .children("li").show().end()

                     .siblings().removeClass("highlight");

           2.2 為代碼添加注釋

                //在一個id為table的表格的tbody中，如果每行的一列中的checkbox沒有被禁用，則這一行的背景設置為紅色

               $("#table > tbody > tr :has(td :has(:checkbox:enabled))").css("background","red");

      3  jQuery對象和DOM對象

           DOM(Document Object Model，文檔對象模型)，是W3C國際組織的一套web標準。它定義了訪問HTML文檔對象的一套屬性、方法和事件。javascript中getElementsByTagName或者getElementById來HTML DOM元素就是DOM對象；而jQuery對象是通過jQuery包裝DOM對象后產生的對象。jQuery對象無法使用DOM對象的任何方法，反之亦然。用#id作為選擇符取得的是jQuery對象而并非document.getElementById("id")所得到的DOM對象，兩者并不等價。

          jQuery對象和DOM對象的相互轉換：

          1)jQuery對象轉換DOM對象。兩種方法，即[index]和get(index)。

             var $obj=$("#id");

             var obj=$obj[0];或var obj=$obj.get(0);

           2)DOM對象轉換jQuery對象 $(DOM對象)

              var obj=document.getElementById("id");

              var $obj=$(obj);或者var $obj=jQuery(obj);        

       4  jQuery庫和javascript其他庫的沖突

          1)jQuery庫在其他庫之后導入

            方法一：

             <script src="../lib/prototype.js"  type="text/javascript"></script>

             <script src="../scripts/jQuery.js" type="text/javascript"></script>

             <script>

               jQuery.noConflict();  //將變量$的控制權交給prototype.js

               jQuery(function(){  //使用jQuery

                   jQuery("#id").html(" ");

                });

             </script>

            方法二：             

                   var $j=jQuery.noConflict();  //自定義一個快捷方式

                   $j(function(){                         //使用jQuery，利用自定義快捷方式-$j

                        $j("#id").html(" ");

                    });

                方法三：

                   jQuery.noConflict();   //交出$的控制權

                   jQuery(function($){  //使用jQuery設定頁面加載時執行的函數

                        $("#id").html(" ");  //在函數內部繼續使用$()方法

                    });

                 方法四：

                   jQuery.noConflict();     //交出$的控制權

                   (function($){                 //定義匿名函數并設置形參為$

                        $("#id").html(" ");  //在函數內部繼續使用$()方法

                    });

             2)jQuery庫在其他庫之前導入

               <script src="../scripts/jQuery.js" type="text/javascript"></script>

               <script src="../lib/prototype.js"  type="text/javascript"></script>               

               <script>              

                    jQuery(function(){  //直接使用jQuery，無需調用"jQuery.noConflict()"函數

                        jQuery("#id").html(" ");

                    });

             </script>