Web前端開發(fā)（JavaScript+jQuery）課件 項(xiàng)目4 Web前端技術(shù)_第1頁(yè)
Web前端開發(fā)（JavaScript+jQuery）課件 項(xiàng)目4 Web前端技術(shù)_第2頁(yè)
Web前端開發(fā)（JavaScript+jQuery）課件 項(xiàng)目4 Web前端技術(shù)_第3頁(yè)
Web前端開發(fā)（JavaScript+jQuery）課件 項(xiàng)目4 Web前端技術(shù)_第4頁(yè)
Web前端開發(fā)（JavaScript+jQuery）課件 項(xiàng)目4 Web前端技術(shù)_第5頁(yè)
已閱讀5頁(yè)，還剩38頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

Web前端技術(shù)

jQuery目錄jQuery選擇器4.24.1jQuery基礎(chǔ)jQuery動(dòng)畫效果4.3?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)jQuery事件機(jī)制4.4?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)

4.1jQuery基礎(chǔ)4.1.1

什么是jQuery？jQuery是一款快速、輕巧而功能豐富的JavaScript庫(kù)。特點(diǎn)和優(yōu)勢(shì)：簡(jiǎn)化的DOM操作事件處理動(dòng)畫和效果Ajax支持跨瀏覽器兼容性插件開發(fā)簡(jiǎn)潔的語(yǔ)法4.1.2

網(wǎng)頁(yè)中如何添加jQuery有兩個(gè)版本的jQuery可供下載：Productionversion-用于實(shí)際的網(wǎng)站中，已被精簡(jiǎn)和壓縮。Developmentversion-用于測(cè)試和開發(fā)（未壓縮，是可讀的代碼）在HTML文檔中使用<script>標(biāo)簽引入jQuery文件。本地文件引入<!--下載的jQuery文件應(yīng)該在相應(yīng)的路徑下--><scriptsrc="path/to/jquery.min.js"></script>4.1.2

網(wǎng)頁(yè)中如何添加jQuery在HTML文件的<head>部分添加一個(gè)指向jQuery庫(kù)的<script>標(biāo)簽，通過CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它。示例：

百度引用的方法。2.通過CDN引入動(dòng)手實(shí)踐：我的第一個(gè)jQuery程序創(chuàng)建HTML頁(yè)面，在HTML文檔中使用<script>標(biāo)簽引入jQuery文件。1.創(chuàng)建HTML頁(yè)面<scriptsrc="jquery-1.12.4.js"></script>動(dòng)手實(shí)踐：我的第一個(gè)jQuery程序2.書寫jQuery代碼<script>$(document).ready(function(){ alert("歡迎來到j(luò)Query課堂"); });</script>

4.2jQuery選擇器4.2.1jQuery語(yǔ)法在jQuery中，基礎(chǔ)語(yǔ)法始于定義$，表示jQuery的開始，緊隨其后的是選擇器，用于指定操作的HTML標(biāo)簽。示例：$(this).hide()//隱藏當(dāng)前元素$("p").hide()//隱藏所有<p>元素$("p.test").hide()//隱藏所有class="test"的<p>元素$("#test").hide()//隱藏所有id="test"的元素4.2.2

文檔就緒事件所有jQuery函數(shù)位于一個(gè)documentready函數(shù)中。$(document).ready(function(){//開始寫jQuery代碼...});$(function(){//開始寫jQuery代碼...});簡(jiǎn)潔寫法4.2.3jQuery選擇器基本選擇器選擇器語(yǔ)法用途*選擇器$(*)*選擇器選取文檔中的每個(gè)單獨(dú)的元素，如果與其他元素（如嵌套選擇器）一起使用，該選擇器選取指定元素中的所有子元素。元素選擇器$(“element”)元素選擇器基于元素名選取元素。ID選擇器$("#id")id選擇器通過HTML元素的id屬性選取指定的元素。類選擇器$(".class")類選擇器可以通過指定的class查找元素。復(fù)合選擇器$(“selector1,selector2,selectorN”)復(fù)合選擇器是將多個(gè)選擇器組合在一起，可以是ID選擇器、類選擇器或者元素選擇器，它們之間用逗號(hào)隔開，只要復(fù)合其中的任何一個(gè)條件，就會(huì)匹配，并以集合的形式返回jQuery包裝集。4.2.3jQuery選擇器2.層級(jí)選擇器選擇器描述selectorselector1后代選擇器，根據(jù)祖先元素（selector）匹配所有的后代元素（selector1）parent>child子元素選擇器（也叫父子選擇器），根據(jù)父元素匹配所有的子元素pre+next相鄰選擇器，匹配pre元素緊鄰的兄弟元素pre~siblings兄弟選擇器，匹配pre素后的所有兄弟元素4.2.3jQuery選擇器3.過濾選擇器基本過濾選擇器：選擇器描述返回:first選取第一個(gè)元素單個(gè)元素組成的集合:last選取最后一個(gè)元素集合元素not(selector)去除所有與給定選擇器匹配的元素集合元素:even選取索引時(shí)偶數(shù)的所有元素，索引從0開始集合元素:odd選取索引時(shí)奇數(shù)的所有元素，索引從0開始集合元素:eq(index)索引從0開始選取索引等于index的元素，索引從0開始集合元素:gt(index)選取索引大于index的元素，索引從0開始集合元素:it(index)選取索引小于index的元素，索引從0開始集合元素:header選取所有的標(biāo)題元素，如：h1，h2等集合元素:animated選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素集合元素4.2.3jQuery選擇器3.過濾選擇器內(nèi)容過濾選擇器：選擇器描述返回:contains(text)選取含有文本內(nèi)容為text的元素集合元素:empty選取不包含子元素或者文本的空元素集合元素:has(selector)選取含有選擇器所匹配的的元素的元素集合元素:parent選取含有子元素或者文本的元素集合元素4.2.3jQuery選擇器3.過濾選擇器屬性過濾選擇器：選擇器描述返回[attribute]選取擁有此屬性的元素集合元素[attribute=value]選取指定屬性的值value的元素集合元素[attribute!=value]選取指定屬性的值不等于value的元素集合元素[attribute^=value]選取指定屬性的值以value開始的元素集合元素[attribute$=value]選取指定屬性的值以value結(jié)束的元素集合元素[attribute*=value]選取指定屬性的值含有value的元素集合元素[selector1][selector2]...[selectorN]用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器，滿足多個(gè)條件.每選擇一次，縮小一次范圍集合元素[attribute]選取擁有此屬性的元素集合元素4.2.3jQuery選擇器3.過濾選擇器子元素過濾選擇器：選擇器描述返回nth-child(index/even/odd/equation)選取每個(gè)父元素下的第index個(gè)子元素或者奇偶元素（index從1算起）集合元素:first-child選取每個(gè)父元素的第一個(gè)子元素集合元素:last-child選取每個(gè)父元素的最后一個(gè)子元素集合元素:only-child如果某個(gè)元素是它父元素中唯一的子元素，那么將被匹配.集合元素4.2.3jQuery選擇器3.過濾選擇器表單選擇器：選擇器描述返回:input選取所的<input>，<textarea>，<select>，和<button>元素集合元素:text選取所有的單行文本框集合元素:password選取所有的密碼框元素集合元素:radio選取所有的單選框集合元素:checkbox選取所有的多選框集合元素:submit選取所有的提交按鈕集合元素:image選取所有的圖像按鈕集合元素:reset選取所有的重置按鈕集合元素:button選取所有的按鈕集合元素:file選取所有的上傳域集合元素:hidden選取所有的不可見元素集合元素動(dòng)手實(shí)踐：動(dòng)態(tài)導(dǎo)購(gòu)菜單的制作使用jQuery代碼，實(shí)現(xiàn)一個(gè)動(dòng)態(tài)商品切換的效果。1.布局分析動(dòng)手實(shí)踐：動(dòng)態(tài)導(dǎo)購(gòu)菜單的制作創(chuàng)建一個(gè)大的box，然后分別在其中div中創(chuàng)建一個(gè)無序列表；新建CSS樣式表，添加修飾，使三個(gè)div元素在同一水平上顯示；引入jQuery函數(shù)庫(kù)，添加jQuery函數(shù)，實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)的動(dòng)態(tài)切換效果。2.頁(yè)面實(shí)現(xiàn)動(dòng)手實(shí)踐：動(dòng)態(tài)導(dǎo)購(gòu)菜單的制作2.頁(yè)面實(shí)現(xiàn)//部分jQuery函數(shù)代碼<script>$(function(){//就緒函數(shù) //為左側(cè)的列表中的li添加鼠標(biāo)進(jìn)入的事件 $("#left>li").mouseover(function(){ varidx=$(this).index(); $("#center>li").eq(idx).siblings('li').hide(); $("#center>li").eq(idx).show(); }); });</script>

4.3jQuery動(dòng)畫效果4.3.1jQuery基本動(dòng)畫效果獲取id=hide的隱藏按鈕,并給它一個(gè)單擊click()事件，在click（）函數(shù)中輸入響應(yīng)事件的hide()函數(shù)，完成隱藏效果。1.hide()函數(shù)$("#hide").click(function(){$("p").hide("2000");});4.3.1jQuery基本動(dòng)畫效果讓隱藏起來的圖片顯示出來，需要用到show()函數(shù)。用法與hide()函數(shù)相同，其參數(shù)的運(yùn)用也一樣。2.顯示與隱藏效果的實(shí)現(xiàn)$("#show").click(function(){$("p").show("slow");});4.3.1jQuery基本動(dòng)畫效果實(shí)現(xiàn)隱藏和顯示之間的切換需要用到狀態(tài)切換函數(shù)。$(selector).toggle(speed,callback)3.切換效果的實(shí)現(xiàn)$(document).ready(function(){$("button").click(function(){$("p").toggle("2000");});});4.3.2淡入淡出動(dòng)畫效果在jQuery中實(shí)現(xiàn)淡入淡出效果的方法主要有fadeIn()、fadeout()、fadeToggle()、fadeTo()。 $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback);4.3.3滑動(dòng)效果jQuery動(dòng)畫效果中的滑動(dòng)效果，主要是通過高度的變化動(dòng)態(tài)切換元素的可見性，jQuery中用于創(chuàng)建滑動(dòng)效果的方法有：slidDown()、slidUp()、slidToggle()。 $(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);4.3.4自定義動(dòng)畫在jQuery中，使用animate()方法來自定義動(dòng)畫。params:必須參數(shù)，是一個(gè)包含樣式屬性及值的映射；speed:速度參數(shù)，可選；callback:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，也是可選參數(shù)。$(selector).animate({params},speed,callback);動(dòng)手實(shí)踐：我的第一個(gè)jQuery程序1.基本結(jié)構(gòu)分析通過jQuery實(shí)現(xiàn)圖片切換效果。圖片會(huì)4秒鐘切換一次，也可以自己?jiǎn)螕魯?shù)字，讓圖片進(jìn)行切換，當(dāng)前顯示的圖片所對(duì)應(yīng)的數(shù)字上會(huì)有紅色樣式。動(dòng)手實(shí)踐：我的第一個(gè)jQuery程序2.切換效果實(shí)現(xiàn)設(shè)置圖片之間的切換顯示，即一張圖片淡出的同時(shí)另一張圖片淡入，圖片切換，對(duì)應(yīng)的數(shù)字和紅色樣式也會(huì)隨著切換。$("#banner_lista").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(1000);document.getElementById("banner").style.background="";$(this).toggleClass("on");$(this).siblings().removeAttr("class");})

4.4jQuery事件機(jī)制4.4.1jQuery事件方法jQuery中事件方法一般與事件名稱相同。例如單擊事件click，對(duì)應(yīng)的事件方法就是click（）方法。$("p").click(function(){//動(dòng)作觸發(fā)后執(zhí)行的代碼});4.4.2jQuery事件方法鼠標(biāo)事件是指用戶在單擊鼠標(biāo)或者移動(dòng)鼠標(biāo)時(shí)觸發(fā)的事件。1.鼠標(biāo)事件類別事件方法含義鼠標(biāo)事件click()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的click事件（單擊鼠標(biāo)的按鍵）dbclick()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的dbclick事件（雙擊鼠標(biāo)的按鍵）mousedown()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mousedown事件（鼠標(biāo)的按鍵被按下）mouseup()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseup事件（鼠標(biāo)的按鍵被釋放彈起）mouseenter()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseenter事件（當(dāng)鼠標(biāo)指針進(jìn)入目標(biāo)時(shí)）mouseleave()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseleave事件（當(dāng)鼠標(biāo)指針離開目標(biāo)時(shí)）mouseover()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseover事件（鼠標(biāo)移到目標(biāo)的上方或其子元素上）mouseout()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseout事件（鼠標(biāo)移出目標(biāo)的上方或任何子元素）mousemove()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mousemove事件（鼠標(biāo)在目標(biāo)的上方移動(dòng)）4.4.2jQuery事件方法在通常的鍵盤事件中有keydown()、keypress()和keyup()。完整的按鍵過程應(yīng)該分為兩個(gè)步驟，按鍵被按下，然后按鍵被松開并復(fù)位，這里就觸發(fā)了keydown()和keyup()。2.鍵盤事件類別事件方法含義鍵盤事件keydown()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keydown事件keypress()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keypress事件keyup()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keyup事件4.4.2jQuery事件方法焦點(diǎn)事件包括獲得焦點(diǎn)foucs()事件和失去焦點(diǎn)blur()事件。3.焦點(diǎn)事件$(document).ready(function(){$("input").focus(function(){$("input").css("background-color","yellow");});//獲得焦點(diǎn)，背景顏色為黃色$("input").blur(function(){$("input").css("background-color","red");});//失去焦點(diǎn)，背景顏色為紅色

});4.4.2jQuery事件方法當(dāng)元素的值發(fā)生改變時(shí)，我們可以使用change事件。該事件僅適用于input、textarea、select等元素。4.改變事件$(document).ready(function(){$(".field").change(function(){$(this).css("background-color","#FF6600");});});4.4.2jQuery事件方法在jQuery中常用的綁定函數(shù)有on()、

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論