jQuery 初探

什么是jQuery?

        正如官網所描述：jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript。輕量級的js庫，兼容各種瀏覽器，jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果及提供AJAX交互，其文檔說明很全，同時還有許多成熟的插件可供選擇，jQuery能夠使用戶的html頁代碼和內容分離。jQuery，在我看來就是把javascript中常見的邏輯、函數等封裝成使用更為簡單的邏輯、函數，以便用更簡潔、健壯的代碼實現更多更豐富的功能和特效，正如其宣言：write less,do more!

jQuery的特點：
         1、提供了強大的功能函數，使用這些函數使得代碼更簡潔健壯。
         2、解決瀏覽器兼容性問題，屏蔽了瀏覽器的差異，避免為每種瀏覽器單獨編寫相應代碼。
         3、漂亮的動畫效果和更好的用戶體驗，例如簡單的show("slow")，即可實現淡出的效果。
jQuery對象
        編寫javascript程序要首先獲得對象, jQuery選擇器改變我們以前獲取對象的方式, 可以獲取幾乎任意的對象。
        在javascript中獲取dom對象，使用的是

var div = document.getElementById("testDiv");

        Dom對象有很多不同的類型比如input,div, span等，同時Dom對象的屬性和方法也較少；而在jQuery中，對DOM對象進行了擴充，將所有對象封裝，我們可以稱之為jQuery對象，jQuery對象獲取方法，jQuery對象擁有更多的方法和屬性：

：var jQueryObject = $("#testDiv");

        jQuery對象轉換為DOM對象的方法，返回的是即是DOM對象：

var dom = $("#testDiv")[0];

jQuery的選擇器:
        本小菜認為正是由于jQuery對DOM豐富而簡潔的操作而使jQuery風行，恰如其名query：查詢選擇之意。
        在傳統javascript中只能使用有限的函數根據id和TagName獲取Dom對象，而在jQuery下，我們可以用更多的方法獲取對象，這些方法可以類比CSS中的選擇器，同時返回的對象為jQuery對象，例如：

var jQueryObject = $("#testDiv");
var jQueryObject = $(".testDiv");
var jQueryObject = $("div");

        上面使用的$即是jQuery的簡寫引用，使用jQuery同樣可以達到相同的效果：

var jQueryObject = jQuery("#testDiv");

        當然這只是jQuery中最簡單的幾個選擇方法，你可以使用豐富的選擇器和篩選器，例如：* :first :last :even :odd >等。

jQuery與屬性和樣式

        jQuery中的attr()：通過對attr的操作，我們能輕松修改jQuery對象的屬性。

       比如使用下列語句為所有圖像設置src和alt屬性。

$("img").attr({ src: "test.jpg", alt: "Test Image" });

         使用下列語句將文檔中圖像的src屬性刪除

$("img").removeAttr("src"); 

    修改CSS的類：使用jQuery，還可以輕松實現對指定對象的CSS選擇器盡心操作。

    比如使用下列語句，為匹配的元素加上 'selected' 類。

$("p").addClass("selected");

    使用下列語句從匹配的元素中刪除 'selected' 類。

$("p").removeClass("selected");

          修改CSS樣式：修改指定對象的樣式也變得更為簡單。

    使用下列語句將所有段落的字體顏色設為紅色并且背景為藍色。

$("p").css({ color: "#ff0011", background: "blue" }); 

    使用下列語句將所有段落字體設為紅色。

$("p").css("color","red");

         height和width：比較以下幾個概念

    如圖所示：

jQuery中的事件

        jQuery事件對象將不同瀏覽器的差異進行了合并,比如可以在所有瀏覽器中通過 event.target 屬性來獲取事件的觸發者。

    綁定事件：為指定對象綁定事件。

    使用以下語句當每個段落被點擊的時候，彈出其文本:

$("p").bind("click", function(){ 
  alert( $(this).text() ); 
});

       使用以下語句把所有段落的所有事件取消綁定:

$("p").unbind(); 

       使用以下語句為每一個匹配元素的特定事件綁定一個一次性的事件處理函數，當所有段落被第一次點擊的時候，顯示所有其文本：

$("p").one("click", function(){ 
  alert( $(this).text() ); 
});

        常用事件：jQuery中簡化了事件的使用方法。例如使用

$(document).ready(function(){
// 在這里寫你的代碼...
});

        即可執行DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。

          使用以下事件即可表示當鼠標指針穿過元素時，會發生 mouseenter 事件：

$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});

          使用以下代碼即可在選擇元素上綁定一個或多個事件的事件處理函數：

$("p").on("click", function(){
alert( $(this).text() );
});