1. jQuery入門 1.1. 優點解決瀏覽器的相容性問題。支持擴展，通過插件方式實現擴展，避免特性蠕變。使用隱式迭代的技術，使方法的操作面向集合。如“.hide()” 使用方法鏈接編程方式，使多重操作集於一行。強大的選擇符。可靠的事件處理機制。完善的Ajax。行為層與結構層的分離。 ...

1. jQuery入門

1.1. 優點

解決瀏覽器的相容性問題。
支持擴展，通過插件方式實現擴展，避免特性蠕變。
使用隱式迭代的技術，使方法的操作面向集合。如“.hide()”
使用方法鏈接編程方式，使多重操作集於一行。
強大的選擇符。
可靠的事件處理機制。
完善的Ajax。
行為層與結構層的分離。
有很多使用者，文檔相當完善。
開源。

1.2. 缺點

不能向後相容，這是由jQuery的版本發佈特性決定

2. 選擇符

2.1. DOM

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程介面。

參考網址：

http://zh.wikipedia.org/wiki/文檔對象模型

http://www.w3.org/DOM/

2.2. 工廠函數$()

#id，根據給定的ID匹配一個元素。

例如:查找 ID 為"myDiv"的元素。

$("#myId");

element，根據給定的元素名匹配所有元素。

例如:查找 div元素。

$("div");

.class, 根據給定的類匹配元素。

例如:查找所有類是 "myClass" 的元素。

$(".myClass");

HTML 代碼如下:

<div id="notMe" class="notMe">div class="notMe"</div>

<div id="myId" class="myClass">div class="myClass"</div>

2.3. CSS選擇符

addClass(class)，為每個匹配的元素添加指定的類名。

例如:為匹配的元素加上 'selected' 類

$("p").addClass("selected");

removeClass([class])，從所有匹配的元素中刪除全部或者指定的類。

例如:從匹配的元素中刪除 'selected' 類

$("p").removeClass("selected");

HTML 代碼如下:

<p class="first">Hello</p>

2.4. 屬性選擇符

[attribute]，匹配包含給定屬性的元素。

例如:查找所有含有name 屬性的 input 元素

$(" input[name]") ;

[attribute=value]，匹配給定的屬性是某個特定值的元素。

例如:查找所有 name 屬性是 newsletter 的 input 元素

$("input[name='newsletter']");

[attribute^=value]，匹配給定的屬性是以某些值開始的元素。

例如:查找所有 name 屬性是 newsletter 的 input 元素

$("input[name='news']");

[attribute!=value]，匹配所有不含有指定的屬性。

例如:查找所有 name 屬性不是 newsletter 的 input 元素

$("input[name!='newsletter']");

[attribute$=value]，匹配給定的屬性是以某些值結尾的元素。

例如:查找所有 name 屬性是以letter 結尾的 input 元素

$("input[name$='letter']");

[attribute*=value]，匹配給定的屬性是以包含某些值的元素。

例如:查找所有 name 屬性是包含news 的 input 元素

$("input[name*='news']") ;

HTML 代碼如下:

2.5. 自定義選擇符

2.5.1. :odd和:even

:even，匹配所有索引值為偶數的元素，從 0 開始計數。

例如:查找表格的2、4、6行
$("tr:odd");

:odd，匹配所有索引值為奇數的元素，從 0 開始計數。

例如:查找表格的1、3、5行

$("tr:even");

HTML 代碼如下:

<table>

<tr><td>Header 1</td></tr>

<tr><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

2.5.2. 基於表單的選擇符

主要有:input，:text，:password，:radio，:checkbox，:submit，:image，:reset，:button，:file，:hidden等元素及:enabled，:disabled，:checked，:selected等元素屬性。

例如：即查找所有的input元素

$(":input");

2.6. DOM遍歷方法

2.6.1. 過濾

filter(expr)，篩選出與指定表達式匹配的元素集合。

例如：保留帶有select類的元素

$("p").filter(".selected");

2.6.2. 查找

next([expr])，取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

相對應的還有nextAll([expr])，prev([expr]) ，prevAll([expr])，parent([expr])，children([expr])

例如：找到每個段落的後面緊鄰的同輩元素。

$("p").next();

2.6.3. 串聯

andSelf()，加入先前所選的加入當前元素中。

例如：選取所有div以及內部的p，並加上border類。

$("div").find("p").andSelf().addClass("border");

end()，回到最近的一個"破壞性"操作之前。

例如：選取所有的p元素，查找並選取span子元素，然後再回過來選取p元素。

$("p").find("span").end();

2.7. 訪問DOM元素

get(index)，取得其中一個匹配的元素。

其中$(this).get(0)與$(this)[0]等價。

例如：取得所有img元素的第 1個位置上的元素。

$("img").get(0);

3. 事件

3.1. 在頁面載入後執行任務

與window.onload的區別，

window.onload指的是所有元素下載完後觸發，$(document).ready()指的是所有元素可以訪問後觸發。
window.onload一次只能保存對一個函數的引用。
可以簡化為$()

3.2. 簡單的事件

可以用bind方法可以指定任何javascript事件，併為該事件添加一種行為。如下示例代碼：

$(function() {

$('#btnAdd').bind('click', function() {

alert('click Add');

});

})

以上代碼也可以簡寫成如下代碼：

$(function() {

$('#btnAdd').click(function() {

alert('click Add');

});

})

3.3. 複合事件

hover(over, out)，一個模仿懸停事件（滑鼠移動到一個對象上面及移出這個對象）的方法。

例如：滑鼠懸停的表格加上特定的類

$("td").hover(

function () {

$(this).addClass("hover");

function () {

$(this).removeClass("hover");

}

);

toggle(fn, fn2, [fn3, fn4, ...])，每次點擊後依次調用函數。

例如：對錶格的切換一個類

$("td").toggle(

function () {

$(this).addClass("selected");

function () {

$(this).removeClass("selected");

}

);

3.4. 事件的旅程

事件捕獲，事件首先交給最外層，接著交給具體的元素。

事件冒泡，事件首先發給最具體的元素，然後向上冒泡給更一般的元素。

3.5. 通過事件對象改變事件的旅程

3.6. 移除事件處理程式

unbind([type], [data]) bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。

如果沒有參數，則刪除所有綁定的事件。

你可以將你用bind()註冊的自定義事件取消綁定。

如果提供了事件類型作為參數，則只刪除該類型的綁定事件。

如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。

例如：將段落的click事件取消綁定

$("p").unbind( "click" )

3.7. 模仿用戶操作

keydown(fn)，在每一個匹配元素的keydown事件中綁定一個處理函數。
keypress(fn)，在每一個匹配元素的keypress事件中綁定一個處理函數。
keyup(fn)，在每一個匹配元素的keyup事件中綁定一個處理函數。

例如：在頁面內對鍵盤按鍵做出回應，可以使用如下代碼:

$(window).keydown(function(event){

switch(event.keyCode) {

// ...

// 不同的按鍵可以做不同的事情

// 不同的瀏覽器的keycode不同

// 更多詳細信息: http://unixpapa.com/js/key.html

// ...

}

});

4. 效果

4.1. 修改內聯CSS

css(name, value)，在所有匹配的元素中，設置一個樣式屬性的值。

例如：將所有段落字體設為紅色

$("p").css("color","red");

4.2. 基本的隱藏和顯示

show()和hide()顯示和隱藏的匹配元素。

例如：顯示所有段落

$("p").show()

4.3. 效果和速度

show(speed, [callback])和hide(speed, [callback]) 以優雅的動畫顯示和隱藏所有匹配的元素

例如：用緩慢的動畫將隱藏的段落顯示出來，歷時600毫秒。

$("p").show("slow")

fadeIn(speed, [callback])和fadeOut(speed, [callback]) 通過不透明度的變化來實現所有匹配元素的淡入和淡出效果

例如：用600毫秒緩慢的將段落淡入

$("p").fadeIn("slow");

4.4. 創建自定義動畫

animate(params, [duration], [easing], [callback]) ，用於創建自定義動畫的函數。

例如：讓指定元素左右移動

$("#right").click(function(){

$(".block").animate({left: '+50px'}, "slow");

});

$("#left").click(function(){

$(".block").animate({left: '-50px'}, "slow");

});

5. DOM操作

5.1. 操作屬性

attr(key, value)，為所有匹配的元素設置一個屬性值。
removeAttr(name)，從每一個匹配的元素中刪除一個屬性。
insertBefore(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。
insertAfter(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的後面。
wrap(html) 把所有匹配的元素用其他元素的結構化標記包裹起來。

5.2. 插入新元素

5.3. 包裝元素

例如：把所有的段落用一個新創建的div包裹起來
$("p").wrap("<div class='wrap'></div>");

5.4. 複製元素

clone()克隆匹配的DOM元素並且選中這些克隆的副本。

例如：克隆所有b元素（並選中這些克隆的副本），然後將它們前置到所有段落中。

$("b").clone().prependTo("p");

jQuery學習筆記1

1. jQuery入門

1.1. 優點

1.2. 缺點

2. 選擇符

2.1. DOM

2.2. 工廠函數$()

2.3. CSS選擇符

2.4. 屬性選擇符

2.5. 自定義選擇符

2.5.1. :odd和:even

2.5.2. 基於表單的選擇符

2.6. DOM遍歷方法

2.6.1. 過濾

2.6.2. 查找

2.6.3. 串聯

2.7. 訪問DOM元素

3. 事件

3.1. 在頁面載入後執行任務

3.2. 簡單的事件

3.3. 複合事件

3.4. 事件的旅程

3.5. 通過事件對象改變事件的旅程

3.6. 移除事件處理程式

3.7. 模仿用戶操作

4. 效果

4.1. 修改內聯CSS

4.2. 基本的隱藏和顯示

4.3. 效果和速度

4.4. 創建自定義動畫

5. DOM操作

5.1. 操作屬性

5.2. 插入新元素

5.3. 包裝元素

5.4. 複製元素