當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery进阶学习

發布時間：2024/9/21 编程问答 17 豆豆

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

?JQuery進階學習的內容
?? ??? ?1. 動畫
?? ??? ?2. 遍歷
?? ??? ?3. 事件綁定
?? ??? ?4. 案例
?? ??? ?5. 插

?一. 動畫

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

? ?1.?1. 默認顯示和隱藏方式

?? ??? ??? ??? ?1. show([speed,[easing],[fn]])
?? ??? ??? ??? ??? ?1. 參數：
?? ??? ??? ??? ??? ??? ?1. speed：動畫的速度。三個預定義的值("slow","normal", "fast")或表示動畫時長的毫秒數值(如：1000)
?? ??? ??? ??? ??? ??? ?2. easing：用來指定切換效果，默認是"swing"，可用參數"linear"
?? ??? ??? ??? ??? ??? ??? ?* swing：動畫執行時效果是先慢，中間快，最后又慢
?? ??? ??? ??? ??? ??? ??? ?* linear：動畫執行時速度是勻速的
?? ??? ??? ??? ??? ??? ?3. fn：在動畫完成時執行的函數，每個元素執行一次。
?? ?
?? ??? ??? ??? ?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"); //第二個參數默認swing}</script> </head> <body> <input type="button" value="點擊按鈕隱藏div" onclick="hideFn()"> <input type="button" value="點擊按鈕顯示div" onclick="showFn()"> <input type="button" value="點擊按鈕切換div顯示和隱藏" onclick="toggleFn()"><div id="showDiv" style="width:300px;height:300px;background:pink">div顯示和隱藏 </div> </body> </html>

? ?1.2. 滑動顯示和隱藏方式

?? ??? ??? ??? ?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(初始化值;循環結束條件;步長)

? ? ? ??

<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對象//遍歷內容for(var i=0;i<citys.length;i++){//alert(i+":"+citys[i].innerHTML); //jquery對象轉化為js進行循環alert(i+":"+$(citys[i]).html()); //jquery對象進行循環}});</script> </head> <body> <ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重慶</li> </ul> </body> </html>

?? ?2.2?jq的遍歷方式

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

????????????????????});
?? ??? ??? ??? ??? ??? ?* this：集合中的每一個元素對象

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

?? ??? ??? ??? ?2. 回調函數返回值：
?? ??? ??? ??? ??? ?* true:如果當前function返回為false，則結束循環(break)。
?? ??? ??? ??? ??? ?* false:如果當前function返回為true，則結束本次循環，繼續下次循環(continue)

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

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

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

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

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

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

?? ??? ?1. jquery標準的綁定方式
?? ??? ??? ?* jq對象.事件方法(回調函數)；
?? ??? ??? ?* 注：如果調用事件方法，不傳遞回調函數，則會觸發瀏覽器默認行為。
?? ??? ??? ??? ?* 表單對象.submit();//讓表單提交
?? ??? ?2. on綁定事件/off解除綁定
?? ??? ??? ?* jq對象.on("事件名稱",回調函數)
?? ??? ??? ?* jq對象.off("事件名稱")
?? ??? ??? ??? ?* 如果off方法不傳遞任何參數，則將組件上的所有事件全部解綁

<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綁定點擊事件alert("btn被點擊了")});$("#btn2").click(function() {//$("#btn").off("click"); //off解綁click點擊事件$("#btn").off(); //off解除btn所有的事件});});</script> </head> <body> <input id="btn" type="button" value="使用on綁定點擊事件"> <input id="btn2" type="button" value="使用off解綁點擊事件"> </body> </html>

?? ??? ?3. 事件切換：toggle
?? ??? ??? ?* jq對象.toggle(fn1,fn2...)
?? ??? ??? ??? ?* 當單擊jq對象對應的組件后，會執行fn1.第二次點擊會執行fn2.....
?? ??? ??? ??? ?
?? ??? ??? ?* 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。
?? ??? ??? ??? ? <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">點擊按鈕變成綠色，再次點擊紅色</div> </body> </html>

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

?? ???

?1. 廣告顯示和隱藏<!DOCTYPE html><html><head><meta charset="UTF-8"><title>廣告的自動顯示與隱藏</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. 當頁面加載完，3秒后。自動顯示廣告2. 廣告顯示5秒后，自動消失。分析：1. 使用定時器來完成。setTimeout (執行一次定時器)2. 分析發現JQuery的顯示和隱藏動畫效果其實就是控制display3. 使用 ?show/hide方法來完成廣告的顯示*///入口函數，在頁面加載完成之后，定義定時器，調用這兩個方法$(function () {//定義定時器，調用adShow方法 3秒后執行一次setTimeout(adShow,3000);//定義定時器，調用adHide方法，8秒后執行一次setTimeout(adHide,8000);});//顯示廣告function adShow() {//獲取廣告div，調用顯示方法$("#ad").show("slow");}//隱藏廣告function adHide() {//獲取廣告div，調用隱藏方法$("#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>

五.?抽獎案例

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>jquery案例之抽獎</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="點擊開始"style="width:150px;height:150px;font-size:22px"onclick="imgStart()"> <inputid="stopID"type="button"value="點擊停止"style="width:150px;height:150px;font-size:22px"onclick="imgStop()"><script language='javascript' type='text/javascript'>//準備一個一維數組，裝用戶的像片路徑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; //循環定時器的idvar index; //隨機序列號$(function() {$("#startID").prop("disabled",false); //設置按鈕可用$("#stopID").prop("disabled",true); //設置結束按鈕不可用//給開始綁定單擊事件$("#startID").click(function () {//當開始循環時，開始按鈕不可用，結束按鈕可用$("#startID").prop("disabled",true); //設置按鈕不可用$("#stopID").prop("disabled",false); //設置結束按鈕不可用//設置定時器：20毫秒時間，執行隨機函數startId=setInterval(function() {//隨機生成角標index=Math.floor(Math.random()*7); //0.000-0.9999999 --->0.00-6.99999-->0-6$("#img1ID").prop("src",imgs[index]); //修改src}, 20);});//給結束綁定單擊事件$("#stopID").click(function() {$("#startID").prop("disabled",false); //設置按鈕可用$("#stopID").prop("disabled",true); //設置結束按鈕不可用//停止計時器clearInterval(startId);//給大相框的src更換值//$("#img2ID").prop("src",imgs[index]);$("#img2ID").prop("src",imgs[index]).hide(); //先添加隱藏//1秒后顯示//$("#img2ID").slideDown(1000); //添加動畫出現//$("#img2ID").fadeIn(1000);$("#img2ID").show(1000);});});</script> </body> </html>

六.?插件：增強JQuery的功能

?? ??? ?1. 實現方式：
?? ??? ??? ?1. $.fn.extend(object)?
?? ??? ??? ??? ?* 增強通過Jquery獲取的對象的功能 ?$("#id")
?? ??? ??? ?2. $.extend(object)
?? ??? ??? ??? ?* 增強JQeury對象自身的功能 ?$/jQuery

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的JQuery进阶学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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