一、jQuery基礎
1、jQuery是什麼?
jQuery是一個js框架，其主要思想是，通過
選擇器查找到對應的節點，然後對這個節點進行
封裝(封裝成一個jQuery對象)。通過調用jQuery
對象的屬性或者方法來實現對節點的操作。這樣做的
好處是：第一，將不同的浏覽器之間的差異屏蔽起來了。
第二，代碼更加簡潔，維護方便。
2、jQuery編程的步驟
step1: 使用選擇器查找節點
step2: 調用jQuery對象的方法或者屬性
選擇器：jQuery模仿css選擇器語法，創建的一套
用於查找節點的規則。
3、jQuery對象與dom節點
1)dom節點如何轉換成jQuery對象
調用$()函數，比如
$(obj);
2)jQuery對象如何轉換成dom節點
方式一: $obj.get(0)
方式二: $obj.get()[0]
3) jQuery與其它js框架如何共存?
使用conflict()函數。
二、選擇器
1、選擇器是什麼?
jQuery模仿css選擇器語法，創建的一套
用於查找節點的規則。
2、基本選擇器
#id
.class
element
selector1,select2..selectn
*
3、層次選擇器
select1 select2
select1>select2
select1+select2
select1~select2
4、過濾選擇器
(1)基本過濾選擇器
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
(2)內容過濾選擇器
:contains(text) 匹配包含給定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有選擇器所匹配的元素
的元素
:parent 匹配含有子元素或者文本的元素
(3)可見性過濾選擇器
:hidden 匹配所有不可見元素，
或者type為hidden的元素
:visible 匹配所有的可見元素
(4)屬性過濾選擇器
[attribute]
[attribute=value]
[attribute!=value]
(5)子元素過濾選擇器
:nth-child(index/even/odd)
(6)表單對象屬性過濾選擇器
:enabled
:disabled
:checked
:selected
5、表單選擇器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
三、dom操作
1、dom查找
通過選擇器找到節點後，可以調用
a, html() : 輸出或者修改節點之間的html內容
b,text()：輸出或者修改節點之間文本
c,val()：輸出或者修改節點的value屬性
2、創建節點:
$(html)
3、添加節點:
append():向每個匹配的元素內部追加內容
prepend():向每個匹配的元素內部前置內容
after():在每個匹配的元素之後插入內容
before():在每個匹配的元素之前插入內容
4、刪除節點
remove()
remove(selector)
empty():清空節點
5、復制節點
clone()
clone(true):使復制的節點也具有行為(將事件
處理代碼一塊復制)
6、屬性操作
讀取：attr('');
設置：
attr('','') 或者一次
設置多個 attr({"":"","":""});
刪除：removeAttr('')
7、樣式操作
獲取和設置: attr("class","")
追加:addClass('')
移除:removeClass('')
或者removeClass('s1 s2')
或者removeClass()//會刪除所有樣式
切換樣式：toggleClass,有該樣式，就刪除，沒有，
就添加。
是否有某個樣式 hasClass('')
讀取css('')
設置css('','')或者
css({'':'','':''})//設置多個樣式
1、遍歷節點
children():只考慮子元素，不考慮其它後代元素。
next()/next(selector)
prev()/prev(selector)
siblings()/siblings(selector)
find(selector)/
parent()
2、事件處理機制
1)事件綁訂的方式
bind(type,fn)
2)、綁訂方式的簡寫形式
click(function(){
});
3)、合成事件
hover(enter,leave) : 模擬光標懸停事件
toggle(fn1,fn2...)：模擬鼠標連續單擊事件
4)、事件冒泡
a、獲得事件對象
//event不再是原始的事件對象，而
//是封裝之後的對象。
click(function(event){
});
b、停止冒泡
event.stopPropagation()
c、停止默認行為
event.preventDefault()
5)、事件對象的屬性
event.type
event.target:返回事件源（是dom對象!!!）
event.pageX/pageY: 點擊的坐標
6)、模擬操作
trigger('click')
3、動畫
1)、show("slow"/"normal"/"fast"/100) hide()
另外，還可以添加一個回調函數，比如:
show('slow',function(){
//這兒的代碼會在動畫執行完成之後
//才執行。
});
2)、fadeIn() fadeOut(): 淡入、淡出
改變不透明度。
fadeIn,fadeOut可以添加
"slow"/"normal"/"fast"/100參數，也可以
添加一個回調函數。
3)、slideUp() slideDown() : 改變元素的高度
用法跟前面一樣。
4)、自定義動畫 animate(params,speed,callback):
params: 是一個形如 {"height":"300px","width","200px"}
speed: 單位是毫秒，表示動畫執行的速度。
callback:回調函數，動畫執行完成之後，執行
該函數。
4、操作類數組的方法：
說明：jquery操作數組的方法，
$()操作返回的如果是一個數組，可以使用如下方法來操作
each(fn(i)):循環遍歷每一個元素,this代表被迭代的dom對象，$(this)代表被迭代的jquery對象。
eq(index)：返回index+1位置處的jquery對象
index(obj)：返回下標，其中obj可以是
dom對象或者jquery對象。
length：個數
get()：返回dom對象組成的數組
get(index)：返回index+1個dom對象。