1、北京傳智播客教育 JQuery編程講師：牛亮亮課前說明內(nèi)容：掌握JQuery編程思想，使用JQuery進行常見網(wǎng)頁效果開發(fā)。目標：能夠使用JQuery開發(fā)常見網(wǎng)頁效果。參考書：鋒利的JQueryJQuery簡介普通JavaScript的缺點：每種控件的操作方式不統(tǒng)一，不同瀏覽器下有區(qū)別，要編寫跨瀏覽器的程序非常麻煩。因此出現(xiàn)了很多對JavaScript的封裝庫，比如Prototype、Dojo、ExtJS、JQuery等，這些庫對JavaScript進行了封裝，簡化了開發(fā)。這些庫是對JavaScript的封裝，也就是咱們調(diào)用JQuery的一句函數(shù)，JQuery內(nèi)部這句函數(shù)幫我們調(diào)用JavaSc

2、ript中的代碼幾十句，因為JQuery就是JavaScript語法寫的一些函數(shù)類，內(nèi)部仍然是調(diào)用JavaScript實現(xiàn)的，所以并不是代替JavaScript的。Jquery是最火的JavaScript庫，已經(jīng)被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit和JQuery結合也是最方便，JQuery的擴展插件也是非常多。JQuery簡介JQuery能做什么。JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。JQuery的優(yōu)點：尺寸小、使用簡單方便（Write Less, Do More，吃得少干得多。鏈式編程（$(“#div1”).draggbl

3、e().show().hide().fly()）、隱式迭代（自動對于多個元素進行迭代方法調(diào)用）、屏蔽瀏覽器差異跨瀏覽器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件豐富、開源、免費。 VS中JavaScript、JQuery的自動完成功能：在VS2010中直接有，VS2008需要安裝VisualStudio 和VS90SP1-KB958502-x86補丁會更強更好用, 簡單的JQuery$(document).ready(function() alert(加載完畢！); );/注冊事件的函數(shù)，和普通的dom不一樣，不需要在元素上

4、標記on*這樣的事件。當頁面Dom元素加載完畢時執(zhí)行代碼，可以簡寫為： $(function() alert(加載完畢！); );和onload類似，但是onload只能注冊一次(window.onload=function.) ,后注冊的取代先注冊的，而ready則可以多次注冊都會被執(zhí)行。JQuery的ready和Dom 的onload的區(qū)別(*)：onload是所有Dom元素創(chuàng)建完畢、圖片、Css等都加載完畢后才被觸發(fā)，而ready則是Dom元素創(chuàng)建完畢后就被觸發(fā)，這樣可以提高網(wǎng)頁的響應速度。在jQuery中也可以用$(window).load()來實現(xiàn)onload那種事件調(diào)用的時機。jQ

5、uery對象（包裝集）、Dom對象DOM對象的JavaScript方法Var obj=document.getElementById(“ID”);Var objhtml=obj.innerHTML;jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象$(“#ID”).html();jQuery對象不能使用DOM對象的方法，DOM對象也不能使用jQuery對象的方法var $cr = $(“#cr); var cr = $cr0; / var cr = $cr.get(0);var cr = document.getElementById(cr); var $cr = $(cr);Arr

6、ay是JS語言本身的對象，不是Dom對象，因此不需要轉(zhuǎn)換為Jquery對象才能用JQuery提供的函數(shù)$.map(array,fn)對數(shù)組array中每個元素調(diào)用fn函數(shù)逐個進行處理，fn函數(shù)將處理返回，最后得到一個新數(shù)組。猜猜內(nèi)部實現(xiàn)。例子，得到一個元素值是原數(shù)組值二倍的新數(shù)組var arr = 3, 5, 9;var arr2 = $.map(arr, function(item) return item * 2; );/聯(lián)想C#委托的例子。函數(shù)式編程。$.map不能處理Dictionary風格的數(shù)組。 $.each(array,fn)對數(shù)組arry每個元素調(diào)用fn函數(shù)進行處理，沒有返回值

7、。猜猜內(nèi)部實現(xiàn)。var arr = tom: 湯姆, jerry: 杰瑞, lily: 莉莉 ;$.each(arr, function(key, value) alert(key+=+value); );如果是普通風格的數(shù)組，則key的值是序號。還可以省略function的參數(shù)，這時候用this可以得到遍歷的當前元素：var arr = 3, 6, 9;$.each(arr, function() alert(this); );/能讀懂。普通數(shù)組推薦用無參，用dict風格的就用key、value。$.函數(shù)名 可以視為靜態(tài)函數(shù)JQuery選擇器JQuery選擇器用于查找滿足條件的元素，比如可以

8、用$(“#控件Id”)來根據(jù)控件id獲得控件的jQuery對象，相當于getElementById：1、id 選擇器 $(“#div1”).html(“hello”)。語法、意義類似于CSS選擇器2、標簽選擇器 $(TagName)來獲取所有指定標簽名的jQuery對象，相 當于getElementsByTagName： $(function() $(#btnClick).click(function() $(p).html(我們都是P); ); );3、類選擇器JQuery中注冊事件監(jiān)聽的寫法：click()、leave()、focus()、blur.，自己動手寫click函數(shù)。規(guī)則： $(

9、who).when(what); 例： $(#a).click(function();JQuery選擇器復合選擇器：$(p,div,span.menuitem)，同時選擇p標簽、div標簽和擁有menuitem樣式的span標簽元素（類似于CSS選擇器）層次選擇器：（1）$(div p)獲取div下的所有p元素（后代，子、子的子）（2）$(div p)獲取div下的直接p子元素（3）$(.menuitem + div)獲取樣式名為menuitem之后的第一個div元素（不常用）（4）$(.menuitem div)獲取樣式名為menuitem之后所有的div元素（不常用） jQuery修改樣式

10、：$(#div1).css(background, red);獲得樣式$(“#div1”).css(“background”)；修改value：$(“#un”).val(“abc”)，獲得value：$(“#un”).val()類似的獲得、設置innerText、innerHTML用text()和html()。val、html、text等是方法，不是屬性，jQuery中很少有屬性的用法，因為屬性寫法很難“鏈式編程”。JQuery的迭代如何判斷對象是否存在，jQuery選擇器返回的是一個對象數(shù)組(數(shù)組中的每個對象還是Dom對象)，調(diào)用text()、html()、click()之類方法的時候其實是

11、對數(shù)組中每個元素迭代調(diào)用每個方法，因此即使通過id選擇的元素不存在也不會報錯，如果需要判斷指定的id是否存在，應該寫：if ($(#btn1).length = 0) alert(id為btn1的元素不存在！); JQuery的Dom操作1、使用html()方法讀取或者設置元素的innerHTML：alert($(#btn1).html();$(#btn1).html(hello);2、使用text()方法讀取或者設置元素的innerText：alert($(#btn1).text();$(#btn1).text(hello);3、使用attr()方法讀取或者設置元素的屬性，對于JQuery沒

12、有封裝的屬性（所有瀏覽器沒有差異的屬性）用attr進行操作。 alert($(“#btn1).attr(href); $(#btn1).attr(href, ); 4、使用removeAttr刪除屬性。刪除的屬性在源代碼中看不到，這是和清空屬性的區(qū)別?！安榭丛次募敝荒芸捶掌魃舷螺d下來的那份。案例：圖片瀏覽器節(jié)點遍歷next()方法用于獲取節(jié)點之后的挨著的第一個同輩元素，$(.menuitem).next(div)、nextAll()方法用于獲取節(jié)點之后的所有同輩元素，$(.menuitem).nextAll(div)prev、prevAll兄弟中之前的元素。siblings()方法用于獲取

13、所有同輩元素，$(.menuitem).siblings(li)。siblings、next等所有能傳遞選擇器的地方能夠使用的語法都和$()語法一樣。end()將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。andSelf()加入先前所選的加入當前元素中案例：橫向菜單，選中的項高亮顯示 $(this).css();$(this).siblings().css()案例：評分控件。prevAll,this,nextAll鏈式編程高亮選中項：給所有有menuitem這個樣式的元素添加click監(jiān)聽事件，當click的時候，向被點擊的元素添加highlight這個樣式，然后從其兄弟節(jié)點（siblings）中移除hi

14、ghlight風格?！?”的時候是針對的上一步的返回值的節(jié)點集合的操作。鏈式編程就是對象一棒棒向下傳，能不能正確傳下來要看返回值，prevAll().nextAll()也傳錯。自己動手寫練習：設置li的光棒效果 1 2 3 4 簡單選擇器 :first 選取第一個元素。$(div:first)選取第一個$(.warn:first);:last 選取最后一個元素。$(div:last)選取最后一個:not(選擇器) 選取不滿足“選擇器”條件的元素，$(input:not(.myClass)選取樣式名不是myClass的:even、:odd，選取索引是奇數(shù)、偶數(shù)的元素：$(input:even)選

15、取索引是奇數(shù)的:eq(索引序號)、:gt(索引序號)、:lt(索引序號) 選取索引等于、大于、小于索引序號的元素，比如$(input:lt(5)選取索引小于5的$(:header)選取所有的h1h6元素（*）$(div:animated)選取正在執(zhí)行動畫的元素。 （*）案例第一行是表頭，所以顯示大字體（fontSize=30），最后一行是匯總，所以顯示紅色字體。正文的前三行是前三名，所以顯示大的字體（28）表格的奇數(shù)行是黃色背景。用Dom實現(xiàn)；用JQuery實現(xiàn)。對比差異！練習案例：表格隔行變色案例：前三名粗體顯示不僅可以使用選擇器進行進行絕對定位，還可以進行相對定位，只要在$()指定第二個參

16、數(shù)，第二個參數(shù)為相對的元素. $(ul, $(this).css(background, red);案例：修改點擊行的所有td的背景色樣式操作獲取樣式 attr(class)，設置樣式attr(class,myclass)，追加樣式addClass(myclass)(不影響其他樣式)，移除樣式removeClass(myclass)，切換樣式（如果存在樣式則去掉樣式，如果沒有樣式則添加樣式）toggleClass(myclass)，判斷是否存在樣式：hasClass(myclass)案例：網(wǎng)頁開關燈的效果。background練習：給body設置body filter:Gray; 這個styl

17、e就可以讓網(wǎng)頁變?yōu)楹诎罪@示，做切換黑白效果的按鈕。點擊表格行，被點擊的行高亮顯示（背景是黃色），其他行白色背景。監(jiān)聽每個tr的click事件，將點擊的背景設置為黃色，其他的設置為白色背景。顏色定義為class樣式。練習：聚焦控件的高亮顯示。顏色定義為class樣式。 $(body *)，選擇器*表示所有類型的控件。選擇器屬性過濾選擇器：$(divid)選取有id屬性的$(divtitle=test)選取title屬性為“test”的，JQuery中沒有對getElementsByName進行封裝，用$(inputname=abc)$(divtitle!=test)選取title屬性不為“tes

18、t”的$(“divid*=div”)選取給定的屬性是以包含某些值的元素還可以選擇開頭、結束、包含等，條件還可以復合。（*）表單對象選擇器（過濾器）：$(#form1:enabled)選取id為form1的表單內(nèi)所有啟用的元素$(#form1:disabled)選取id為form1的表單內(nèi)所有禁用的元素$(input:checked)選取所有選中的元素（Radio、CheckBox）$(select option:selected)選取所有選中的選項元素（下拉列表）案例：歌曲選擇，實現(xiàn)全選、反選表單選擇器$(:input)選取所有、和元素。和$(input)不一樣， $(input)只獲得$(:

19、text)選取所有單行文本框，等價于$(inputtype=text)$(:password)選取所有密碼框。同理還有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。元素的eachjQuery元素的也可以調(diào)用each方法，只是對$.each的簡化調(diào)用。顯示選中的復選框信息實現(xiàn)復選框的全選、反選 $(function() $(inputname=names).click(function() var names = $(inputname=names:checked); var arr = new Array(); nam

20、es.each(function(key, value) arrkey = $(value).val(); ); $(#msgNames).text(共選中+names.length+條：+arr.join(,); ); ); tom jim lily 動態(tài)創(chuàng)建Dom節(jié)點使用$(html字符串)來創(chuàng)建Dom節(jié)點，并且返回一個jQuery對象，然后調(diào)用append等方法將新創(chuàng)建的節(jié)點添加到其他節(jié)點（元素）中： var link = $(百度); $(div:first).append(link);$()創(chuàng)建的就是一個jQuery對象，可以完全進行操作var link = $(百度);link.t

21、ext(百毒);$(div:first).append(link);。getElementByid的問題append方法用來在元素的末尾追加元素案例：動態(tài)生成網(wǎng)站列表練習：輸入員工，員工個數(shù)不確定（動態(tài)生成文本框）創(chuàng)建出的元素沒有append到界面之前是無法用選擇器找到的，就像new一個對象prepend，在元素的開始添加元素。 prependTo。after，在元素之后添加元素（添加兄弟）。before：在元素之前添加元素（添加兄弟）刪除節(jié)點（1）remove()刪除選擇的節(jié)點案例：清空ul中的項，代碼見備注。$(“ul li.testitem”).remove(); 刪除ul下li中有te

22、stitem樣式的元素。自殺。把找到的都刪掉。remove方法的返回值是被刪除的節(jié)點對象，還可以繼續(xù)使用被刪除的節(jié)點。比如重新添加到其他節(jié)點下 var lis = $(#ulSite li).remove(); $(#ulSite2).append(lis); / $(#ulSite li).remove().appendTo($(#ulSite2);（2）empty()是將節(jié)點清空，清除節(jié)點的innerHTML，節(jié)點還在案例：權限選擇練習案例：權限選擇加法計算器。兩個文本框中輸入數(shù)字，點擊【=】按鈕將相加的結果放到第三個文本框中。attr(“”),val()十秒鐘后協(xié)議文本框下的注冊按鈕才能

23、點擊，時鐘倒數(shù)。設置可用性等JQuery未封裝方法：attr()練習：搜索框效果。焦點放入控件，如果文本框中的值是“請輸入關鍵詞”，那么將文本清空，并且顏色設置為黑色。如果焦點離開控件，如果文本框中是空值，那么將文本框填充為“請輸入關鍵詞”，顏色設置為灰色（Gray）。顏色定義為class樣式。無刷新評論。練習1：創(chuàng)建若干個輸入文本框，當光標離開文本框的時候如果文本框為空，則將文本框背景色設置為紅色，如果不為空則為白色。提示：焦點進入控件的事件是focus，焦點離開控件的事件是blur。練習：選美女。被懸浮行高亮顯示（背景是紅色），點擊美女將它放到另一個的美女列表。事件(*)JQuery中的事

24、件綁定：$(“#btn”).bind(“click”,function()，每次都這么調(diào)用太麻煩，所以jQuery可以用$(“#btn”).click(function()來進行簡化。unbind一次性事件：如果綁定的事件只想執(zhí)行一次隨后立即unbind可以使用one()方法進行事件綁定(*)合成事件hover，hover(enterfn,leavefn)，當鼠標放在元素上時調(diào)用enterfn方法，當鼠標離開元素的時候調(diào)用leavefn方法。 toggle()mouseover、mouseenter的區(qū)別：div里套div。見備注。和事件冒泡有關系。事件冒泡：JQuery中也像JavaScri

25、pt一樣是事件冒泡如果想獲得事件相關的信息，只要給響應的匿名函數(shù)增加一個參數(shù)：e，e就是事件對象。調(diào)用事件對象的stopPropagation()方法終止冒泡。e. stopPropagation();$(tr).click(function(e) alert(tr被點擊); e.stopPropagation(); );/注意函數(shù)的參數(shù)是e阻止默認行為：有的元素有默認行為，比如超鏈接點擊后會轉(zhuǎn)向新鏈接、提交按鈕默認會提交表單，如果想阻止默認行為只要調(diào)用事件對象的preventDefault()方法和Dom中的window.event.returnValue=false效果一樣。 $(a).c

26、lick(function(e) alert(所有超鏈接暫時全部禁止點擊); e.preventDefault(); );事件其他（*）屬性：pageX、pageY、target獲得觸發(fā)事件的元素(冒泡的起始，和this不一樣)、which如果是鼠標事件獲得按鍵（1左鍵，2中鍵，3右鍵）。altKey、shiftKey、ctrlKey獲得alt、shift、ctrl是否按下，為bool值。keyCode屬性發(fā)生事件時鍵盤碼(小鍵盤的1和主鍵盤的keyCode不一樣)鼠標獲得發(fā)生事件時鼠標的位置$(document).mousemove(function(e) document.title =

27、e.pageX + , + e.pageY; );在mousemove、click等事件的匿名響應函數(shù)中如果指定一個參數(shù)e，那么就可以從e讀取發(fā)生事件時的一些信息，比如對mousemove等鼠標事件來說，就可以讀取e.pageX、e.pageY來獲得發(fā)生事件時鼠標在頁面的坐標。練習：跟著鼠標走的圖片 position:absolute練習：Tooltips效果練習：美女圖片詳細解析層。動畫show()、hide()方法會顯示、隱藏元素。用toggle()方法在顯示、隱藏之間切換 $(:buttonvalue=show).click(function() $(div).show(); ); $(

28、:buttonvalue=hide).click(function() $(div).hide(); );如果show、hide方法不帶參數(shù)則是立即顯示、立即隱藏，如果指定速度參數(shù)則會用指定時間進行動態(tài)顯示、隱藏，單位為毫秒，也可以使用三個內(nèi)置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery動畫函數(shù)中需要速度的地方一般也可以使用這個三個值。toggle、slideDown、slideUp、 fadeOut、fadeIn案例：QQTab效果。練習：TabControl/當前l(fā)i的索引 和 tabPage的index一致var index = $(t

29、his).index(); $(#tabs div).eq(index).復雜動畫animate：anmite內(nèi)部設置的多個值是同步變化的，鏈式的animate是依次動畫的。例子：animate( left: 0, top: 0, width: 300, height: 300 )、.animate( opacity: 0 ).animate( opacity: 1 )。還可以指定增量，$(“#div1”).animate( height: “+=100” ); /如果是+=、-=等增量形式要寫成字符串，因為JavaScript不認識這種語法案例：演示伸縮導航條案例：Slider照片。點擊網(wǎng)頁

30、，圖片飛到點擊的地方；“磁力”圖片，QQ消息風格右下角滑動窗口常用JQuery插件JQuery官方的UI控件 JQueryUI 下發(fā)包演示常用方法，分析代碼。表現(xiàn)和內(nèi)容分離，語義化。JQuery.validate 表單驗證插件 Form,用于為表單提供直接的Ajax能力所有插件列表 使用JQueryUI使用JQueryUI1、引用jquery的css（注意不要忘了image文件夾）2、引用jquery.js，引用jqueryui.js（如果想減小尺寸，可以引用單獨的每個插件的js）3、查看文檔，根據(jù)說明使用，一般就是在ready里面加一句類似于$(#aa).draggle();“develop

31、ment-bundledemos”是例子，development-bundledocs是每個控件的詳細用法。學一個新的控件庫、開發(fā)包，把例子運行一遍，知道“能做什么”就可以了。jQuery validate1、2、設置元素的class=required minlength等屬性 加name屬性3、窗體加載時候調(diào)用$(#f1).validate();4、提示內(nèi)容顯示為中文messages_cn.js 在開發(fā)包的localization文件夾下 5、自定義出錯樣式和成功樣式JQuery插件： JQuery cookie什么是cookie：Cookie就是保存在瀏覽器上的內(nèi)容，用戶在這次瀏覽頁面的時候向Cookie中保存文本內(nèi)容，下次再訪問頁面的時候就可以取出來上次保存的內(nèi)容，這樣就可以得到上次“記憶”的內(nèi)容。Cookie不是JQuery特有的概念，只不過JQueryCookie把它簡化的更好用而已。Cookie就是存儲在瀏覽器里的一些數(shù)據(jù)。（不能在IE中存，F(xiàn)F中取）Cookie需要瀏覽器的支持，瀏覽器的Cookie是可以禁用