本來這一篇要寫JavaScript的事件處理的，但是內容好多啊，這一套那一套的，看得有點暈……查資料的時候發現好些東西大家都是用 jQuery 實現的，據說挺好上手的，那我就先看看 jQuery，之後和JS對照着學吧。
jQuery是一個JavaScript函數庫，它和JS的聯繫與區別是：
JavaScript是用於Web客戶端開發的腳本語言，Ajax是基於JS語言，主要組合JS、CSS、XML三種技術的新技術，是用於創建交互式網頁應用的網頁開發技術。jQuery是JS的框架，基於JS語言，集合Ajax技術開發出來的JS庫，封裝JS和Ajax的功能，提供函數接口，大大簡化了Ajax，JS的操作。
開始了，奧裏給！
目錄
1. jQuery的引入
可以通過多種方法在網頁中添加 jQuery：
- 從 jquery.com 下載 jQuery 庫， 將下載的文件放在網頁的同一目錄下，通過HTML的<script>標籤引用：
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
- 從 CDN （內容分發網絡）中載入 jQuery，通過下面的代碼引用：
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
可選用的CDN包括：
國內推薦站點：
Staticfile CDN：src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"
百度CDN：src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
新浪CDN：src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"
又拍雲 CDN：src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"
國外推薦站點：
Google CDN：src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
Microsoft CDN：src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"
我用的是第二種方法，因爲這些大公司的CDN比較流行，用戶訪問你網站之前很可能在訪問別的網站時已經將jQuery緩存在瀏覽器中了，所以能加快網站的打開速度，懶洋洋美滋滋。
當然，剛剛那句話只是引入了jQuery的庫，我們還要自己編寫很多代碼。對於少量的代碼，我們可以把它放在<head>部分的<script>標籤內：
<head>
<!--引入jQuery庫-->
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<!--jQuery代碼-->
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
爲了便於維護，很多時候，我們會把jQuery函數放到獨立的.js文件中，因此在<head>部分引入對應的文件：
<head>
<!-- 引入jQuery庫 -->
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入獨立的jQuery代碼 -->
<script src="my_jquery_functions.js"></script>
</head>
2. jQuery的功能
看到這樣一個說法，jQuery的使用類似於CSS的選擇器，可以方便的操作HTML元素。剛開始看的確是有這樣的感覺。jQuery 語法是爲 HTML 元素的選取編制的，通過選擇器，選取（或者查詢query）HTML元素，然後像用CSS進行格式設置一樣，對元素執行某些操作（action)。
2.1 基礎語法
jQuery的基礎語法是： $(selector).action()
- 美元符號$：定義 jQuery，這也是jQuery與JS最直觀的區別。
- 選擇符（selector）："查詢"和"查找" HTML 元素。
- action()： 執行對元素的操作。
下面是最常見的例子：
-
$(this).hide() 隱藏當前元素
-
$("p").hide() 隱藏所有 <p> 元素
-
$("p.test").hide() 隱藏所有 class="test" 的 <p> 元素
-
$("#test").hide() 隱藏所有 id="test" 的元素
不管是用JS還是jQuery等JS框架，都需要在進行交互之前確定整個DOM已經加載（這個之後會講）。在直接JavaScript編程時，用如下方式等待窗口加載：
window.onload = function(){
//Do whatever
}
在jQuery中，等價的操作時將所有jQuery函數寫在一個 ready() 函數中：
$(document).ready(function(){
// 開始寫 jQuery 代碼...
});
對比 $(selector).action() 結構來分析一下，$(document) 指選擇窗口文檔；ready()方法，等同於在就緒事件觸發時調用一個內部匿名函數。
特殊的是，因爲ready() 方法只能用於當前文檔，無需使用選擇器，也可以使用下面的簡寫：
$(function(){
// 開始寫 jQuery 代碼...
});
這裏還有一個小知識點—— jQuery 入口函數與 JavaScript 入口函數的區別：
- jQuery 的入口函數是在 html 所有標籤(DOM)都加載之後，就會去執行。
- JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。
2.2 jQuery選擇器
噹噹噹當，就像剛纔說的，jQuery的選擇器是基於已經存在的CSS選擇器的，所以這部分內容可以快快過一下就好~開心
對了，別忘了jQuery 中所有選擇器都是以美元符號開頭的——$()。
- 元素選擇器：$("p") 在頁面中選取所有 <p> 元素
- #id 選擇器：$("#test") 選取id="test"的元素
- .class 選擇器：$(".test") class="test" 屬性的元素
當然，還有複合的用法，下面是一些比較常見的，大家可以在教程網站上在線看一看效果，我就不多說了：
https://www.runoob.com/jquery/jquery-selectors.html
2.3 jQuery處理事件
在事件中，我們經常聽到的術語“觸發”或者“激發”，比如：當您點下按鈕時，就觸發了click事件。頁面的響應叫做事件。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。常見的事件有：
大家可以在教程網站上嘗試一下這些代碼的操作：https://www.runoob.com/jquery/jquery-events.html
下面我只寫幾個簡單的例子，大家體會一下 jQuery 中事件處理器與元素關聯的方法：
//單擊事件
$("p").click(function(){
$(this).hide();
});
//雙擊事件
$("p").dblclick(function(){
$(this).hide();
});
//焦點事件
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
2.4 jQuery修改元素屬性
通過 jQuery 選擇器選擇了元素之後，還可以應用 jQuery 函數修改元素的屬性。
對於下面這樣一個標籤元素:
<img id='img' src="1.jpg" alt='1' class="imgs"></img>
我們通常將 id、src、alt、class等稱爲屬性，或者元素屬性。但是，當瀏覽器對標籤元素進行解析時，會將元素解析爲Dom對象，相應的，元素屬性也就解析爲Dom屬性。
元素屬性和Dom屬性只是在我們對元素進行不同解析時的不同稱呼，但是元素屬性和Dom屬性並不一定完全相同，比如<img>的class屬性，在表現爲元素屬性時屬性名是class，在表現爲Dom屬性時，屬性名爲className。在JavaScript中，我們可以直接獲取或設置Dom屬性。
在jQuery中，可用 attr() 方法修改選中的元素的屬性，該參數的第一個參數是訪問的屬性，另一個參數是設置的新值：
$("button").click(function(){
$("#my-link").attr("href","https://blog.csdn.net/qq_45427038"); //修改id爲my-link的herf屬性
});
也可以使用“鏈式函數調用”，將選擇器和方法分成兩句話來寫。下面的兩組代碼是等效的：
//添加屬性 disabled = "disabled"
$('#submitButton').attr('disabled','disabled');
//鏈式調用
var submit = $('#submitButton');
submit.attr('disabled','disabled');
attr() 方法也允許您同時設置多個屬性：
$("#my-link").attr({
"href" : "https://blog.csdn.net/qq_45427038",
"title" : "MQ的博客"
});
//另一種方法
$("#my-link").attr("href","https://blog.csdn.net/qq_45427038").attr("title", "MQ的博客");
2.5 jQuery修改元素樣式
jQuery 擁有若干進行 CSS 操作的方法。常用的有以下幾種：
- addClass() 向被選元素添加一個或多個類
- removeClass() 從被選元素刪除一個或多個類
- toggleClass() 對被選元素進行添加/刪除類的切換操作
動態的練習可以在https://www.runoob.com/jquery/jquery-css-classes.html上做。
這裏說一下toggleClass()，還挺有意思的。toggleClass()函數用於切換類的應用，如果選中的元素沒有應用類則添加，否則刪除類。可以看出，toggleClass() 這個方法的側重點在指定樣式的切換,一般配合點擊、 鼠標懸浮 、鼠標劃過事件。
但是toggleClass()方法還有另一個可選的參數——switch參數。若switch爲true，則只進行添加操作，如爲false，則只刪除類，感覺就變成了一個一次性的變化操作了。
順便說一個和toggleClass()很像的方法，toggle()。toggle() 方法在被選元素上進行hide()和show()之間的切換，也就是如果一個元素是隱藏的，則運行 show()，如果一個元素是可見的，則運行 hide()，該方法也會造成一種切換的效果。
jQuery css() 方法用於設置或返回被選元素的一個或多個樣式屬性：
//返回css屬性： css("propertyname");
$("p").css("background-color"); //返回首個<p>元素的background-color值
//設置css屬性: css("propertyname","value");
$("p").css("background-color","yellow"); //爲所有匹配元素設置background-color值
//同時設置多個屬性： css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"}); //爲所有匹配元素設置background-color和font-size屬性
2.6 注意：jQuery中常用屬性的獲取
對於一些常用的屬性，例如width、height之類的，使用 attr("width") 和 css("width") 是無法正常獲取其值的，但是這些屬性的值可以直接訪問。
（1） 寬高屬性
注意：返回的高度、寬度均爲數字，不帶px。
（2）位置屬性
3. jQuery效果