精通JavascriptJQuery-第10章課件

1、精通JavaScript+jQuery第10章：jQuery基礎(chǔ)jQuery概述jQuery的“$”jQuery與CSS3使用選擇器管理選擇結(jié)果采用jQuery鏈精通JavascriptJQuery-第10章JQUERYJQUERY概述概述 JQUERY簡介簡介 jQuery由美國人John Resig于2006年初創(chuàng)建，至今已吸引了來自世界各地的眾多javascript高手加入其team，包括來自德國的Jörn Zaeffere ，羅馬尼亞的Stefan Petre等等。jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents

2、、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。 jQuery能夠使用戶的html頁保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。精通JavascriptJQuery-第10章能能做什么做什么程序員：簡化javascript和ajax編程，能夠使程序員從設(shè)計和書寫繁雜的JS應(yīng)用中解脫出來，將關(guān)注點轉(zhuǎn)向功能需求而非實現(xiàn)細(xì)節(jié)上，從而提高項目的開發(fā)速度。用戶：改善了頁面視覺效果，增強(qiáng)了與頁面的交互性，體驗更絢麗的網(wǎng)頁物資。精通JavascriptJQuery-第10章主流主流的的JavaScript框架框架YUIDojomooT

3、oolsPrototypejQueryMore.性能測試：http:/ 鏈?zhǔn)秸Z法 ：$(p.surprise).addClass(ohmy).show(slow);CSS 1-3 選擇器：支持CSS選擇器選定DOM對象 跨瀏覽器：支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ 簡單：較其它JS庫更容易入門，中、英文檔很齊全 易擴(kuò)展： JQUERY UI 、 JQUERY FX 已經(jīng)有很完善的基于JQUERY的用戶界面庫 和網(wǎng)頁特效庫 精通JavascriptJQuery-第10章jQuery下載下載當(dāng)前版本1.7.2官方網(wǎng)站下載：h

4、ttp:/ jQuery安裝安裝在頁面頭部head中，添加js2.3 MyEclipse中中可以實現(xiàn)可以實現(xiàn)jQuery的智能提示的智能提示精通JavascriptJQuery-第10章jQueryjQuery的的“$ $”選擇器 $(“h2 a”);功能函數(shù)前綴 $.trim(sString);解決window.onload函數(shù)的沖突創(chuàng)建DOM元素自定義添加“$”解決“$”的沖突 $(“div p”); jQuery(“div p”);精通JavascriptJQuery-第10章jQueryjQuery與與CSS3CSS3CSS3標(biāo)準(zhǔn)瀏覽器的兼容性jQuery的引入 提供了CSS3標(biāo)準(zhǔn)下的

5、選擇器 兼容性好精通JavascriptJQuery-第10章使用選擇器使用選擇器屬性選擇器 $(“ahref=10-9.html”).addClass(“myClass”);包含選擇器 $(“l(fā)i:has(a)”)位置選擇器 $(“p:first-child”)過濾選擇器 $(“inputname=cbx:checked”)實現(xiàn)反向過濾 $(“input:not(:radio)”)精通JavascriptJQuery-第10章管理選擇結(jié)果管理選擇結(jié)果獲取元素的個數(shù) $(“img”).size()提取元素 $(“imgtitle”)1 $(“imgtitle”).get(1)添加、刪除、過濾元

6、素 $(“imgalt”).add(“imgtitle”) 將設(shè)置了alt屬性和title屬性的img組合成新數(shù)組 $(“imgtitle”).not(“title*=isaac”) $(“img”).filter(“title*=isaac”) $(“img title*=isaac”) 查詢過濾新元素集合 $(“p”).find(“span”)$(“span”,$(“p”)精通JavascriptJQuery-第10章采用采用jQueryjQuery鏈鏈jQuery的語句可以鏈接在一起 縮短代碼的長度 實現(xiàn)特殊的效果$(“div”).addClass(“myClass1”).filter(function(index)return index=1 | $