jQuery教程PPT課件

1、2021/7/231Jquery基礎教程基礎教程 2021/7/232jQuery優(yōu)勢優(yōu)勢 輕量級輕量級 強大的選擇器強大的選擇器 出色的出色的DOM操作的封裝操作的封裝 可靠的事件處理機制可靠的事件處理機制 完善的完善的Ajax 不污染頂級變量不污染頂級變量 出色的瀏覽器兼容性出色的瀏覽器兼容性 鏈式操作方式鏈式操作方式 隱式迭代隱式迭代 行為和結構層分離行為和結構層分離 豐富的插件支持豐富的插件支持 完善的文檔完善的文檔 開源開源2021/7/233jQuery選擇器是其最核心的部分選擇器是其最核心的部分 分為四大類分為四大類 基本選擇器基本選擇器 層次選擇器層次選擇器 過濾選擇器過濾選擇

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

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

4、 選取第一個元素 :last 選取最后一個元素 :not(selector) 去除與跟定選擇器匹配的元素 :even 選取索引值為偶數(shù)的所有的元素 從0開始 :odd 選取索引值為奇數(shù)的所有的元素 從0開始 :eq(index) 選取索引值等于index的所有的元素 從0開始 :gt(index) 選取索引值大于index的所有的元素 從0開始 :lt(index) 選取索引值小于index的所有的元素 從0開始 :header 選取所有的標題元素 例如h1 h2 h3等 :animated 選取所有的正在執(zhí)行動畫的元素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結尾的元素 attribute*=value 選取屬性值含有value的元素 selector1selector2selector3 用屬性選擇器合并成一個復合選擇器2021/7/2311子元素過濾選擇器子元素過濾選擇器 nth-child(index/even/odd/equation) 選取每個父元素下的第index子元素/奇元素/偶元素/比較元素 索引從1開始 first-child 選取每個父元素的第一個子元素 last-child 選取每個父元素的最后一個元素 only-child

7、 如果該元素是其父元素的唯一的子元素 那么該元素就會匹配到 注意與基本過濾選擇器的區(qū)別2021/7/2312表單過濾選擇器表單過濾選擇器 :enabled 選取所有的可見的元素 :disabled 選取所有的不可見的元素 :checked 選取所有的選中的元素(單選框、復選框) :selected 選取所有的被選中的元素(下拉菜單)2021/7/2313表單選擇器表單選擇器 :input 選取所有的、 元素 :text 選取所有的單行文本框 :password 選取所有的密碼框 :radio 選取所有的單選按鈕 :checkbox 選取所有的復選按鈕 :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é)點 例 jQuery(ul li).remove() 也可在remove()中添加過濾條件 jQuery(ul li).remove(lititle!=菠蘿) empty() 清空節(jié)點 jQuery(ul li:eq(1).empty() 清空第二個li元素中的內(nèi)容 clone() 復制節(jié)點 jQuery(#li).clone().appendTo(ul) 如果想在復制節(jié)點的同時也具有行為 可用clone(true) replaceWith() 替換節(jié)點 如jQuery(p).replaceWit

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

11、 jQuery(p).attr(title) 設置屬性: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() 判斷是否含有某個樣式 同is(.className) html() 獲取或者設置html代碼 text() 獲取或者設置文本框的值 val()

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

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

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

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

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

17、jQuery(p).unbind(click,fn1)來 解除fn1的事件處理程序 模擬操作 常用模擬: 不一定要單擊才會觸發(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()方法會執(zhí)行瀏覽器的默認行為 如果不想執(zhí)行瀏覽器的默認行為 可用 jQuery(input).triggerHander(focus) 可以

18、一次綁定多個事件類型 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)的時候 dbclick事件依然會觸發(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后面的感嘆號 ) 當單擊div元素的時候 fn1和fn2事件處理程序都會執(zhí)行 當單擊button元素的時候， 只會觸發(fā)fn1的事件處理程序jQuery中的動畫中的動畫 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ù)時候與show()方法相似 fadeIn() 增加不透明度 fadeOut() 降低不透明度 slideUp() 從下向上隱藏元素 可以帶參數(shù) slideDown() 從上到下顯示元素 可以帶參數(shù) 自定義動畫方法 animate() jQuery(p).animate(left:500px,3000) 使得元素在3秒內(nèi)向右移動500個像素 jQuery(p).animate(left:+=500px,3000) 在當前位置累加500個像素 jQuery(p).animate(left:-=500px,3000) 在當前位置累減500個像素 2021/7/

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

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

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

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

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

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

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