5.16日音訊,jQuery須掌握的幾個要點。jQuery是免費、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計可以使開發(fā)者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。
一、jQuery基礎(chǔ)
1、jQuery是什么?
jQuery是一個js框架，其主要思想是，通過
選擇器查找到對應(yīng)的節(jié)點，然后對這個節(jié)點進行
封裝(封裝成一個jQuery對象)。通過調(diào)用jQuery
對象的屬性或者方法來實現(xiàn)對節(jié)點的操作。這樣做的
好處是：第一，將不同的瀏覽器之間的差異屏蔽起來了。
第二，代碼更加簡潔，維護方便。
2、jQuery編程的步驟
step1:使用選擇器查找節(jié)點
step2:調(diào)用jQuery對象的方法或者屬性
選擇器：jQuery模仿css選擇器語法，創(chuàng)建的一套
用于查找節(jié)點的規(guī)則。
3、jQuery對象與dom節(jié)點
1)dom節(jié)點如何轉(zhuǎn)換成jQuery對象
調(diào)用$()函數(shù)，比如
$(obj);
2)jQuery對象如何轉(zhuǎn)換成dom節(jié)點
方式一:$obj.get(0)
方式二:$obj.get()[0]
3)jQuery與其它js框架如何共存?
使用conflict()函數(shù)。
二、選擇器
1、選擇器是什么?
jQuery模仿css選擇器語法，創(chuàng)建的一套
用于查找節(jié)點的規(guī)則。
2、基本選擇器
#id
.class
element
selector1,select2..selectn
*
3、層次選擇器
select1select2
select1>select2
select1+select2
select1~select2
4、過濾選擇器
(1)基本過濾選擇器
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
(2)內(nèi)容過濾選擇器
: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查找
通過選擇器找到節(jié)點后，可以調(diào)用
a,html():輸出或者修改節(jié)點之間的html內(nèi)容
b,text()：輸出或者修改節(jié)點之間文本
c,val()：輸出或者修改節(jié)點的value屬性
2、創(chuàng)建節(jié)點:
$(html)
3、添加節(jié)點:
append():向每個匹配的元素內(nèi)部追加內(nèi)容
prepend():向每個匹配的元素內(nèi)部前置內(nèi)容
after():在每個匹配的元素之后插入內(nèi)容
before():在每個匹配的元素之前插入內(nèi)容
4、刪除節(jié)點
remove()
remove(selector)
empty():清空節(jié)點
5、復(fù)制節(jié)點
clone()
clone(true):使復(fù)制的節(jié)點也具有行為(將事件
處理代碼一塊復(fù)制)
6、屬性操作
讀取：attr('');
設(shè)置：
attr('','')或者一次
設(shè)置多個attr({"":"","":""});
刪除：removeAttr('')
7、樣式操作
獲取和設(shè)置:attr("class","")
追加:addClass('')
移除:removeClass('')
或者removeClass('s1s2')
或者removeClass()//會刪除所有樣式
切換樣式：toggleClass,有該樣式，就刪除，沒有，
就添加。
是否有某個樣式hasClass('')
讀取css('')
設(shè)置css('','')或者
css({'':'','':''})//設(shè)置多個樣式
1、遍歷節(jié)點
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...)：模擬鼠標連續(xù)單擊事件
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()
另外，還可以添加一個回調(diào)函數(shù)，比如:
show('slow',function(){
//這兒的代碼會在動畫執(zhí)行完成之后
//才執(zhí)行。
});
2)、fadeIn()fadeOut():淡入、淡出
改變不透明度。
fadeIn,fadeOut可以添加
"slow"/"normal"/"fast"/100參數(shù)，也可以
添加一個回調(diào)函數(shù)。
3)、slideUp()slideDown():改變元素的高度
用法跟前面一樣。
4)、自定義動畫animate(params,speed,callback):
params:是一個形如{"height":"300px","width","200px"}
speed:單位是毫秒，表示動畫執(zhí)行的速度。
callback:回調(diào)函數(shù)，動畫執(zhí)行完成之后，執(zhí)行
該函數(shù)。
4、操作類數(shù)組的方法：
說明：jquery操作數(shù)組的方法，
$()操作返回的如果是一個數(shù)組，可以使用如下方法來操作
each(fn(i)):循環(huán)遍歷每一個元素,this代表被迭代的dom對象，$(this)代表被迭代的jquery對象。
eq(index)：返回index+1位置處的jquery對象
index(obj)：返回下標，其中obj可以是
dom對象或者jquery對象。
length：個數(shù)
get()：返回dom對象組成的數(shù)組
get(index)：返回index+1個dom對象。
