1、 絢麗效果教你做之JQuery實(shí)戰(zhàn)級聯(lián)下拉框效果 ITCAST簽約講師王興魁 ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn)z本次課程實(shí)例展示 Page 2ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn)z本節(jié)學(xué)到的JQuery及其他開發(fā)知識： z1.img標(biāo)簽的alt屬性要寫上，在圖片尚未裝載 進(jìn)來或圖片不存在時(shí)，這個(gè)屬性的文字信息會顯示出來 z2.select表示下拉框，下拉框的每一項(xiàng)都是一 個(gè)option，option開始結(jié)尾標(biāo)簽中的內(nèi)容會顯示在頁面上，value屬性的值則是用于在JQuery中用val方法獲取并發(fā)送給服務(wù)器的。定 義了selected的屬性值為selected時(shí)，表示當(dāng)前option被選

2、中 Page 3ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn)z本節(jié)學(xué)到的JQuery及其他開發(fā)知識： z3.div元素居中顯示的方法：給div設(shè)定寬度， 然后margin-left和margin-right的值都為auto。簡寫方法是margin: 0 auto;z4.html的p標(biāo)簽表示一個(gè)段落的內(nèi)容，其中的 內(nèi)容會獨(dú)占一行或多行，后面的內(nèi)容會另起一行顯示 z5.為了讓p中文字和圖片居中，可以使用text-align屬性，屬性值為center。p標(biāo)簽?zāi)J(rèn)有margin-top和margin-bottom的值，需要的話可以通過css清除 Page 4ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn)z本節(jié)學(xué)到的

3、JQuery及其他開發(fā)知識： z6.visibility的屬性值為hidden時(shí)，元素隱藏， 但是和display為none不同的時(shí)，在頁面中任然占據(jù)一定空間，只是不顯示 z7.多個(gè)選擇器如果有相同的屬性值，可以放在 一起定義，選擇器之間用逗號分割 z8.change方法對應(yīng)標(biāo)準(zhǔn)Javascript中的 Page 5ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn) 本節(jié)學(xué)到的JQuery及其他開發(fā)知識： 9.parent方法可以獲得一個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn) 10.next方法可以獲得一個(gè)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)， 對應(yīng)的previous方法可以獲得一個(gè)節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn) 11.$.post方法可以和服務(wù)器端發(fā)起p

4、ost的異步請求。第一個(gè)參數(shù)是請求的服務(wù)器端地址，第二個(gè)參數(shù)是發(fā)送給服務(wù)器端的數(shù)據(jù)，參數(shù)是Javascript的對象，采用名值對的方式表示，第三個(gè)參數(shù)是回調(diào)方法，第四個(gè)參數(shù)指示服務(wù)器端返回的數(shù)據(jù)類型，JQuery會根據(jù)這個(gè)參數(shù)幫我們進(jìn)行轉(zhuǎn)換。get方法只有第二個(gè)參數(shù)不同，其他幾個(gè)參數(shù)用法相同 Page 6ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn)z本節(jié)學(xué)到的JQuery及其他開發(fā)知識： z12.Javascript中的簡單對象定義方式是key1:value1, key2: value2z13.JSON的數(shù)據(jù)格式其實(shí)就是Javascript中的 一個(gè)對象或數(shù)據(jù)定義的文本格式內(nèi)容，比如 key1: v

5、alue1, key2: 1,2,3或1,2,key2: value2z14.可以直接$(“”)的方法來建立下拉框中的選項(xiàng)，然后用appendTo這樣的方法加入到下拉框中 Page 7ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn)z本節(jié)學(xué)到的JQuery及其他開發(fā)知識： z15.attr方法可以設(shè)置或獲取某一個(gè)節(jié)點(diǎn)的屬性 值 z16.ajaxStart在每一個(gè)JQuery發(fā)出的ajax請求 開始前執(zhí)行，ajaxStop在JQuery隊(duì)列中所有的ajax請求結(jié)束后執(zhí)行，ajaxComplete在每一個(gè)JQuery發(fā)出的ajax請求結(jié)束后執(zhí)行 z17.fadeOut和fadeIn可以實(shí)現(xiàn)淡出淡入的效果 ，

6、參數(shù)內(nèi)容和slideUp，slideDown方法類似。Page 8ITCAST版權(quán)所有 JQuery實(shí)戰(zhàn)z本節(jié)學(xué)到的JQuery及其他開發(fā)知識： z18.animate方法可以實(shí)現(xiàn)任意的動畫效果，可 以控制某個(gè)css屬性在某個(gè)時(shí)間內(nèi)進(jìn)行變化， 從而達(dá)到動畫的效果 z19.opacity可以改變元素的，IE中使用 過濾器實(shí)現(xiàn)，100表示完全顯示，0表示完全透明，非IE瀏覽器使用opacity屬性，1表示完全顯示，0表示透明。JQuery在animate方法中屏蔽了瀏覽器差異，直接使用opacity就可以達(dá)到淡入淡出的效果。 Page 9ITCAST版權(quán)所有z JQuery實(shí)戰(zhàn)z本節(jié)學(xué)到的JQuery及其他開發(fā)知識： z20.data方法可以用于緩存數(shù)據(jù)。緩存可以提 高系統(tǒng)的運(yùn)行效率，降低服務(wù)器端的負(fù)荷 z