Web前端開發(fā)必知必會(huì) 課件-中文版 lesson12 JQuery基礎(chǔ)特效及應(yīng)用_第1頁
Web前端開發(fā)必知必會(huì) 課件-中文版 lesson12 JQuery基礎(chǔ)特效及應(yīng)用_第2頁
Web前端開發(fā)必知必會(huì) 課件-中文版 lesson12 JQuery基礎(chǔ)特效及應(yīng)用_第3頁
Web前端開發(fā)必知必會(huì) 課件-中文版 lesson12 JQuery基礎(chǔ)特效及應(yīng)用_第4頁
Web前端開發(fā)必知必會(huì) 課件-中文版 lesson12 JQuery基礎(chǔ)特效及應(yīng)用_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

地址：杭州市濱江區(qū)濱文路528號(hào)郵政編碼：3100532024/4/10jQuery基本應(yīng)用LESSON11CONTENTS01jQuery概述

02選擇器與DOM操作03jQuery特效

什么是jQuery一個(gè)開源的、跨平臺(tái)的JavaScript函數(shù)庫輕量級(jí)封裝、化簡(jiǎn)JavaScript，兼容CSS3，跨瀏覽器支持HTML元素選取HTML元素操作CSS操作HTML事件函數(shù)JavaScript特效和動(dòng)畫HTMLDOM遍歷和修改AJAX…提供大量的插件Download：/download/

創(chuàng)始人：JohnResig或者鏈接到：CDN服務(wù)器（ContentDeliveryNetwork）$(“p”).css(“border”,”5pxsolidred”);$("#flip").mouseover(function(){$("#panel").slideDown("slow");});

01使用jQuery：

選取HTML元素，對(duì)該元素執(zhí)行操作i.e.

$(“p”).hide();

//hideallparagraphs

<script>$(document).ready(function(){//文檔就緒，必寫，//避免文檔加載完成前運(yùn)算代碼而出錯(cuò)$("#flip").mouseover(function(){$("#panel").slideDown("slow");});$("#flip").click(function(){$("#panel").slideUp("slow");}); });</script>$(selector).action()<scriptsrc="/jquery-3.4.1.min.js"></script>自帶庫：<scriptsrc=“js/jquery-3.4.1.js"></script>入口函數(shù)，可簡(jiǎn)寫為：

$(function(){//執(zhí)行代碼

});jQuery為網(wǎng)頁提供交互與特效Events事件ready()load(),unload()keydown(),keyup(),keypress()click(),dbclick(),hover(),mousedown(),mousemove(),mouseover()…form：focus(),submit()…特效與動(dòng)畫hide(),show(),切換toggle()fadeIn(),fadeOut():(圖片輪播實(shí)例)slideDown(),slideUp()animation()Writeless,domorejQueryselector選擇器作用：找網(wǎng)頁元素方法:

$(“selectorname”)$稱工廠函數(shù)選擇器名即網(wǎng)頁CSS選擇器名，匹配其對(duì)應(yīng)的網(wǎng)頁元素類,ID,標(biāo)簽，屬性選擇器，后代，子代,例:

$(“#p1").click(function(){$(this).hide(); });位置選擇器：$(“tr:even”).click()…02jQueryVSJavaScript$()的本質(zhì)—取代了JavaScript的各種對(duì)象操作

$("#idname")：取代document.getElementById("idname")

$(".classname")：取代document.getElementsByClassName("classname")

$("tagname")：取代document.getElementsByTagName("tagname")Writeless,domorejQuery中選擇器的類型，屬性與css的操作分別說明下列是jQuery的哪種選擇器？$("h2")，$("#panel")，$(".class1")$("navli")，$("div>p")，$("input[type='text']")標(biāo)簽屬性操作：$(selector).attr(attrname[,value])，例如：$("img").attr("width","500");標(biāo)簽樣式操作：$(selector).css(attr[,value])$(selector).addClass(classname)$(selector).removeClass(classname）$(selector).toggleClass(classname）

（續(xù)）練習(xí)：（1）添加一圖片，點(diǎn)擊圖片，修改圖片大小;（2）設(shè)置段落背景色；（3）添加/切換段落字體大小、背景色。位置選擇器（例）一系列篩選選擇器，用法類似偽元素（:）$(“selector:位置”)如：$(“tr:even”)//0是偶數(shù)$(“td:first”)$(“l(fā)i:eq(2)”)//索引從0開始鼠標(biāo)懸停，切換圖片關(guān)鍵點(diǎn)：定義showImage()函數(shù)functionshowImage(name){ $("#pptImage").attr("src","image/ppt2/"+name+".jpg"); }通過src屬性值，切換圖片文件名onmouseover="showImage(n)“舉一反三：讓它定時(shí)切換，如3秒鐘切換一次。03jQueryeffects特效

事件

觸發(fā)

特效/動(dòng)作/操作：顯示隱藏（已完成）hide(),show()切換toggle()滑上滑下slideDown(),slideUp()slideToggle()淡進(jìn)淡出fadeIn(),fadeOut():(實(shí)例：圖片淡進(jìn)淡出輪播)滾上滾下animate({},time)(綜合實(shí)例：響應(yīng)式j(luò)Query特效框架網(wǎng)頁)12303slideDown（->Dropdownmenu->yourmenu）

（舉一反三）應(yīng)用：面板滑上滑下<scriptsrc="/jquery-3.3.1.min.js"></script><script>$(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown("slow");});});</script>a<styletype="text/css">#panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid1px#c3c3c3;}#panel//下拉面板，初始不可見{ padding:50px; display:none;}</style>b<body><divid="flip">點(diǎn)我滑下面板</div><divid="panel">Helloworld!</div></body>c$(function(){//簡(jiǎn)寫，后面為執(zhí)行代碼圖片輪播效果：

使用

fadeIn()、fadeOut()

li:eq(index)位置選擇器，index從0開始<script>>//切換上一張圖片functionlast(){//當(dāng)前圖片淡出

$("li:eq("+index+")").fadeOut(1500);//判斷當(dāng)前圖片序號(hào)是否為第一張

if(index==0)//如果是第一張，序號(hào)跳轉(zhuǎn)到最后

index=3;else//否則圖片序號(hào)自減1index--; //新圖片淡入

$("li:eq("+index+")").fadeIn(1500);} </script>//當(dāng)前圖片序號(hào)

varindex=0;$(document).ready(function(){setInterval("next()",5000);});//切換下一張圖片functionnext(){//當(dāng)前圖片淡出

$("li:eq("+index+")").fadeOut(1500);//判斷當(dāng)前圖片序號(hào)是否為最后一張

if(index==3)//如果是最后一張，序號(hào)跳轉(zhuǎn)到第一張

index=0;else //否則圖片序號(hào)自增1index++;//新圖片淡入

$("li:eq("+index+")").fadeIn(1500);}<!--按鈕1，用于切換上一張圖片--><buttonid="btn01"onClick="last()"><imgsrc="image/ppt/left.png"/></button><!--按鈕2，用于切換下一張圖片--><buttonid="btn02"onClick="next()"><imgsrc="image/ppt/right.png"/></button>子塊定義：position:absolute;top:0px;left:0px;z-ind

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論