20180706 jQuery 之溫故而知新

---

功能涵蓋

---

1. HTML 元素選取和操作
2. HTML 事件函數 ：包括a.鼠標事件，b.鍵盤事件，c.表單事件和 d.文檔/窗口事件。
3. HTML DOM 遍歷和修改，包括祖先，後代，同胞，過濾。
4. CSS 操作
5. JS 動畫和特效包括：a.隱藏和顯示，b.淡入淡出，c.滑動，d.動畫和停止動畫，e.方法鏈
6. AJAX 請求

---

注意

---

安裝

使用 BootCDN、百度、又拍雲、新浪、谷歌或微軟的 jQuery，有一個很大的優勢：
許多用戶在訪問其他站點時，已經從百度、又拍雲、新浪、谷歌或微軟加載過 jQuery。所以結果是，當他們訪問您的站點時，會從緩存中加載 jQuery，這樣可以減少加載時間。同時，大多數 CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也可以提高加載速度。

//BootCDN:
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
//百度 CDN:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//又拍雲 CDN:
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
//新浪 CDN:
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
//Microsoft CDN:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

// 版本兼容IE 處理，IE 9 之前不能使用2.0.0
<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

易忽略的細節

1.jQuery 入口函數與 JavaScript 入口函數的區別：

// jQuery 的入口函數是在 html 所有標籤(DOM)都加載之後，就會去執行。
$(document).ready(function(){
    // 執行代碼
});
或者
$(function(){
    // 執行代碼
});



// JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。
window.onload = function () {
    // 執行代碼
}

2.load() 方法在 jQuery 版本 1.8 中已廢棄。 3.unload() 方法在 jQuery 版本 1.8 中被廢棄，在 3.0 版本被移除。 4. DOM = Document Object Model（文檔對象模型）

DOM 定義訪問 HTML 和 XML 文檔的標準：
"W3C 文檔對象模型獨立於平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。"

5.屬性操作

attr 和 prop 的區別介紹：
<a href="http://runoob.com" num="2"></a>

對於 HTML 元素本身就帶有的固有屬性，在處理時，使用 prop 方法或者attr 方法。
var href = $("a").prop("href");

對於 HTML 元素我們自己自定義的 DOM 屬性，在處理時，使用 attr 方法。
var num = $("a").attr("num");

6.attr()的回調函數

jQuery 方法 attr()，也提供回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。
允許我們對原始值進行邏輯操作後，返回期望的值來更新屬性值。

7.toggleClass() - 對被選元素進行添加/刪除類的切換操作

.shadow{
  width:100vw;
  height:100vh;
  background:rgba(200,200,200,.8);
}
<a id="go" class="shadow"></a>
$("#go").toggleClass("shadow");

8.css() 可以傳 json 對象，設置多個css屬性。 9.獲取元素尺寸，對盒子模型不同程度尺寸的提取。 10.通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。 11.AJAX

//將請求結果放入選中的元素中
$(selector).load(URL,data,callback);
//將請求結果放入指定元素中
$(selector).load(URL+selector2,data,callback);
// data = {}傳入請求參數
$(selector).load(URL+selector2,data,callback);
// callback = function(responseTxt,statusTxt,xhr)){}，responseTxt是請求結果，statusTxt是響應狀態，xhr是請求對象。
$(selector).load(URL,data,callback);

//GET 基本上用於從服務器獲得（取回）數據。註釋：GET 方法可能返回緩存數據。
$.get(URL,callback);
//POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，並且常用於連同請求一起發送數據。
$.post(URL,data,callback);

12.noConflict() 釋放對$標識符的控制，避免與其他框架的衝突，返回一個jquery對象，可以用一個變量接收，然後再使用。 13.jsonp 是json的一種使用模式，實現跨域請求。

// url 用佔位符將回調函數傳到服務器 url="http://www.baidu.com/jsoncallback=?"
$.getJson(url,function(data){})

14.從動態粒子效果 學習插件。

1.函數即對象 2.畫布 canvas 3.幾何算法

---

實用插件列表

---

1. jQuery Validate 用於表單驗證
2. jQuery Accordion 用於創建摺疊菜單
3. jQuery Autocomplete 用於根據用戶輸入值進行搜索和過濾，讓用戶快速找到並從預設值列表中選擇
4. jQuery Growl 消息提醒
5. jQuery Password Validation 密碼驗證,可以評價密碼。
6. jQuery Prettydate
7. jQuery Tooltip 取代了原生的工具提示框，讓它們可自定義，您只需要調整它們的內容、位置和外觀即可
8. jQuery Treeview 提供了一個無序靈活的可摺疊的樹形菜單。適用於一些菜單的導航，支持基於 cookie 的持久性菜單。
9. jQuery qrcode 提供生成二維碼 的工具。

//  jQuery Validate 

//  jQuery Accordion
//  jQuery Autocomplete

//  jQuery Growl
//  jQuery Password Validation
//  jQuery Prettydate 
//  jQuery Tooltip
//  jQuery Treeview

//  jQuery 
<script src="jquery.js"></script>
// https://github.com/jeromeetienne/jquery-qrcode
<script src="jquery.qrcode.min.js"></script>
<script>
$("#qrcode").qrcode({width:50,height:50,text:"www.baidu.com"});//默認使用canvas渲染
$("#qrcode").qrcode({width:50,height:50,render:"table",text:"www.baidu.com"});//使用table渲染 不推薦
</script>
<div id="qrcode" style="width:50px;height:50px;"></div>