參考案例配套jquery

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

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

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

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

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

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

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

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

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

10、：$(#div1).css(background, red);獲得樣式$(“#div1”).css(“background”)；修改value：$(“#un”).val(“abc”)，獲得value：$(“#un”).val()類似的獲得、設(shè)置innerText、innerHTML用text()和html()。val、html、text等是方法，不是屬性，jQuery中很少有屬性的用法，因?yàn)閷傩詫懛ê茈y“鏈?zhǔn)骄幊獭?。JQuery的迭代如何判斷對(duì)象是否存在，jQuery選擇器返回的是一個(gè)對(duì)象數(shù)組(數(shù)組中的每個(gè)對(duì)象還是Dom對(duì)象)，調(diào)用text()、html()、click()之類方法的時(shí)候其實(shí)是

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

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

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

14、ghlight風(fēng)格?！?”的時(shí)候是針對(duì)的上一步的返回值的節(jié)點(diǎn)集合的操作。鏈?zhǔn)骄幊叹褪菍?duì)象一棒棒向下傳，能不能正確傳下來(lái)要看返回值，prevAll().nextAll()也傳錯(cuò)。自己動(dòng)手寫練習(xí)：設(shè)置li的光棒效果 1 2 3 4 簡(jiǎn)單選擇器 :first 選取第一個(gè)元素。$(div:first)選取第一個(gè)$(.warn:first);:last 選取最后一個(gè)元素。$(div:last)選取最后一個(gè):not(選擇器) 選取不滿足“選擇器”條件的元素，$(input:not(.myClass)選取樣式名不是myClass的:even、:odd，選取索引是奇數(shù)、偶數(shù)的元素：$(input:even)選

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

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

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

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

19、text)選取所有單行文本框，等價(jià)于$(inputtype=text)$(:password)選取所有密碼框。同理還有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。元素的eachjQuery元素的也可以調(diào)用each方法，只是對(duì)$.each的簡(jiǎn)化調(diào)用。顯示選中的復(fù)選框信息實(shí)現(xiàn)復(fù)選框的全選、反選 $(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 動(dòng)態(tài)創(chuàng)建Dom節(jié)點(diǎn)使用$(html字符串)來(lái)創(chuàng)建Dom節(jié)點(diǎn)，并且返回一個(gè)jQuery對(duì)象，然后調(diào)用append等方法將新創(chuàng)建的節(jié)點(diǎn)添加到其他節(jié)點(diǎn)（元素）中： var link = $(百度); $(div:first).append(link);$()創(chuàng)建的就是一個(gè)jQuery對(duì)象，可以完全進(jìn)行操作var link = $(百度);link.t

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

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

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

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

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

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

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

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

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

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

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