一、簡介與安裝
jQuery是一個(gè)JavaScript函數(shù)庫。
jQuery是一個(gè)輕量級(jí)的"寫的少，做的多"的JavaScript庫
jQuary 主要功能包括如下：
- html 的元素選取
- html的元素操作
- html dom遍歷和修改
- js特效和動(dòng)畫效果
- css操作
- html事件操作
- ajax異步請求方式
網(wǎng)頁中添加jQuary有兩種方式：
-
第一種是在官網(wǎng)下載jQuary庫，然后在
<head>標(biāo)簽中添加使用HTML的<script>標(biāo)簽引用它,或者在<body>標(biāo)簽的最后引用它，需要注意的是要將jQuery的引用放在所有js引用的最前邊，避免引入其他js文件時(shí)對它的調(diào)用造成影響。<script src="js/jquery-1.11.1.min.js"></script>
我們下載的jQuery庫時(shí)有兩個(gè)版本可供選擇：
* Production version —— 用于實(shí)際的網(wǎng)頁開發(fā)，jQuery文件是被壓縮和精簡的
* Development version —— 用于開發(fā)測試，jQuery文件具有可讀性
-
第二種是通過 CDN 引用它，百度、谷歌、微軟、新浪、菜鳥教程等的服務(wù)器都存有jQuery，我們可通過
<script>標(biāo)簽的src引用他們的CDN 庫。注意：國內(nèi)的建議使用百度、新浪等國內(nèi)CDN地址，國外的可以使用谷歌和微軟。 下面簡單舉兩個(gè)例子：- 百度 CDN:
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>- 新浪 CDN:
<head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>
二、基礎(chǔ)內(nèi)容
1. 選擇器
????????通過選擇器我們可以多單個(gè)或者多個(gè)HTML元素進(jìn)行操作。jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。
???????? 以美元符號(hào)開頭： $() 來獲取。
實(shí)例：
| 語法 | 描述 |
|---|---|
| $("p") | 元素選擇器,獲取頁面中所有的<p>標(biāo)簽 |
| $("#test") | #id 選擇器，獲取id為test的元素，頁面中id是唯一的 |
| $(".test") | .class 選擇器，獲取class為test的元素 |
| $("*") | 選取所有元素 |
| $(this) | 選取當(dāng)前 HTML 元素 |
| $("p.intro") | 選取 class 為 intro 的<p>元素 |
| $("p:first") | 選取第一個(gè)<p>元素 |
| $("ul li:first") | 選取第一個(gè)<ul>元素的第一個(gè)<li>元素 |
| $("ul li:first-child") | 選取每個(gè)<ul>元素的第一個(gè)<li>元素 |
| $("[href]") | 選取帶有 href 屬性的元素 |
| $("a[target='_blank']") | 選取所有 target 屬性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") | 選取所有 target 屬性值不等于 "_blank" 的<a>元素 |
| $(":button") | 選取所有 type="button"的 <input>元素 和 <button> 元素 |
| $("tr:even") | 選取偶數(shù)位置的 <tr> 元素 |
| $("tr:odd") | 選取奇數(shù)位置的 <tr> 元素 |
2. 語法
* jQuery 語法是通過選取 HTML 元素，并對選取的元素執(zhí)行某些操作。寫法如下：
```
$(selector).action();
$("#test").hide(); - 隱藏所有 id="test" 的元素
```
* 文檔就緒事件
為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼,我們可以將標(biāo)簽的初始化事件和方法的綁定在如下函數(shù)中操作。
```
$(document).ready(function(){
// 開始寫 jQuery 代碼...
});
也可以簡寫為：
$(function(){
// 開始寫 jQuery 代碼...
});
```
3. 事件
| 鼠標(biāo) 事件 | 鼠標(biāo)事件觸發(fā)方式 |
|---|---|
| click | 用戶點(diǎn)擊 HTML 元素時(shí) |
| dblclick | 雙擊元素 |
| mouseenter | 鼠標(biāo)指針穿過元素 |
| mouseleave | 鼠標(biāo)指針離開元素 |
| mousedown | 鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵 |
| mouseup | 在元素上松開鼠標(biāo)按鈕 |
| hover | 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave) |
| 鍵盤事件 | 鍵盤事件觸發(fā)方式 |
| keypress | |
| keydown | 在鍵盤按下時(shí)觸發(fā) |
| keyup | 在按鍵釋放時(shí)觸發(fā) |
| 表單事件 | 表單事件觸發(fā)方式 |
| submit | 提交表單 |
| change | 元素的值發(fā)生改變 |
| focus | 元素獲得焦點(diǎn) |
| blur | 元素失去焦點(diǎn) |
| 文檔/窗口事件 | 文檔/窗口事件觸發(fā)方式 |
| load | 指定的元素（及子元素）已加載，適用于任何帶有 URL 的元素（比如圖像、腳本、框架、內(nèi)聯(lián)框架） |
| resize | 調(diào)整瀏覽器窗口的大小 |
| scroll | 所有可滾動(dòng)的元素和 window 對象滾動(dòng) |
| unload | 用戶離開頁面 |
三、頁面效果
| 方法 | 描述 |
|---|---|
| show() | 顯示 |
| hide() | 隱藏 |
| toggle() | 切換 hide() 和 show() 方法 |
| fadeIn() | 淡入已隱藏的元素 |
| fadeOut() | 淡出可見元素 |
| fadeToggle() | fadeIn() 與 fadeOut() 方法之間進(jìn)行切換 |
| fadeTo() | 漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間） |
| slideDown() | 向下滑動(dòng)元素 |
| slideUp() | 向上滑動(dòng)元素 |
| slideToggle() | 在 slideDown() 與 slideUp() 方法之間進(jìn)行切換 |
| animate() | 添加動(dòng)畫效果，可操作所有 CSS 屬性，也可添加動(dòng)畫隊(duì)列，實(shí)現(xiàn)一系列的動(dòng)畫效果 |
| stop() | 停止動(dòng)畫或效果，在它們完成之前，參數(shù)屬性： stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列；goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫 |
注：以上方法除標(biāo)注不帶參數(shù)的都可帶有參數(shù)，speed代表速度；callback代表完成后所執(zhí)行的函數(shù)。
四、頁面元素 HTML
-
獲取內(nèi)容
- text() — 設(shè)置或返回所選元素的文本內(nèi)容
- html() - 設(shè)置或返回所選元素的內(nèi)容，包括 HTML 標(biāo)記（span標(biāo)簽）
- val() - 設(shè)置或返回表單字段的值（input、 div標(biāo)簽）
jQuery HTML 屬性操作方法
| 方法 | 描述 |
|---|---|
| val() | 設(shè)置或返回匹配元素的值 |
| html() | 設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容 |
| attr() | 設(shè)置或返回匹配元素的屬性和值 |
| addClass() | 向匹配的元素添加指定的類名 |
| hasClass() | 檢查匹配的元素是否擁有指定的類 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性 |
| removeClass() | 從所有匹配的元素中刪除全部或者指定的類 |
| toggleClass() | 從匹配的元素中添加或刪除一個(gè)類 |
| append() | 在被選元素的結(jié)尾插入內(nèi)容 |
| prepend() | 在被選元素的開頭插入內(nèi)容 |
| after() | 在被選元素之后插入內(nèi)容 |
| before() | 在被選元素之前插入內(nèi)容 |
| width() | 設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距） |
| height() | 設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距） |
| innerWidth() | 返回元素的寬度（包括內(nèi)邊距） |
| innerHeight() | 返回元素的高度（包括內(nèi)邊距） |
| outerWidth() | 返回元素的寬度（包括內(nèi)邊距和邊框） |
| outerHeight() | 返回元素的高度（包括內(nèi)邊距和邊框） |
| empty() | 刪除被選元素的子元素 |
| remove() | 刪除被選元素及其子元素 $("p").remove(".italic");過濾被刪除的元素 |
五、與后臺(tái)的交互 Ajax
AJAX 是與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不重載全部頁面的情況下，實(shí)現(xiàn)了對部分網(wǎng)頁的更新。它不是一種新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX = 異步 JavaScript 和 XML。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。
load() 方法
此方法是jQuery從后臺(tái)加載數(shù)據(jù)，并將返回的數(shù)據(jù)展示在頁面中。
語法：
$(selector).load(URL,data,callback);
load()方法也可以加載本地文件
必需的 URL 參數(shù)規(guī)定您希望加載的 URL。
可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。
-
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱?；卣{(diào)函數(shù)還可以設(shè)置不同的參數(shù)：
- responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
- statusTXT - 包含調(diào)用的狀態(tài)
- xhr - 包含 XMLHttpRequest 對象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內(nèi)容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
```
HTTP 網(wǎng)絡(luò)請求 GET POST
jQuery中客戶端與服務(wù)端有兩種方式進(jìn)行交互，常用的方法就是GET 和 POST：
| 方法 | 描述 |
|---|---|
| GET | 從指定的資源請求數(shù)據(jù),基本上用于從服務(wù)器獲得（取回）數(shù)據(jù),可能返回緩存數(shù)據(jù) |
| POST | 向指定的資源提交要處理的數(shù)據(jù)，也可以從服務(wù)端返回?cái)?shù)據(jù)，但不會(huì)緩存數(shù)據(jù)，常用于請求時(shí)上傳數(shù)據(jù) |
$.get() 方法
$.get() 方法通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。
基本語法：
$.get(URL,callback);
實(shí)例：
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status);
});
});
$.post() 方法
$.post() 方法通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)。
基本語法：
$.post(URL,data,callback);
實(shí)例：
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"biubiubiu",
url:"http://eyimu.com"
},
function(data,status){
alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);
});
});
