Web前端基礎——jQuery（一）

前幾天回老家呆了幾天，幾乎沒有怎麼學習新的知識，這期間一直有斷斷續續的看《Java編程思想》，還刷了一些前沿消息，也算沒閑著。今天開始學習jQuery啦，繼續前進。

在網上查了，買了這本書。現在是一邊搜視頻，一邊看這本書。

認識jQuery，我將從以下幾方面進行講解。

一、JavaScript和JavaScript庫

隨著Web 2.0的興起，JavaScript受重視的程度提高，帶動JavaScript程式庫也蓬勃發展起來。

過程：Prototype—>Dojo—>jQuery—>Ext Js

JavaScript自身存在的3個弊端（摘錄自 鋒利的jQuery）：

1.複雜的文檔對象模型（DOM)

2.不一致的瀏覽器實現和便捷開發

3.調試工具的缺乏

二、JavaScript庫作用及對比

為了簡化JavaScript的開發，JavaScript程式庫誕生了，這就像Java封裝了一些工具類的目的是差不多的。JavaScript程式庫封裝了很多預定義的對象和實用函數，能幫助使用者輕鬆地建立有高難度交互的Web 2.0特性的富客戶端頁面，並且相容各大瀏覽器。

1、Prototype

Prototype可以看作是把很多好的有用的JavaScript的方法組合在一起形成的JavaScript庫。使用者可以在需要的時候隨時將其中的幾段代碼抽出來放自己的腳本里。但是由於Prototype成型年代較早，從整體上對面向對象的編程思想把握得不是很到位，導致其結構的鬆散。不過，現在也在慢慢改進。

2、Dojo

Dojo的強大之處在於它提供了很多其他JavaScript庫所沒有提供的功能。功能很強大，得到如IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺點也是很明顯的：學習曲線陡，文檔不齊全，最嚴重的是API不穩定，每次升級都有可能導致已有的程式失效。也在慢慢改進中。

3、YUI

YUI（Yahoo！UI，The Yahoo！User Interface Library），是由Yahoo公司開發的一套完備的擴展性良好的富於交互頁面程式工具集。YUI封裝了一系列比較豐富的功能，例如DOM操作和Ajax應用等，同時還包括幾個核心的CSS文件。文檔完善，代碼規範。

4、Ext JS

Ext JS簡稱Ext，如今已經發展到可以用包括jQuery在內的多種JavaScript框架作為基礎庫，而Ext作為界面的擴展庫來使用。Ext可以用來開發富有華麗外觀的富客戶端應用，能使B/S應用更加具有活力。但是由於Ext側重於頁面，本身計較臃腫。有時還並不是免費的。

5、MooTools

MooTools是一套輕量、簡潔、模塊化和麵向對象的JavaScript框架。Mootools的語法幾乎和Prototype一樣，但卻提供了更為強大的功能、更好的擴展性和相容性。其模塊化思想非常優秀，核心代碼只有8KB。可實現即使導入。另外，MooTools完全徹底的貫徹了面向對象的編程思想，語法簡潔直觀，文檔完善。

6、jQuery

輕量級的庫，擁有強大的選擇器、出色的DOM操作。、可靠的事件處理、完善的相容性和鏈式操作等功能。

jQuery憑藉簡潔的語法和跨平臺的相容性，極大的簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax的操作。代碼風格獨特而優雅。

三、jQuery的優勢

1、輕量級

2、強大的選擇器

3、出色的DOM操作的封裝

4、可靠的事件處理機制

5、完善的Ajax

6、不污染頂級變數

7、出色的瀏覽器相容性

8、鏈式操作方式

9、隱式迭代

10、行為層與結構層的分離

11、豐富的插件支持

12、完善文檔

13、開源

四、jQuery代碼的編寫

1.進入jQuery的官方網站http://jquery.com/，下載最新的jQuery庫文檔。

2.jQuery庫類分為兩種：生產版（最小化和壓縮版）和開發版（未壓縮版）。

3.jQuery不需要安裝，把下載的jQuery.js放到網站上的一個公共的位置，想要用的jQuery的時候，只需要在相關的HTML文檔中引入該庫類文件的位置即可。

五、編寫簡單的jQuery代碼

首先明確，在jQuery庫中，$就是jQuery的一個簡寫形式。

比如：

$("#foo") 等價於jQuery("#foo")

$.ajax等價於jQuery.ajax

//頁面載入的時候,執行一段代碼
    //舊的寫法
    $(document).ready(function (){
        alert("ok");
        });
                    
    //新的寫法
    $(function(){
        alert("頁面載入了");
        });
        
    //也可以這樣寫的
    jQuery(function() {
        alert("載入了");
        });

上面的$(document)這個操作,是將一個dom對象,轉成了一個jquery對象
思考：
它和 過去學的 onload 有什麼區別？

// 過去的 onload
window.onload=function(){
     alert("頁面載入了");
}

1) jquery的寫法可以累計註冊,不象load那樣覆蓋 這樣可以保證寫類庫的時候不刷掉別人的

window.onload=function(){
      alert("onload一被調用了");
      }
window.onload=function(){
 alert("onload 二被調用了");
}
//這面的寫法,只會執行到一個,如果是jquery,則兩個都會秇行

2) onload是在所有Dom元素創建完畢,圖片,Css等都載入後才能觸發 而ready則只在dom 創建後就觸發。jQuery 也可以實現 onload那種事件的調用時機。

$(window).load(function(){
   alert("類似onload方式的調用");
});

例子：

1.滑鼠離開的時候,加個處理事件

<input type="text" name="userName" id="userName" /><label id="userName_msg"></label>
    $(function(){
    
    $("#userName").blur(function(){
    $("#userName_msg").html("請輸入姓名,中文,3-9個字");
    $("#userName_msg").css('color',"red");
        });
    
    });

2.元素的顯示和隱藏

<a href="#" id="hrefMenu">顯示子菜單</a>
    <div id="divSubMenu">
        北京<br>
        上海<br>
        廣州<br>
        深圳<br>
        寧波<br>
        哈爾濱<br>
        </div>
               
    $(function(){
        $("#hrefMenu").click(function(){
    //$("#divSubMenu").toggle("slow");  toggle 用於狀態的切換
    //$("#divSubMenu").toggle(5000);
    });
    })