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

下載本文檔

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

文檔簡介

Web前端技術(shù)

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

4.1jQuery基礎(chǔ)4.1.1

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

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

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

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

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

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

4.3jQuery動畫效果4.3.1jQuery基本動畫效果獲取id=hide的隱藏按鈕,并給它一個單擊click()事件，在click（）函數(shù)中輸入響應(yīng)事件的hide()函數(shù)，完成隱藏效果。1.hide()函數(shù)$("#hide").click(function(){$("p").hide("2000");});4.3.1jQuery基本動畫效果讓隱藏起來的圖片顯示出來，需要用到show()函數(shù)。用法與hide()函數(shù)相同，其參數(shù)的運用也一樣。2.顯示與隱藏效果的實現(xiàn)$("#show").click(function(){$("p").show("slow");});4.3.1jQuery基本動畫效果實現(xiàn)隱藏和顯示之間的切換需要用到狀態(tài)切換函數(shù)。$(selector).toggle(speed,callback)3.切換效果的實現(xiàn)$(document).ready(function(){$("button").click(function(){$("p").toggle("2000");});});4.3.2淡入淡出動畫效果在jQuery中實現(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滑動效果jQuery動畫效果中的滑動效果，主要是通過高度的變化動態(tài)切換元素的可見性，jQuery中用于創(chuàng)建滑動效果的方法有：slidDown()、slidUp()、slidToggle()。 $(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);4.3.4自定義動畫在jQuery中，使用animate()方法來自定義動畫。params:必須參數(shù)，是一個包含樣式屬性及值的映射；speed:速度參數(shù)，可選；callback:在動畫完成時執(zhí)行的函數(shù)，也是可選參數(shù)。$(selector).animate({params},speed,callback);動手實踐：我的第一個jQuery程序1.基本結(jié)構(gòu)分析通過jQuery實現(xiàn)圖片切換效果。圖片會4秒鐘切換一次，也可以自己單擊數(shù)字，讓圖片進行切換，當前顯示的圖片所對應(yīng)的數(shù)字上會有紅色樣式。動手實踐：我的第一個jQuery程序2.切換效果實現(xiàn)設(shè)置圖片之間的切換顯示，即一張圖片淡出的同時另一張圖片淡入，圖片切換，對應(yīng)的數(shù)字和紅色樣式也會隨著切換。$("#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事件機制4.4.1jQuery事件方法jQuery中事件方法一般與事件名稱相同。例如單擊事件click，對應(yīng)的事件方法就是click（）方法。$("p").click(function(){//動作觸發(fā)后執(zhí)行的代碼});4.4.2jQuery事件方法鼠標事件是指用戶在單擊鼠標或者移動鼠標時觸發(fā)的事件。1.鼠標事件類別事件方法含義鼠標事件click()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的click事件（單擊鼠標的按鍵）dbclick()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的dbclick事件（雙擊鼠標的按鍵）mousedown()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mousedown事件（鼠標的按鍵被按下）mouseup()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseup事件（鼠標的按鍵被釋放彈起）mouseenter()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseenter事件（當鼠標指針進入目標時）mouseleave()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseleave事件（當鼠標指針離開目標時）mouseover()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseover事件（鼠標移到目標的上方或其子元素上）mouseout()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseout事件（鼠標移出目標的上方或任何子元素）mousemove()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mousemove事件（鼠標在目標的上方移動）4.4.2jQuery事件方法在通常的鍵盤事件中有keydown()、keypress()和keyup()。完整的按鍵過程應(yīng)該分為兩個步驟，按鍵被按下，然后按鍵被松開并復(fù)位，這里就觸發(fā)了keydown()和keyup()。2.鍵盤事件類別事件方法含義鍵盤事件keydown()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keydown事件keypress()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keypress事件keyup()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keyup事件4.4.2jQuery事件方法焦點事件包括獲得焦點foucs()事件和失去焦點blur()事件。3.焦點事件$(document).ready(function(){$("input").focus(function(){$("input").css("background-color","yellow");});//獲得焦點，背景顏色為黃色$("input").blur(function(){$("input").css("background-color","red");});//失去焦點，背景顏色為紅色

});4.4.2jQuery事件方法當元素的值發(fā)生改變時，我們可以使用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等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論