第一章jQuery基礎

一.jQuert簡介

1.什麽是jQuery

jQuery是javaScript的程序庫之一，它是javaScript對象和實用函數的封裝。

jQuery是繼Prototype之後又一個優秀的javaScript庫，是由美國人 Johh Resig於2006年創建的開源項目。

jQuery只是javaScript的程序庫，只相當於它的一個子集，並不能完全取代javaScript。

2.為什麽要使用jQuery

與javaScript相比，使用jQuery制作交互特效的語法更為簡單，代碼量大大減少，不存在瀏覽器兼容性的問題。

3. jQuery與其他javascript庫

按照使用占比，幾大javaScript庫占比如下：

1. jQuery (62%)
2. Bootstrap (22%)
3. Zepto (6%)
4. Ext (5%)
5. YUI (5%)

4. jQuery的用途

1） 訪問和操作DOM元素

使用jQuery可以很方便的獲取和修改頁面中的制定元素，無論是刪除、移動還是復制元素，jQuery都提供了一套方便快捷的方法。

2） 控制頁面樣式

通過引入jQuery，開發人員可以很快捷的控制頁面的CSS文件。

3） 對頁面事件的處理

引入jQuery後，可以使頁面的表現層與功能開發分離，開發者更多的關註於程序的邏輯與功效；頁面設計者則側重於頁面的優化與用戶的體驗。

通過事件綁定機制，可以很輕松的實現兩者的結合。（比如鼠標的點擊事件）

4） 方便使用jQuery插件

引入jQuery後，可以使用大量的jQuery插件來完善頁面的功能和效果，如jQuery UI插件庫，Form插件，Validate插件等。使得原來使用javaScript代碼實現起來非常困難的功能通過jQuery插件可以輕松的實現。例如：3D幻燈片就是由jQuery的Slicebox插件來實現的。

5） 與Ajax技術的完美結合

利用Ajax異步讀取服務器數據的方法，極大的方便了程序的開發，增強了頁面的交互，提升了用戶的體驗，引入jQuery後，通過內部對象或函數，加上幾行代碼就可以實現復雜的功能。

6） 處理了與瀏覽器兼容性的問題

在jQuery庫裏幫我們寫了兼容性的代碼。

5. jQuery的優勢

1） 輕量級。jQuery的體積小，壓縮之後，約等於100KB。

2） 強大的選擇器。jQuery支持幾乎所有的CSS選擇器，以及jQuery有自定義特有的選擇器。

3） 出色的DOM封裝。jQuery封裝了大量的DOM操作，使的開發者在編寫DOM操作相關程序時更加得心用手。

4） 可靠的事件處理機制。jQuery的事件處理機制吸收了javaScript中事件處理函數的精華，非常的可靠。

5） 出色的瀏覽器兼容性。

6） 隱式叠代。使用jQuery查找相同名稱（類名、表簽名等）時，會返回一個結果集合，無需用戶一一遍歷，並且有快捷的查找所匹配的值的方法，簡化了編程。

7） 豐富的插件支持。jQuery的易擴展性，吸引了來自全球的開發者來編寫jQuery的擴展插件，目前已有成百上千的官方支持的插件。

6. jQuery的版本及配置

1. 獲取jQuery的最新版本

進入jQuery的官方網站（http://jquery.com）,在頁面右側的 Download jQuery區域下載最新的版本。

1. jQuery類庫說明

jQuery類庫一個插件分為兩個版本：開發版（完整無壓縮）和發布版（GZIP壓縮過的版本）。

版本號為1.開頭的jQuery插件才能支持IE6~IE8的兼容性。推薦的版本是：jquery-1.8.3.min.js和jquery-1.12.4.js

1. jQuery的引用方式
   1. 頁面引用（引用本地）
   2. 引用網絡存儲的，引用地址實用網絡存儲的絕對地址。

二.jQuery語法

1.jQuery的加載

$(document).ready(function() {

//執行的代碼；

})；

這種語法等同於javaScript代碼：

Window.onload=function(){

//執行代碼；

}；

2.jQuery的語法結構

jQuery語句主要包含三大部分：$()、document和ready();它們在jQuery中分別稱為：工廠函數、選擇器和方法。

語法：$(selector).action();

1.工廠函數$()

在jQuery中，美元符號“$”等價於jQuery,即S()=jQuery()。

$()的作用是將DOM對象轉換為jQuery對象，只有將DOM對象轉換為jQuery對象後，才能使用jQuery的方法。

2.選擇器selector

語法：$(selector);

3.方法action()

jQuery中提供了一系列的方法。在這些方法中，一類重要的方法就是事件處理方法，如許多基礎的事件：鼠標事件、鍵盤事件和表單事件等，都可以通過事件方法進行綁定。

CSS樣式操作的方法：

1） 為元素添加新的樣式

語法：jQuery 對象.addClass([樣式名])；

註意：樣式名不用帶“.”類符號，區別於選擇器

2） 設置新的CSS樣式屬性

語法：jQuery 對象.css (“屬性”,”屬性值”)；

jQuery 對象.css (｛“屬性1”：”屬性1值”，”屬性N ”:”屬性N的值”｝)；

3） 顯示/隱藏元素

語法：$(selector).show(); //顯示元素

$(selector).hide (); //隱藏元素

3.jQuery的代碼風格

1.“$”的使用

在jQuery程序中，使用最多的是“$”，無論是頁面元素的選擇器，還是功能函數的前綴，都 必須使用該符號。它“$”等同於jQuery。

1. 鏈式操作

對一個對象進行多重操作，而只調用一個對象。

寫法：

$(“h1”).mouseover(function(){

//代碼1；

}).mouseout(function(){

//代碼2；

})；

1. 隱式叠代

在jQuery中獲取一個集合後，會默認遍歷內部的所有元素。

1. 添加註釋

A） 開發階段：為代碼添加註釋，增加代碼的可讀性

B） 維護階段：把關鍵的模塊形成開發文檔，便於後期的維護

C） 產品正式發布：建議刪除註釋，減少文件的大小，加快下載速度，提高用戶的體驗度。

三.jQuery對象和DOM對象

1.DOM對象

直接使用javaScript獲取的節點對象就是DOM對象。

在javaScript中，使用getElementsByTagName()或getElementById()來獲取元素的節點，通過該方式得到的DOM元素都是DOM對象。

2. jQuery對象

jQuery對象就是通過jQuery包裝後的DOM對象後產生的對象。它能夠使用jQuery的方法。

3. jQuery與DOM對象的相互轉換

jQuery對象無法直接使用DOM對象的任何方法。

DOM對象也無法直接使用jQuery對象的方法。

jQuery對象名前綴帶有“$”

1. jQuery對象轉換成DOM對象

1） jQuery對象是一個類似數組的對象，可以通過[index]的方法得到相應的DOM對象

var $text=$(“text”); //jQuery對象

var text=$text[0]; //DOM對象

2） 通過get(index)方法得到相應的DOM對象

var $text=$(“text”); //jQuery對象

var text=$text.get[0]; //DOM對象

2.DOM對象轉換jQuery對象

對於一個DOM對象，只需要使用$()函數將DOM對象包裝起來，酒可以獲得一個jQuery對象。

var text=document.getElementById(“text”); //DOM對象

var $text=$(text); //jQuery對象

本章總結：

1. 要使用jQuery的功能，需要首先引用jQuery庫文件，首先引入jQuery插件文件，再引用自己的.js文件。否則可能無法識別或編譯。
2. 在一個頁面中使用了多個庫文件，變量沖突：使用jQuery.noConflict()方法解決對變量$的jQuery的控制權，即釋放jQuery對$變量的控制權。
3. 使用next()方法可以獲得當前元素的下一個同胞元素。

第一章 jQuery基礎