jQuery教程PPT課件

1、2021/7/231Jquery基礎(chǔ)教程基礎(chǔ)教程 2021/7/232jQuery優(yōu)勢(shì)優(yōu)勢(shì) 輕量級(jí)輕量級(jí) 強(qiáng)大的選擇器強(qiáng)大的選擇器 出色的出色的DOM操作的封裝操作的封裝 可靠的事件處理機(jī)制可靠的事件處理機(jī)制 完善的完善的Ajax 不污染頂級(jí)變量不污染頂級(jí)變量 出色的瀏覽器兼容性出色的瀏覽器兼容性 鏈?zhǔn)讲僮鞣绞芥準(zhǔn)讲僮鞣绞?隱式迭代隱式迭代 行為和結(jié)構(gòu)層分離行為和結(jié)構(gòu)層分離 豐富的插件支持豐富的插件支持 完善的文檔完善的文檔 開源開源2021/7/233jQuery選擇器是其最核心的部分選擇器是其最核心的部分 分為四大類分為四大類 基本選擇器基本選擇器 層次選擇器層次選擇器 過濾選擇器過濾選擇

2、器 表單選擇器表單選擇器2021/7/234基本選擇器是最常用的選擇器基本選擇器是最常用的選擇器 可以根據(jù)標(biāo)簽的名字、可以根據(jù)標(biāo)簽的名字、ID名字或者名字或者class名字來選擇元素名字來選擇元素#id 根據(jù)指定的id來匹配元素.class 根據(jù)制定的類名字來匹配元素element 根據(jù)指定的元素的名字匹配元素* 匹配所有的元素selector1,selector2,selectorN 將每一個(gè)匹配到的元素合并到一起返回2021/7/235層次選擇器層次選擇器 jQuery(ancestor descendant):選取ancestor中的所有的descendant(后代)元素 jQuery(

3、parentchild):選取parent中的所有的child(子元素) jQuery(prev+next):選取緊跟在prev后的同級(jí)別的next元素 可用next()方法代替 jQuery(prevsiblings):選取緊跟在prev后的同級(jí)別的所有的 元素 可用nextAll()方法代替 2021/7/236過濾選擇器分為：過濾選擇器分為： 基本過濾選擇器基本過濾選擇器 內(nèi)容過濾選擇器內(nèi)容過濾選擇器 可見性過濾選擇器可見性過濾選擇器 子元素過濾選擇器子元素過濾選擇器 屬性過濾選擇器屬性過濾選擇器 表單過濾選擇器表單過濾選擇器2021/7/237基本過濾選擇器基本過濾選擇器 :first

4、 選取第一個(gè)元素 :last 選取最后一個(gè)元素 :not(selector) 去除與跟定選擇器匹配的元素 :even 選取索引值為偶數(shù)的所有的元素 從0開始 :odd 選取索引值為奇數(shù)的所有的元素 從0開始 :eq(index) 選取索引值等于index的所有的元素 從0開始 :gt(index) 選取索引值大于index的所有的元素 從0開始 :lt(index) 選取索引值小于index的所有的元素 從0開始 :header 選取所有的標(biāo)題元素 例如h1 h2 h3等 :animated 選取所有的正在執(zhí)行動(dòng)畫的元素2021/7/238內(nèi)容過濾選擇器內(nèi)容過濾選擇器 :contains(te

5、xt) 選取含有文本內(nèi)容為text的元素 :empty 選取不包含子元素的空元素 :has(selector) 選取含有選擇器所匹配的元素的元素 :parent 選取含有子元素的元素2021/7/239可見性過濾選擇器可見性過濾選擇器 :hidden 選取所有的不可見的元素 :visible 選取所有的可見的元素2021/7/2310屬性過濾選擇器屬性過濾選擇器 attribute 選取擁有此屬性的元素 attribute=value 選取屬性值為value的元素 attribute!=value 選取屬性值不等于value的元素 也包括不含屬性名為attribute的元素 attribute

6、=value 選取屬性值以value開頭的元素 attribute$=value 選取屬性值以value結(jié)尾的元素 attribute*=value 選取屬性值含有value的元素 selector1selector2selector3 用屬性選擇器合并成一個(gè)復(fù)合選擇器2021/7/2311子元素過濾選擇器子元素過濾選擇器 nth-child(index/even/odd/equation) 選取每個(gè)父元素下的第index子元素/奇元素/偶元素/比較元素 索引從1開始 first-child 選取每個(gè)父元素的第一個(gè)子元素 last-child 選取每個(gè)父元素的最后一個(gè)元素 only-child

7、 如果該元素是其父元素的唯一的子元素 那么該元素就會(huì)匹配到 注意與基本過濾選擇器的區(qū)別2021/7/2312表單過濾選擇器表單過濾選擇器 :enabled 選取所有的可見的元素 :disabled 選取所有的不可見的元素 :checked 選取所有的選中的元素(單選框、復(fù)選框) :selected 選取所有的被選中的元素(下拉菜單)2021/7/2313表單選擇器表單選擇器 :input 選取所有的、 元素 :text 選取所有的單行文本框 :password 選取所有的密碼框 :radio 選取所有的單選按鈕 :checkbox 選取所有的復(fù)選按鈕 :submit 選取所有的提交按鈕 :im

8、age 選取所有的圖像按鈕 :reset 選取所有的重置按鈕 :button 選取所有的button :file 選取所有的上傳域 :hidden 選取所有的不可見元素 (包括display為none的)2021/7/2314jQuery中中DOM操作操作 append() 向匹配的元素追加內(nèi)容 appendTo() 顛倒append()操作 prepend() 向匹配的元素前置內(nèi)容 preprendTo() 顛倒prepend()操作 after() 在匹配的元素后插入內(nèi)容 insertAfter() 顛倒after()操作 before() 在匹配的元素前插入內(nèi)容 insertBefore

9、() 顛倒before()操作2021/7/2315元素操作：元素操作： remove() 刪除節(jié)點(diǎn) 例 jQuery(ul li).remove() 也可在remove()中添加過濾條件 jQuery(ul li).remove(lititle!=菠蘿) empty() 清空節(jié)點(diǎn) jQuery(ul li:eq(1).empty() 清空第二個(gè)li元素中的內(nèi)容 clone() 復(fù)制節(jié)點(diǎn) jQuery(#li).clone().appendTo(ul) 如果想在復(fù)制節(jié)點(diǎn)的同時(shí)也具有行為 可用clone(true) replaceWith() 替換節(jié)點(diǎn) 如jQuery(p).replaceWit

10、h(你最不喜歡的水果是?) replaceAll() 顛倒replaceWith()操作 如jQuery(你最不喜歡的水果是？).replaceAll(p);2021/7/2316 wrapAll() 將所有的匹配的元素用一個(gè)元素來包裹 如jQuery(strong).wrapAll() 會(huì)得到 你最喜歡的水果1 你最喜歡的水果2 wrap() 將每個(gè)匹配的元素用一個(gè)元素包裹起來 如jQuery(strong).wrap() 會(huì)得到 你最喜歡的水果1 你最喜歡的水果2 wrapInner() 將每個(gè)匹配的子元素用另外一個(gè)元素包裹起來2021/7/2317屬性操作屬性操作 獲取和設(shè)置屬性 獲取:

11、 jQuery(p).attr(title) 設(shè)置屬性:jQuery(p).attr(title,your title); 刪除屬性 jQuery(p).removeAttr(title) 樣式操作 jQuery(p).attr(class,classname); 追加樣式 jQuery(p).addClass() 移除樣式 jQuery(p).removeClass()2021/7/2318 toggleClass() 切換樣式 hasClass() 判斷是否含有某個(gè)樣式 同is(.className) html() 獲取或者設(shè)置html代碼 text() 獲取或者設(shè)置文本框的值 val()

12、 獲取或者設(shè)置表單元素的值 children() 獲取匹配元素的子元素 next() 獲取匹配元素后緊鄰的同輩的元素 prev() 獲取匹配元素前緊鄰的同輩的元素 nextAll() 獲取匹配元素后的所有的同輩的元素 siblings() 獲取匹配元素前臺(tái)所有的同輩的元素 closest() 獲取匹配元素最近的元素 find() 查找匹配元素的所有的后代元素 css() 設(shè)置獲取獲取css樣式 可以傳輸json格式的參數(shù) 批量的設(shè)置多個(gè)樣式 height() 設(shè)置或者獲取元素的高度 注意和css(height)的區(qū)別 width() 設(shè)置或者獲取元素的寬度 注意和css(width)的區(qū)別 2

13、021/7/2319 offset() 獲取元素在當(dāng)前視窗的相對(duì)偏移 返回的是個(gè)對(duì)象 包括top和left兩個(gè)屬性 position() 獲取元素相對(duì)于最近的一個(gè)position樣式屬性設(shè)置為relative和absolute的祖父節(jié)點(diǎn)的相對(duì)的偏移 返回的也是個(gè)對(duì)象 包括top和left兩個(gè)屬性 scrollTop() 獲取元素的滾動(dòng)條距頂端的距離 scrollLeft () 獲取元素的滾動(dòng)條距左邊的距離jQuery中的事件中的事件 注意jQuery(document).ready()和window.onload的區(qū)別 事件綁定 bind(type,data,fn) 第一個(gè)為事件類型 包括bl

14、ur,focus,load,resize,scroll, unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout, mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，也 可以是自定義事件名稱 第二個(gè)為可選的參數(shù) 第三個(gè)為綁定的處理函數(shù)2021/7/2320 簡(jiǎn)寫綁定操作 jQuery(p).click(fn),jQuery(mouseover).click(fn) 合成事件 主要有兩個(gè) jQuery(p).toggle(

15、fn1,fn2) 單擊的時(shí)候分別執(zhí)行fn1和fn2兩個(gè)函數(shù) hover(fn1,fn2) 鼠標(biāo)移上去和移走的時(shí)候分別執(zhí)行fn1和fn2兩個(gè)函數(shù) 事件冒泡 如果想阻止冒泡的話可以用event.stopPropagation() 阻止事件的默認(rèn)行為 可以采用event.preventDefault() 如果上面兩個(gè)都想阻止 可以直接在fn中return false 事件對(duì)象的屬性 event.type:獲取事件的類型 如click dbclick event.preventDefault():阻止事件的默認(rèn)行為 event.stopPropagation():阻止事件的冒泡 event.targe

16、t() 獲取觸發(fā)事件的元素 event.relatedTarget() 獲取相關(guān)元素2021/7/2321 event.pageX() 獲取光標(biāo)相對(duì)于頁面的x坐標(biāo) event.pageY() 獲取光標(biāo)相對(duì)于頁面的y坐標(biāo) event.which() 在鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左 中 右鍵 event.metaKey() 鍵盤事件中獲取ctrl鍵 event.originalEvent() 指向原始的事件對(duì)象 移除事件 移除某個(gè)元素的單擊事件 jQuery(p).unbind(click) 移除某個(gè)元素的所有的事件 jQuery(p).unbind() 假如某個(gè)元素的單擊事件綁定了多個(gè)函數(shù) 可用

17、jQuery(p).unbind(click,fn1)來 解除fn1的事件處理程序 模擬操作 常用模擬: 不一定要單擊才會(huì)觸發(fā) 可以用trigger()方法模擬操作 jQuery(#btn).trigger(click)2021/7/2322 觸發(fā)自定義事件 jQuery(#btn).bind(myClick,fn1) 可以通過jQuery(#btn).trigger (myClick)觸發(fā) 傳遞數(shù)據(jù) trigger(type,data) trigger()方法會(huì)執(zhí)行瀏覽器的默認(rèn)行為 如果不想執(zhí)行瀏覽器的默認(rèn)行為 可用 jQuery(input).triggerHander(focus) 可以

18、一次綁定多個(gè)事件類型 jQuery(div).bind(mouseover mouseout,fn1) 添加事件的命名空間 便于管理 jQuery(div).bind(click.plugin,fn1) jQuery(div).bind(mouseover.plugin,fn2) jQuery(div).bind(dbclick,fn3) 在執(zhí)行jQuery(div).unbind(.plugin)的時(shí)候 dbclick事件依然會(huì)觸發(fā) 相同事件名稱 不同命名空間的執(zhí)行方法2021/7/2323 jQuery(div).bind(click,fn1) jQuery(div).bind(click

19、.plugin,fn2) jQuery(#btn).click ( function() jQuery(div).trigger(click!); /注意click后面的感嘆號(hào) ) 當(dāng)單擊div元素的時(shí)候 fn1和fn2事件處理程序都會(huì)執(zhí)行 當(dāng)單擊button元素的時(shí)候， 只會(huì)觸發(fā)fn1的事件處理程序jQuery中的動(dòng)畫中的動(dòng)畫 2021/7/2324 show() 顯示元素 hide() 隱藏元素 show(slow) 讓元素在600毫秒內(nèi)顯示出來 show(fast) 讓元素在200毫秒內(nèi)顯示出來 show(normal) 讓元素在400毫秒內(nèi)顯示出來 show(1000) 讓元素在100

20、0毫秒內(nèi)顯示出來 hide()方法帶參數(shù)時(shí)候與show()方法相似 fadeIn() 增加不透明度 fadeOut() 降低不透明度 slideUp() 從下向上隱藏元素 可以帶參數(shù) slideDown() 從上到下顯示元素 可以帶參數(shù) 自定義動(dòng)畫方法 animate() jQuery(p).animate(left:500px,3000) 使得元素在3秒內(nèi)向右移動(dòng)500個(gè)像素 jQuery(p).animate(left:+=500px,3000) 在當(dāng)前位置累加500個(gè)像素 jQuery(p).animate(left:-=500px,3000) 在當(dāng)前位置累減500個(gè)像素 2021/7/

21、2325 多重動(dòng)畫 同時(shí)執(zhí)行多個(gè)動(dòng)畫:jQuery(p).animate(left:500px,height:200px,3000) 按順序執(zhí)行動(dòng)畫: jQuery(p).animate(left:500px,3000).animate(height:200px,3000) fadeTo(3000,0.2) 在3秒內(nèi)將元素的不透明度變?yōu)?.2 動(dòng)畫的回調(diào)函數(shù) jQuery(p).animate(top:200px,width:200px,200,fn) 執(zhí)行完動(dòng)畫后執(zhí)行fn 停止動(dòng)畫 stop(false,false) is(:animated) 判斷某元素是否處于動(dòng)畫狀態(tài) toggle()

22、用來代替show和hide方法 會(huì)改變高度 寬度和不透明度 slideToggle() 用來代替slideUp()和slideDown() 只改變高度2021/7/2326jQuery與與Ajax應(yīng)用應(yīng)用 分三層jQuery.ajax()是第一層,jQuery(param).load() /jQuery.get()/jQuery.post()是第 二層, jQuery.getScript()/jQuery.getJSON()是第三層 load()方法 1.載入html文檔 load(url,data,callback url :請(qǐng)求地址 data:發(fā)送至服務(wù)器端的key/value值 call

23、back:回調(diào)函數(shù) 無論成功還是失敗都會(huì)調(diào)用回調(diào)函數(shù) 2.篩選載入的HTML文檔 jQuery(#resText).load(test.html .param) 3.傳遞方式 根據(jù)data自動(dòng)指定 如果沒有參數(shù)傳遞 采用get方式傳遞 反之 則自動(dòng)轉(zhuǎn)化為post 方式2021/7/2327 4.回調(diào)函數(shù) function(responseText,txtStatus,XMLHttpRequest) responseText :請(qǐng)求返回的內(nèi)容 textStatus:請(qǐng)求狀態(tài) success/error/notmodified/timeout四種 XMLHttpRequest:XMLHttpReq

24、uest對(duì)象 jQuery.get() 全局函數(shù) jQuery.get(url,data,callback,type) url:請(qǐng)求的地址 data:發(fā)送至服務(wù)器端的key/value數(shù)據(jù)會(huì)作為QueryString附加到請(qǐng)求的URL中 callback:載入成功時(shí)的回調(diào)函數(shù) type:服務(wù)器返回內(nèi)容的格式 xml/html/json/script/text/_default2021/7/2328 callback形式如下 function(data,textStatus) /data:返回的內(nèi)容 可以是XML JSON或者h(yuǎn)tml片段等 /textStatus:請(qǐng)求狀態(tài) success/er

25、ror/notmodified/timeout 數(shù)據(jù)格式: html片段: 實(shí)現(xiàn)起來只需要很少的工作量,但是這種固定的數(shù)據(jù)結(jié)構(gòu)并不一定能夠在其它的 web程序中得到重用 XML文檔: 該數(shù)據(jù)可以利用強(qiáng)大的jQuery選擇器的功能，這種數(shù)據(jù)的可移植性是其它的數(shù)據(jù) 格式所無法比擬的,因此以這種格式提供的數(shù)據(jù)的重用性大大的提高,不過xml體 積相對(duì)龐大,解析和操作他們的速度要慢一些2021/7/2329 JSON格式 在不遠(yuǎn)的將來 新版的JavaScript中的XML將會(huì)和JSON一樣容易解析,不過在它到來 之前,json依然有著很強(qiáng)的生命力 json的格式非常的嚴(yán)格,構(gòu)建的json文件必須是完整無

26、誤的,任何的一個(gè)不匹配或者 缺少逗號(hào),都會(huì)導(dǎo)致頁面腳本的終止運(yùn)行,甚至還會(huì)帶來更加嚴(yán)重的負(fù)面影響 post()方法 它與get()方法的結(jié)構(gòu)和使用方式都相同,不過重大區(qū)別如下 1.GET請(qǐng)求會(huì)將參數(shù)跟在URL后面進(jìn)行傳遞,而POST請(qǐng)求則是作為HTTP消息的實(shí)體 內(nèi)容發(fā)送給web服務(wù)器,當(dāng)然 在ajax請(qǐng)求中 這種區(qū)別對(duì)用戶來說是不可見的 2.GET請(qǐng)求對(duì)傳輸?shù)臄?shù)據(jù)大小有限制(通常不能大于2K),而使用POST方式傳輸?shù)臄?shù) 據(jù)量比GET方式大的多(理論上不受限制) 3.GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來,因此其它人便可以從瀏覽器的歷史記 錄中讀取到這些數(shù)據(jù),例如帳號(hào)和密碼等等,在某些情況下

27、GET方式會(huì)帶來嚴(yán)重 的安全性問題,而POST方式相對(duì)來說就可以避免這些問題 2021/7/2330 getScript()方法 動(dòng)態(tài)加載script文件 可以用回調(diào)函數(shù) getJSON() 動(dòng)態(tài)加載JSON文件,處理JSON文件的時(shí)候可以利用each函數(shù) jQuery.each()不同于jQuery對(duì)象的each() 它是一個(gè)全局函數(shù),不操作jQuery對(duì)象 而是以一個(gè)數(shù)組或者對(duì)象作為第一個(gè)參數(shù),以一個(gè)回調(diào)函數(shù)作為第二個(gè)參數(shù), 回調(diào)函數(shù)中有兩個(gè)參數(shù) 第一個(gè)為索引 第二個(gè)為對(duì)應(yīng)的變量或者內(nèi)容 ajax() 只有一個(gè)參數(shù) 以key/value的形式存在 url:發(fā)送請(qǐng)求的地址 type:請(qǐng)求方式 POST或者GET 默認(rèn)為GET 注意其它的HTTP請(qǐng)求方法 timeout:設(shè)置請(qǐng)求的超時(shí)時(shí)間