jQuery基礎(chǔ)入門(mén)2課件

jQuery基礎(chǔ)教程使用jQuery創(chuàng)建動(dòng)畫(huà)效果jQuery中的動(dòng)畫(huà):隱藏和顯示hide():在HTML文檔中,為一個(gè)元素調(diào)用hide()方法會(huì)將該元素的display樣式改為none.代碼功能同css(“display”,“none”);show():將元素的display樣式改為先前的顯示狀態(tài).以上兩個(gè)方法在不帶任何參數(shù)的情況下,作用是立即隱藏或顯示匹配的元素,不會(huì)有任何動(dòng)畫(huà).可以通過(guò)制定速度參數(shù)使元素動(dòng)起來(lái).以上兩個(gè)方法會(huì)同時(shí)減少(增大)內(nèi)容的高度,寬度和不透明度.jQuery中的動(dòng)畫(huà)(3)toggle():切換元素的可見(jiàn)狀態(tài):如果元素時(shí)可見(jiàn)的,則切換為隱藏;如果元素時(shí)隱藏的,則切換為可見(jiàn)的.slideToggle():通過(guò)高度變化來(lái)切換匹配元素的可見(jiàn)性.fadeTo():把不透明度以漸近的方式調(diào)整到指定的值(0–1之間).

練習(xí)3:品牌列表注意:兩個(gè)過(guò)濾函數(shù)is和filter的使用練習(xí)4:超鏈接和圖片提示效果練習(xí)6:多選框應(yīng)用練習(xí)7:下拉框應(yīng)用JQuery可以通過(guò)$.get()或$.post()方法來(lái)加載xml.JQuery解析XML與解析DOM一樣,可以使用find(),children()等函數(shù)來(lái)解析和用each()方法來(lái)進(jìn)行遍歷JQuery加載并解析XML練習(xí)9:使用JQuery實(shí)現(xiàn)在eclipse中安裝Aptana插件把下載好的插件里的內(nèi)容（只保留features和plugins這兩個(gè)文件夾）放在eclipse的aptana文件夾中在eclipse文件夾里新建一個(gè)links文件夾，里面再建一個(gè)aptana.link文件，內(nèi)容為path=/aptana讓Aptana提示jQueryDreamweaverCS4和Aptana都支持jQuery提示jQuery對(duì)象和DOM對(duì)象的區(qū)別注意用“$”選中的元素（jQuery對(duì)象）和用DOM方法選中的元素（DOM對(duì)象）含義并不相同varone=getElementById(“one”);$(“#one”)表現(xiàn)在jQuery對(duì)象的方法和屬性與DOM對(duì)象的并不相同，如one.onclick()$(“#one”).click()jQuery中的“$”及其作用2.“$”用作功能函數(shù)前綴(1)遍歷數(shù)組$.each([0,1,2],function(i){document.write("Item#"+i+"<br/>");});(2)遍歷選擇器中的元素$(function(){ $("img").each(function(index){ this.title="這是第"+(index+1)+"幅圖，路徑是："+this.src; });});jQuery中的“$”及其作用3.用作$(document).ready()$(document).ready(function(){("#loading").css("display","none");})jQuery的寫(xiě)法則會(huì)使頁(yè)面僅加載完DOM結(jié)構(gòu)后就執(zhí)行，即加載完html文檔后，還沒(méi)加載圖像等其他文件就執(zhí)行ready()函數(shù)，給圖像添加“display:none”的樣式，因此id為“l(fā)oading”的圖片不可能被顯示。所以$(document).ready()比window.onload載入執(zhí)行更快jQuery中的“$”及其作用4.創(chuàng)建DOM元素使用“$”可以直接創(chuàng)建DOM元素：varnewP=$("<p>武廣高速鐵路即將通車！</p>");創(chuàng)建了DOM元素后，將這個(gè)元素插入到在頁(yè)面的某個(gè)具體位置上newP.insertAfter(“#chapter”);//將創(chuàng)建的newP元素插入到ID為#chapter的元素之后或者newP.appendTo("body");

創(chuàng)建DOM元素的方法總結(jié)將新元素插入到匹配元素的里的方法：append()appendTo()prepend()prependTo()append()表示在原有元素中插入新元素$("body")append(newP);appendTo()表示將新元素插入到原有元素里newP.appendTo("body");將新元素插入到匹配元素的盤(pán)邊after()insertafter()before()insertbefore()將新元素包含住匹配的元素wrap()jQuery的選擇器要使某個(gè)動(dòng)作應(yīng)用于特定的html元素，需要有辦法找到這個(gè)元素。在jQuery中，執(zhí)行這一任務(wù)的方法稱為jQuery選擇器。jQuery選擇器把網(wǎng)頁(yè)的結(jié)構(gòu)和行為完全分離。利用jQuery選擇器，能快速地找出特定的html元素，然后輕松的給元素添加一系列行為動(dòng)作。jQuery的選擇器主要有三大類，即CSS3的基本選擇器，CSS3的位置選擇器和過(guò)濾選擇器。jQuery的應(yīng)用舉例1.制作折疊式菜單（Accordion）折疊式菜單是和Tab面板一樣流行的高級(jí)網(wǎng)頁(yè)元素，它是一種二級(jí)菜單，當(dāng)點(diǎn)擊某個(gè)主菜單項(xiàng)時(shí)，就會(huì)以滑動(dòng)的方式展開(kāi)它下面的二級(jí)菜單，同時(shí)自動(dòng)收縮隱藏其他主菜單項(xiàng)的二級(jí)菜單，如圖7-48所示。因此折疊式菜單有一個(gè)很好聽(tīng)的英文名叫“Accordion”（手風(fēng)琴），它的折疊方式是不是有點(diǎn)像在拉手風(fēng)琴呢？1.制作折疊式菜單（Accordion）<scriptlanguage="JavaScript"src="jquery.min.js"></script><scripttype="text/JavaScript"> $(document).ready(function(){ //頁(yè)面載入時(shí)隱蔽除第一個(gè)元素外所有元素 $("#accordion>li>a+*:not(:first)").hide(); //對(duì)所有元素的標(biāo)題綁定點(diǎn)擊動(dòng)作 $("#accordion>li>a").click(function(){ $(this).parent().parent().each(function(){ $(">li>a+*",this).slideUp();//隱蔽所有元素 }); $("+*",this).slideDown();//展開(kāi)當(dāng)前點(diǎn)擊的元素 }); });</script>7.8.