1. 排隊和並發

1.並發: 多個css屬性同時變化
放在一個animate函數內的多個css屬性默認並發變化

2.排隊: 多個css屬性先後變化
對同一個元素，先後調用多個動畫API，都是排隊執行
原理: 所有動畫API起始並不是立刻開始動畫，而僅是將當前動畫函數加入元素的動畫隊列中等待執行。

停止動畫: $(...).stop();
默認: 僅停止動畫隊列中，當前正在播放的一個動畫，隊列中後續動畫，依然執行
如何停止動畫，並清空隊列: .stop(true)

選擇器: :animated 可選擇或判斷一個正在播放動畫的元素

2. 類數組對象操作

遍歷
$(...).each(function(i,elem){

查找
var i=$(...).index(要找的DOM元素/jq對象)
簡化: 如果在一個父元素內查找子元素:

$(子元素).index();

3. 為jquery添加自定義方法

1.添加在jQuery.fn中
強調: jQuery.fn.自定義方法=function(){

    //this->將來調用該方法的jq對象
   }

2.調用時: $(...).自定義方法()

4. 插件: 為標準函數庫或框架添加功能的第三方庫

官方插件jQuery UI

a. 重寫了三類簡單動畫API，添加了新的動效

b. 為addClass/removeClass/toggleClass，也添加了動效

c. 重寫了animate方法，支持顏色動畫

部件
什麽是部件: 具有完整樣式和行為的小功能
如何使用:

1. 引入: jquery-ui.css
2. 按照部件約定，編寫html內容結構
3. 引入jquery.js和jquery-ui.js
4. 在自定義腳本中，找到插件的父元素，調用插件API
 

原理:

侵入性: 在開發者不知情的情況下，自動添加class和行為
優點: 簡單
缺點: 不可維護

jQuery UI vs bootstrap

jQuery UI 傻瓜式，侵入式
優點: 簡單

缺點: 不可維護

bootstrap 少量手動添加樣式和行為(自定義擴展屬性)
缺點: 相比jQuery UI，稍微麻煩
優點: 可定制

5. 第三方插件

文件上傳
富文本編輯器
masonry: 彩磚墻/瀑布流

6. 自定義插件

何時: 只要希望復用一塊功能和樣式時，都要封裝為插件
前提: 必須已經用原生的html,css,jss實現了插件的功能

2種封裝插件的風格:
jQuery侵入式——

1. 將插件所需的css提取出來，保存在單獨的css文件中

2. 定義插件的js文件:
先檢查是否提前引入了jQuery
定義插件函數，保存在jQuery的原型對象jQuery.fn中

侵入: 根據插件需要，為子元素自動添加class 為子元素綁定事件處理函數

3. 使用插件:
引入插件的css文件
在body中按插件的規定，編寫html內容
引入jquery.js和插件的js文件
在自定義腳本中，查找要應用插件的父元素，調用插件函數

Bootstrap DIY式——

1. 將css拷貝到獨立的css文件中

2. 編寫js:
先驗證是否提前加載了jQuery
查找自定義擴展屬性，為其綁定事件

3. 使用插件:
引入插件的css
按照插件的HTML格式要求，編寫內容
為插件的HTML元素手動添加class
為觸發事件的元素添加指定的自定義擴展屬性

7. jQuery的ajax API

$.ajax({
type:"get/post",
url:"xxx",
data:"rawData"/{ 變量名:值, ...}
dataType:"json",
beforeSend(){

//在發送之前觸發

}
completed(){

//只要請求完成，無論成功還是失敗，都觸發

}
success(data){

//請求成功觸發

}
error(){

//發生錯誤時觸發

}
}).then(data=>{
... ...
}).catch(err=>{ ... })

簡寫

專門發送get請求

$.get(url,data,dataType).then(data=>{ ... })

專門發送get請求，接收JSON響應，並自動轉為js對象

$.getJSON(url,data).then(data=>{ ... })

專門發送get請求，接收js語句響應，並執行

$.getScript(url,data)

專門發送get請求，獲取一段html代碼片段的響應，並自動填充到前面的父元素中

$(父元素).load("xx.php/xx.html")
強調: 不支持then!

專門簡化post請求的:
$.post(url,data,dataType).then(data=>{ ... })

8. 跨域請求

跨域:
從http://store.company.com/dir/...

允許跨域請求: link, img, script
不允許跨域: xhr對象 (ajax請求)
變通: script 需要服務器返回一段可執行的js語句

服務器應該返回包含數據的一條可執行的js語句

如何實現？
客戶端實現: JSONP (填充式json)

1. 在客戶端定義處理函數

2. 在按鈕單擊事件中，動態創建script元素，src設置為服務端地址，並攜帶請求參數callback=函數名

3. 在服務器端，接收請求參數中的函數名，將函數名和要返回的數據，拼接為一條可執行的js語句

4. 客戶端script，請求服務端php，獲得可執行語句，自動調用提前定義好的函數處理數據

5. 在客戶端處理函數結尾，要動態刪除script

起始jQuery的ajax api都可用, 只不過，dataType必須都寫成jsonp，原理同上。

服務端: header("Access-Control-Allow-Origin:*");
允許客戶端使用xhr對象跨域請求！

前端知識點總結——jQuery（下）