一：jQuery介紹
jQuery 是一個 JavaScript 函數庫
jQuery追求 "Write less,do more"
jQuery 極大地簡化了 JavaScript 編程
引包：把jQuery源文件放到項目中
<script src="jquery-1.11.1.min.js"></script>
入口函數：當DOM載入就緒時執行js代碼
<script type="text/javascript">
入口函數方式一：
$(function(){
});
方式二：
$(document).ready(function(){
});
</script>jQuery兩個變量：$、jQuery；$是jQuery的一個別名，所以用它倆的效果是一樣的
二：jQuery核心
基礎語法是：$(selector).action()
美元符號$定義 jQuery；
選擇符（selector）“查詢”和“查找” HTML 元素；
jQuery 的 action() 執行對元素的操作；
length：jQuery 對象中元素的個數
selector：返回傳給jQuery()的原始選擇器
jQuery(html,[ownerDocument])
根據提供的原始 HTML 標記字符串，動態創建由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。
//動態創建div元素，並添加屬性與綁定事件
$("<div>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");如：jQuery對象[0] = 原生DOM對象；$(domEle) = jQuery對象
each(callback)：以每一個匹配的元素作爲上下文來執行一個函數
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this;this指代的是DOM對象而非jQuery對象
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
};
};
});三：選擇器
jQuery可以使用CSS選擇器。
部分選擇器（除CSS選擇器）：
| :first | 獲取匹配的第一個元素 | :hidden | 匹配所有不可見元素 |
| :last | 獲取匹配的最後一個元素 | :visible | 匹配可見元素 |
| :first-child | 匹配作爲第一個子元素的元素 | :first-of-type | 其父元素的某個類型的第一個子元素 |
| :last-child | 匹配作爲最後一個子元素的元素 | :last-of-type | 其父元素的某個類型的最後一個子元素 |
| :not(selector) | 去除與給定選擇器匹配的元素 | :nth-of-type() | 其父元素的某個類型的第N個子元素 |
| :even | 匹配索引值爲偶數的元素 | :nth-child(index) | 匹配其父元素下的第N個子元素， index從1開始 |
| :odd | 匹配索引值爲奇數的元素 | :input | 匹配所有input、textarea、select、button元素 |
| :eq(index) | 匹配給定索引值的元素 | :text | 匹配單行文本框，即type="text" |
| :gt(index) | 匹配大於給定索引值的元素 | :password | 匹配密碼框 |
| :lt(index) | 匹配小於給定索引值的元素 | :radio | 匹配所有單選按鈕 |
| :focus | 匹配當前獲取焦點的元素 | :checkbox | 匹配所有複選框 |
| :contains(text) | 匹配包含此文本的元素 | :submit | 匹配所有提交按鈕 |
| :empty | 匹配所有不包含子元素或者文本的空元素 | :image | 匹配所有圖像域 |
| :has(selector) | 包含給定選擇器的元素 | :reset | 匹配所有重置按鈕 |
| :selected | 匹配所有選中的option元素 | :checked | 匹配所有選中的元素(複選框、單選框等， select中的option) |
四：方法小結
1，屬性方法
attr() ：設置或返回被選元素的屬性值
$("#t1").attr("class","test");
$("#t1").attr({
"class" : "test",
"title" : "test"
});addClass()：添加類屬性
removeClass()：刪除類屬性
toggleClass()：如果存在就刪除一個類，不存在則添加一個類
text()：取得或設置匹配元素的內容
html()：設置或返回所選元素的內容（包括 HTML 標記）
val()：獲得或設置匹配元素的當前值
2，CSS方法
css()：訪問或設置元素的樣式屬性
css("propertyname"); css("propertyname","value");
css({"propertyname":"value","propertyname":"value",...});
height()：content高度
width()
innerHeight()：content高度+padding
innerWidth()
outereHeight()：content高度+padding+border
outerWidth()
3，文檔處理方法
append() - 向每個匹配的元素內部追加內容
appendTo() - 把所有匹配的元素追加到另一個指定的元素元素集合中
prepend() - 向每個匹配的元素內部前置內容
prependTo() - 把所有匹配的元素前置到另一個、指定的元素元素集合中
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
insertAfter()：把匹配的元素插入另一個元素的後面
insertBefore()：把匹配的元素插入另一個元素的前面
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
clone() 克隆匹配的DOM元素並且選中這些克隆的副本。 clone(true) :參數true指示事件處理函數會被複制
$("p").remove();
$("p").remove(".hello");4，遍歷(篩選)方法
parent() 返回被選元素的直接父元素
children() 返回被選元素的所有直接子元素
find() 返回被選元素的後代元素，一路向下直到最後一個後代
first() 方法返回被選元素的首個元素
last() 方法返回被選元素的最後一個元素
eq() 方法返回被選元素中帶有指定索引號的元素
siblings() 方法返回被選元素的所有同胞元素。
next() 方法返回被選元素的下一個同胞元素
nextAll() 方法返回被選元素的所有跟隨的同胞元素
nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素
prev() 返回被選元素的前一個同胞元素
prevAll()
prevUntil()
filter() 方法允許您規定一個標準；不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回
not() 方法返回不匹配標準的所有元素。
is(expr|obj|ele|fn)：根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。
5，事件方法
on(events,[selector],[data],fn) ：綁定事件處理函數
off(events,[selector],[fn]) ：移除事件處理函數
mouseenter() 當鼠標指針穿過元素時觸發
mouseleave() 當鼠標指針離開元素時觸發
mouseover() 鼠標指針穿過被選元素或其子元素時觸發
mouseout() 鼠標指針離開被選元素還是其任何子元素時觸發
click() 點擊事件
dblclick() 雙擊事件
focus() 獲得焦點事件
blur() 失去焦點事件
$("p").click(function(){
$(this).hide();
});該事件僅適用於文本域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生。
input()：在用戶輸入時觸發
該事件在 <input> 或 <textarea> 元素的值發生改變時觸發
hover()：模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法
當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);keyup()：當按鈕被鬆開時，發生 keyup 事件。它發生在當前獲得焦點的元素上
$(window).keydown(function(event){
switch(event.keyCode) {
// 不同的按鍵可以做不同的事情
// 不同的瀏覽器的keycode不同
// 更多詳細信息: http://unixpapa.com/js/key.html
// 常用keyCode： 空格 32 Enter 13 ESC 27
}
});6，動畫與效果方法
show()：顯示隱藏的匹配元素
hide()：隱藏元素
toggle()：切換 hide() 和 show() 方法；顯示被隱藏的元素，並隱藏已顯示的元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
fadeIn() ：用於淡入已隱藏的元素
fadeOut() ：用於淡出可見元素
fadeToggle()： fadeIn() 與 fadeOut() 方法之間進行切換
fadeTo() ：允許漸變爲給定的不透明度（值介於 0 與 1 之間）
$(selector).fadeIn(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
slideDown()：用於向下滑動元素
slideUp()：用於向上滑動元素
slideToggle()：在 slideDown() 與 slideUp() 方法之間進行切換
$(selector).slideDown(speed,callback);
animate() 方法用於創建自定義動畫
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性
也可以定義相對值（該值相對於元素的當前值），需要在值的前面加上 += 或 -=；
甚至可以把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"
注：如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！
stop() 方法用於停止動畫或效果，在它們完成之前
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
由於 JavaScript 語句（指令）是逐一執行的 - 按照次序，動畫之後的語句可能會產生錯誤或頁面衝突，因爲動畫還沒有完成。
爲了避免這個情況，可以以參數的形式添加 Callback 函數
結論：如果希望在一個涉及動畫的函數之後來執行語句，請使用 callback 函數。