JQuery瞭解-簡潔API設計思想
目錄
前言
jQuery已過時，新專案不會使用，但大量網站仍舊在使用jQuery（在網站按F12，Console中輸入一個$，按下回車，大部分還是會返回一個"function(a，b){return new r.fn.init(a,b,h)}"【以京東為例】），學習jQuery對寫程式碼和封裝庫也很有幫助。
但jQuery 的 API 設計思想並未過時，一直流傳至今，簡潔風格使得它很受歡迎。
jQuery 使用版本：我們可以在瀏覽器的 Console 視窗中使用$.fn.jquery命令檢視當前 jQuery 使用的版本。
網頁中新增 jQuery
可以通過多種方法在網頁中新增 jQuery。 您可以使用以下方法：
- 從jquery.com下載 jQuery 庫
- 從 CDN （內容分發網路）中載入 jQuery, 如從 Google 中載入 jQuery
1.jQuery 提供了一個簡單而又經典的範例供大家學習
jQuery 用到的一些設計模式（其實就是程式設計套路）。
一、釋出訂閱模式
var eventHub = $({}) eventHub.on('xxx', function(){ console.log('收到') }) eventHub.trigger('xxx')二、用原型繼承實現外掛系統
$.fn.modal = function(){ ... } $('#div1').modal()Vue 2 的外掛也是類似的思路。
三、事件委託
$('div').on('click', 'span', function(){...})四、鏈式呼叫
$('div').text('hi').addClass('red').animate({left: 100})五、函式過載（偽）
$(fn) $('div') $(div) $($(div)) $('span', '#scope1')你會發現 $ 這個函式的引數可以是函式、字串、元素和 jQuery 物件，甚至還能接受多個引數。
六、名稱空間
// 你的外掛在一個 button 上綁定了很多事件 $button.on('click.plugin', function(){...}) $button.on('mouseenter.plugin', function(){...}) // 然後你想在某個時刻移除以上所有事件 $button.off('.plugin')如果你不用 jQuery 就很麻煩了。
七、高階函式
var fn2 = $.proxy(fn1, asThis, param1)$.proxy 接受一個函式，返回一個新的函式。
2.jQuery 對事件監聽的簡化
// 那時，如果不用 jQuery，監聽事件（相容 IE 6）你要這麼寫
if (button.addEventListener)
button.addEventListener('click',fn);
else if (button.attachEvent) {
button.attachEvent('onclick', fn);
}else {
button.onclick = fn;
}
// 但是如果你用 jQuery，你只需要這麼寫
$(button).on('click', fn)3.jQuery 對元素選擇的簡化
// 如果你想獲取 .nav > .navItem 對應的所有元素，用 jQuery 是這樣寫的
$('.nav > .navItem')
// 在 IE 6 上，你得這麼寫
var navItems = document.getElementsByClassName('navItem')
var result = []
for(var i = 0; i < navItems.length; i++){
if(navItems[i].parentNode.className.match(/\bnav\b/){
result.push(navItems[i])
}
}4.jQuery當時能迅速的風靡全球的原因無外乎下面三條
(1)出色的DOM操作封裝
例如原來你要修改樣式，原生JavaScript是這麼寫的var dom = document.getElementById('test'); dom.style.color = 'blue';用上jQuery後，一行搞定
$('#test').css('color', 'blue');(2)便捷的Ajax操作
原生的JavaScript在ajax請求上的程式碼，嗯，我就不貼程式碼了！具體多複雜，懂前端的人都明白。
用上了jQuery後，簡潔了不少！如下所示$.ajax({url:"/guduyan", success:function(result){ //dosomething }});(3)出色的動畫效果
例如，我們需要把 一個<div>元素移動到左邊，直到left屬性等於250畫素為止。
使用jQuery，我們可以這麼寫$("div").animate({left:'250px'});
5.jQuery能支援IE8以下版本
由於Vue之類的框架，只能支援IE8以上的版本。現在很多那種事業單位裡頭的古董電腦，很多都還是IE7，像這種情況下，用vue之類的MVVM框架顯然不適合。
6.jQuery與Javascript入口函式的區別
jQuery 入口函式:
$(document).ready(function(){ // 執行程式碼 }); 或者 $(function(){ // 執行程式碼 });JavaScript 入口函式:
window.onload = function () { // 執行程式碼 }jQuery 入口函式與 JavaScript 入口函式的區別：
- jQuery 的入口函式是在 html 所有標籤(DOM)都載入之後，就會去執行。
- JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的檔案載入完後，才會執行。
