當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

JQuery进阶学习

發(fā)布時(shí)間：2024/9/21 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery进阶学习小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?JQuery進(jìn)階學(xué)習(xí)的內(nèi)容
?? ??? ?1. 動(dòng)畫(huà)
?? ??? ?2. 遍歷
?? ??? ?3. 事件綁定
?? ??? ?4. 案例
?? ??? ?5. 插

?一. 動(dòng)畫(huà)

?? ?三種方式顯示和隱藏元素

? ?1.?1. 默認(rèn)顯示和隱藏方式

?? ??? ??? ??? ?1. show([speed,[easing],[fn]])
?? ??? ??? ??? ??? ?1. 參數(shù)：
?? ??? ??? ??? ??? ??? ?1. speed：動(dòng)畫(huà)的速度。三個(gè)預(yù)定義的值("slow","normal", "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
?? ??? ??? ??? ??? ??? ?2. easing：用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"
?? ??? ??? ??? ??? ??? ??? ?* swing：動(dòng)畫(huà)執(zhí)行時(shí)效果是先慢，中間快，最后又慢
?? ??? ??? ??? ??? ??? ??? ?* linear：動(dòng)畫(huà)執(zhí)行時(shí)速度是勻速的
?? ??? ??? ??? ??? ??? ?3. fn：在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。
?? ?
?? ??? ??? ??? ?2. hide([speed,[easing],[fn]])
?? ??? ??? ??? ?3. toggle([speed],[easing],[fn])

代碼示例：

<html> <head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript">//隱藏divfunction hideFn() {$("#showDiv").hide("slow","swing",function(){alert("隱藏了。。。。")});}//展示divfunction showFn() {$("#showDiv").show("slow","swing",function(){alert("顯示了。。。。");});}//顯示和隱藏切換function toggleFn() { $("#showDiv").toggle("slow"); //第二個(gè)參數(shù)默認(rèn)swing}</script> </head> <body> <input type="button" value="點(diǎn)擊按鈕隱藏div" onclick="hideFn()"> <input type="button" value="點(diǎn)擊按鈕顯示div" onclick="showFn()"> <input type="button" value="點(diǎn)擊按鈕切換div顯示和隱藏" onclick="toggleFn()"><div id="showDiv" style="width:300px;height:300px;background:pink">div顯示和隱藏 </div> </body> </html>

? ?1.2. 滑動(dòng)顯示和隱藏方式

?? ??? ??? ??? ?1. slideDown([speed],[easing],[fn])
?? ??? ??? ??? ?2. slideUp([speed,[easing],[fn]])
?? ??? ??? ??? ?3. slideToggle([speed],[easing],[fn])
?? ?

? 1.3. 淡入淡出顯示和隱藏方式

?? ??? ??? ??? ?1. fadeIn([speed],[easing],[fn])
?? ??? ??? ??? ?2. fadeOut([speed],[easing],[fn])
?? ??? ??? ??? ?3. fadeToggle([speed,[easing],[fn]])

??二. 遍歷

? ? 2.1?js的遍歷方式

?? ??? ??? ?* for(初始化值;循環(huán)結(jié)束條件;步長(zhǎng))

? ? ? ??

<html> <head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//第一種js遍歷方式$(function () {var citys=$("#city li"); //jquery對(duì)象//遍歷內(nèi)容for(var i=0;i<citys.length;i++){//alert(i+":"+citys[i].innerHTML); //jquery對(duì)象轉(zhuǎn)化為js進(jìn)行循環(huán)alert(i+":"+$(citys[i]).html()); //jquery對(duì)象進(jìn)行循環(huán)}});</script> </head> <body> <ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重慶</li> </ul> </body> </html>

?? ?2.2?jq的遍歷方式

?? ??? ??? ?1. jq對(duì)象.each(callback)
?? ??? ??? ??? ?1. 語(yǔ)法：
?? ??? ??? ??? ??? ?jquery對(duì)象.each(function(index,element){});
?? ??? ??? ??? ??? ??? ?* index:就是元素在集合中的索引
?? ??? ??? ??? ??? ??? ?* element：就是集合中的每一個(gè)元素對(duì)象
? ? ? ? ? ? ? ? ? ??jquery對(duì)象.each(function(){

????????????????????});
?? ??? ??? ??? ??? ??? ?* this：集合中的每一個(gè)元素對(duì)象

var citys=$("#city li"); //jquery對(duì)象li citys.each(function(index,element) { //citys就是 jQuery對(duì)象//alert(this.innerHTML); //js對(duì)象使用方法//alert($(this).html()); //jquery對(duì)象使用方法alert(index+":"+element.innerHTML);});

?? ??? ??? ??? ?2. 回調(diào)函數(shù)返回值：
?? ??? ??? ??? ??? ?* true:如果當(dāng)前function返回為false，則結(jié)束循環(huán)(break)。
?? ??? ??? ??? ??? ?* false:如果當(dāng)前function返回為true，則結(jié)束本次循環(huán)，繼續(xù)下次循環(huán)(continue)

//使用js的方式for(var i=0;i<citys.length;i++){if("上海"==citys[i].innerHTML){//break;//直接結(jié)束循環(huán)continue; //結(jié)束本次循環(huán)}alert(i+":"+$(citys[i]).html()); //jquery對(duì)象進(jìn)行循環(huán)}*///使用jQuery的方式citys.each(function(index,element) {if ("上海"==element.innerHTML) {//return false; //結(jié)束循環(huán)return true; //結(jié)束本次循環(huán)}//alert(index+":"+element.innerHTML);alert(index+":"+$(element).html());})});

?? ??? ??? ?2. $.each(object, [callback])

var citys=$("#city li"); //jquery對(duì)象li $.each(citys,function(){alert(this.innerHTML);});

?? ??? ??? ?3. for..of: jquery 3.0 版本之后提供的方式
?? ??? ??? ??? ?for(元素對(duì)象 of 容器對(duì)象)

var citys=$("#city li"); //jquery對(duì)象li for(li of citys){//alert(li.innerHTML);alert($(li).html());}

?? ??? ?
? ? 三. 事件綁定

?? ??? ?1. jquery標(biāo)準(zhǔn)的綁定方式
?? ??? ??? ?* jq對(duì)象.事件方法(回調(diào)函數(shù))；
?? ??? ??? ?* 注：如果調(diào)用事件方法，不傳遞回調(diào)函數(shù)，則會(huì)觸發(fā)瀏覽器默認(rèn)行為。
?? ??? ??? ??? ?* 表單對(duì)象.submit();//讓表單提交
?? ??? ?2. on綁定事件/off解除綁定
?? ??? ??? ?* jq對(duì)象.on("事件名稱(chēng)",回調(diào)函數(shù))
?? ??? ??? ?* jq對(duì)象.off("事件名稱(chēng)")
?? ??? ??? ??? ?* 如果off方法不傳遞任何參數(shù)，則將組件上的所有事件全部解綁

<html> <head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn").on("click",function(){ //on綁定點(diǎn)擊事件alert("btn被點(diǎn)擊了")});$("#btn2").click(function() {//$("#btn").off("click"); //off解綁click點(diǎn)擊事件$("#btn").off(); //off解除btn所有的事件});});</script> </head> <body> <input id="btn" type="button" value="使用on綁定點(diǎn)擊事件"> <input id="btn2" type="button" value="使用off解綁點(diǎn)擊事件"> </body> </html>

?? ??? ?3. 事件切換：toggle
?? ??? ??? ?* jq對(duì)象.toggle(fn1,fn2...)
?? ??? ??? ??? ?* 當(dāng)單擊jq對(duì)象對(duì)應(yīng)的組件后，會(huì)執(zhí)行fn1.第二次點(diǎn)擊會(huì)執(zhí)行fn2.....
?? ??? ??? ??? ?
?? ??? ??? ?* 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復(fù)此功能。
?? ??? ??? ??? ? <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<html> <head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="../js/jquery-migrate-1.0.0.js"></script><script type="text/javascript">$(function() {$("#btn").toggle(function() {$("#myDiv").css("backgroundColor","red")},function(){$("#myDiv").css("backgroundColor","blue")});});</script> </head> <body><input id="btn" type="button" value="事件切換"><div id="myDiv" style="width:300px;height:300px;background:pink">點(diǎn)擊按鈕變成綠色，再次點(diǎn)擊紅色</div> </body> </html>

?四. 案例（廣告顯示和隱藏）

?? ???

?1. 廣告顯示和隱藏<!DOCTYPE html><html><head><meta charset="UTF-8"><title>廣告的自動(dòng)顯示與隱藏</title><style>#content{width:100%;height:500px;background:#999}</style><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script>/*需求：1. 當(dāng)頁(yè)面加載完，3秒后。自動(dòng)顯示廣告2. 廣告顯示5秒后，自動(dòng)消失。分析：1. 使用定時(shí)器來(lái)完成。setTimeout (執(zhí)行一次定時(shí)器)2. 分析發(fā)現(xiàn)JQuery的顯示和隱藏動(dòng)畫(huà)效果其實(shí)就是控制display3. 使用 ?show/hide方法來(lái)完成廣告的顯示*///入口函數(shù)，在頁(yè)面加載完成之后，定義定時(shí)器，調(diào)用這兩個(gè)方法$(function () {//定義定時(shí)器，調(diào)用adShow方法 3秒后執(zhí)行一次setTimeout(adShow,3000);//定義定時(shí)器，調(diào)用adHide方法，8秒后執(zhí)行一次setTimeout(adHide,8000);});//顯示廣告function adShow() {//獲取廣告div，調(diào)用顯示方法$("#ad").show("slow");}//隱藏廣告function adHide() {//獲取廣告div，調(diào)用隱藏方法$("#ad").hide("slow");}??? ??? ??? ?</script></head><body><div><div id="ad" style="display: none;"><img style="width:100%" src="../img/adv.jpg" /></div><div id="content">正文部分</div></div></body></html>

五.?抽獎(jiǎng)案例

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>jquery案例之抽獎(jiǎng)</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> </head> <body> <div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/> </div> <divstyle="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/> </div> <inputid="startID"type="button"value="點(diǎn)擊開(kāi)始"style="width:150px;height:150px;font-size:22px"onclick="imgStart()"> <inputid="stopID"type="button"value="點(diǎn)擊停止"style="width:150px;height:150px;font-size:22px"onclick="imgStop()"><script language='javascript' type='text/javascript'>//準(zhǔn)備一個(gè)一維數(shù)組，裝用戶的像片路徑var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg"];var startId; //循環(huán)定時(shí)器的idvar index; //隨機(jī)序列號(hào)$(function() {$("#startID").prop("disabled",false); //設(shè)置按鈕可用$("#stopID").prop("disabled",true); //設(shè)置結(jié)束按鈕不可用//給開(kāi)始綁定單擊事件$("#startID").click(function () {//當(dāng)開(kāi)始循環(huán)時(shí)，開(kāi)始按鈕不可用，結(jié)束按鈕可用$("#startID").prop("disabled",true); //設(shè)置按鈕不可用$("#stopID").prop("disabled",false); //設(shè)置結(jié)束按鈕不可用//設(shè)置定時(shí)器：20毫秒時(shí)間，執(zhí)行隨機(jī)函數(shù)startId=setInterval(function() {//隨機(jī)生成角標(biāo)index=Math.floor(Math.random()*7); //0.000-0.9999999 --->0.00-6.99999-->0-6$("#img1ID").prop("src",imgs[index]); //修改src}, 20);});//給結(jié)束綁定單擊事件$("#stopID").click(function() {$("#startID").prop("disabled",false); //設(shè)置按鈕可用$("#stopID").prop("disabled",true); //設(shè)置結(jié)束按鈕不可用//停止計(jì)時(shí)器clearInterval(startId);//給大相框的src更換值//$("#img2ID").prop("src",imgs[index]);$("#img2ID").prop("src",imgs[index]).hide(); //先添加隱藏//1秒后顯示//$("#img2ID").slideDown(1000); //添加動(dòng)畫(huà)出現(xiàn)//$("#img2ID").fadeIn(1000);$("#img2ID").show(1000);});});</script> </body> </html>

六.?插件：增強(qiáng)JQuery的功能

?? ??? ?1. 實(shí)現(xiàn)方式：
?? ??? ??? ?1. $.fn.extend(object)?
?? ??? ??? ??? ?* 增強(qiáng)通過(guò)Jquery獲取的對(duì)象的功能 ?$("#id")
?? ??? ??? ?2. $.extend(object)
?? ??? ??? ??? ?* 增強(qiáng)JQeury對(duì)象自身的功能 ?$/jQuery

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的JQuery进阶学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Pytorch上下采样函数--inter
下一篇： BM15 删除有序链表中重复的元素-I