## 今日內容：
1. JQuery 高級
1. 影片
2. 遍歷
3. 事件系結
4. 案例
5. 插件
## JQuery 高級
1. 影片
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])
2. 滑動顯示和隱藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
3. 淡入淡出顯示和隱藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])
2. 遍歷
1. js的遍歷方式
* for(初始化值;回圈結束條件;步長)
2. jq的遍歷方式
1. jq物件.each(callback)
1. 語法：
jquery物件.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一個元素物件
* this：集合中的每一個元素物件
2. 回呼函式回傳值：
* true:如果當前function回傳為false，則結束回圈(break)，
* false:如果當前function回傳為true，則結束本次回圈，繼續下次回圈(continue)
2. $.each(object, [callback])
3. for..of: jquery 3.0 版本之后提供的方式
for(元素物件 of 容器物件)
3. 事件系結
1. jquery標準的系結方式
* jq物件.事件方法(回呼函式)；
* 注：如果呼叫事件方法，不傳遞回呼函式，則會觸發瀏覽器默認行為，
* 表單物件.submit();//讓表單提交
2. on系結事件/off解除系結
* jq物件.on("事件名稱",回呼函式)
* jq物件.off("事件名稱")
* 如果off方法不傳遞任何引數，則將組件上的所有事件全部解綁
3. 事件切換：toggle
* jq物件.toggle(fn1,fn2...)
* 當單擊jq物件對應的組件后，會執行fn1.第二次點擊會執行fn2.....
* 注意：1.9版本 .toggle() 方法洗掉,jQuery Migrate（遷移）插件可以恢復此功能，
1 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
4. 案例
1. 廣告顯示和隱藏
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>廣告的自動顯示與隱藏</title> 6 <style> 7 #content{width:100%;height:500px;background:#999} 8 </style> 9 10 <!--引入jquery-->11 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>12 <script>13 /*14 需求：15 1. 當頁面加載完，3秒后，自動顯示廣告16 2. 廣告顯示5秒后，自動消失，17 18 分析：19 1. 使用定時器來完成，setTimeout (執行一次定時器)20 2. 分析發現JQuery的顯示和隱藏影片效果其實就是控制display21 3. 使用 show/hide方法來完成廣告的顯示22 */23 24 //入口函式，在頁面加載完成之后，定義定時器，呼叫這兩個方法25 $(function () {26 //定義定時器，呼叫adShow方法 3秒后執行一次27 setTimeout(adShow,3000);28 //定義定時器，呼叫adHide方法，8秒后執行一次29 setTimeout(adHide,8000);30 });31 //顯示廣告32 function adShow() {33 //獲取廣告div，呼叫顯示方法34 $("#ad").show("slow");35 }36 //隱藏廣告37 function adHide() {38 //獲取廣告div，呼叫隱藏方法39 $("#ad").hide("slow");40 }41 42 43 ? 44 </script>45 </head>46 <body>47 <!-- 整體的DIV -->48 <div>49 <!-- 廣告DIV -->50 <div id="ad" style="display: none;">51 <img style="width:100%" src="../img/adv.jpg" />52 </div>53 54 <!-- 下方正文部分 -->55 <div id="content">56 正文部分57 </div>58 </div>59 </body>60 </html>
2. 抽獎
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery案例之抽獎</title> 6 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> 7 8 <script language='javascript' type='text/javascript'> 9 10 /* 11 分析： 12 1. 給開始按鈕系結單擊事件 13 1.1 定義回圈定時器 14 1.2 切換小相框的src屬性 15 * 定義陣列，存放圖片資源路徑 16 * 生成亂數，陣列索引 17 18 19 2. 給結束按鈕系結單擊事件 20 1.1 停止定時器 21 1.2 給大相框設定src屬性 22 23 */ 24 var imgs = ["../img/man00.jpg", 25 "../img/man01.jpg", 26 "../img/man02.jpg", 27 "../img/man03.jpg", 28 "../img/man04.jpg", 29 "../img/man05.jpg", 30 "../img/man06.jpg", 31 ]; 32 var startId;//開始定時器的id 33 var index;//隨機角標 34 $(function () { 35 //處理按鈕是否可以使用的效果 36 $("#startID").prop("disabled",false); 37 $("#stopID").prop("disabled",true); 38 39 40 //1. 給開始按鈕系結單擊事件 41 $("#startID").click(function () { 42 // 1.1 定義回圈定時器 20毫秒執行一次 43 startId = setInterval(function () { 44 //處理按鈕是否可以使用的效果 45 $("#startID").prop("disabled",true); 46 $("#stopID").prop("disabled",false); 47 48 49 //1.2生成隨機角標 0-6 50 index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999 51 //1.3設定小相框的src屬性 52 $("#img1ID").prop("src",imgs[index]); 53 54 },20); 55 }); 56 57 58 //2. 給結束按鈕系結單擊事件 59 $("#stopID").click(function () { 60 //處理按鈕是否可以使用的效果 61 $("#startID").prop("disabled",false); 62 $("#stopID").prop("disabled",true); 63 64 65 // 1.1 停止定時器 66 clearInterval(startId); 67 // 1.2 給大相框設定src屬性 68 $("#img2ID").prop("src",imgs[index]).hide(); 69 //顯示1秒之后 70 $("#img2ID").show(1000); 71 }); 72 }); 73 74 75 ? 76 ? 77 </script> 78 79 </head> 80 <body> 81 82 <!-- 小像框 --> 83 <div style="border-style:dotted;width:160px;height:100px"> 84 <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/> 85 </div> 86 87 <!-- 大像框 --> 88 <div 89 style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"> 90 <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/> 91 </div> 92 93 <!-- 開始按鈕 --> 94 <input 95 id="startID" 96 type="button" 97 value="點擊開始" 98 style="width:150px;height:150px;font-size:22px"> 99 100 <!-- 停止按鈕 -->101 <input102 id="stopID"103 type="button"104 value="點擊停止"105 style="width:150px;height:150px;font-size:22px">106 107 108 </body>109 </html>
5. 插件：增強JQuery的功能
1. 實作方式：
1. $.fn.extend(object)
* 增強通過Jquery獲取的物件的功能 $("#id")
2. $.extend(object)
* 增強JQeury物件自身的功能 $/jQuery
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39152.html
標籤：jQuery
上一篇：JQuery基礎筆記