App下載

jQuery的高級教程:動畫、遍歷和事件綁定實例

猿友 2021-01-11 10:51:52 瀏覽數(shù) (2112)
反饋

學(xué)習(xí)目標:

  • 學(xué)會如何使用jQuery的動畫效果
  • 學(xué)會如何進行遍歷和事件綁定
  • 熟練應(yīng)用jQuery進行相關(guān)復(fù)雜操作

學(xué)習(xí)內(nèi)容:

一、jQuery高級

1、動畫:三種方式顯示和隱藏元素
  • 默認顯示和隱藏元素show([speed,[easing],[fn]])hide([speed,[easing],[fn]])toggle([speed,[easing],[fn]])
  • 滾動顯示和隱藏元素slideDown([speed,[easing],[fn]])slideUp([speed,[easing],[fn]])slideToggle([speed,[easing],[fn]])
  • 淡入淡出顯示和隱藏元素fadeIn([speed,[easing],[fn]])fadeOut([speed,[easing],[fn]])fadeToggle([speed,[easing],[fn]])
  • 參數(shù)speed:速度,三種預(yù)定義的值(“slow”,“normal”,“fast”)或表示動畫時長的毫秒數(shù)值(如:1000)easing:用來指定切換效果,默認是"swing",可用參數(shù)"linear"swing:動畫執(zhí)行時效果是“先慢,中間快,又慢”linear:動畫執(zhí)行時的速度是勻速的fn:在動畫完成時執(zhí)行的函數(shù),每個元素執(zhí)行一次
2、遍歷
  • js遍歷方式for(初始化值;循環(huán)結(jié)束條件;步長)
  • jq遍歷方式j(luò)q對象.each(callback)$.each(object,[callback])for…of jQuery3.0之后提供的版本
3、事件綁定
  • jQuery標準的綁定方式j(luò)q對象.事件方法(回調(diào)函數(shù));如果調(diào)用事件方法,不傳遞回調(diào)函數(shù),則觸發(fā)瀏覽器默認行為表單對象.submit(); // 讓表單提交
  • on綁定事件/off解綁事件jq對象.on(事件,回調(diào)函數(shù));jq對象.off(事件); 如果不傳遞事件名稱,則解綁所有的事件
  • 事件切換:togglejq對象.toggle(fn1,fn2…); 多次點擊依次執(zhí)行傳遞的函數(shù)
4、案例
  • 廣告顯示和隱藏需求當(dāng)頁面加載完成后,3秒后,自動顯示廣告廣告顯示5秒后,自動消失分析使用定時器來完成 setTimeOut()執(zhí)行一次的定時器jQuery的顯示和隱藏的動畫效果其實就是控制display屬性使用show/hide相關(guān)方法完成廣告的顯示
  • 抽象需求點擊開始,小相框快速切換點擊停止,小相框停止切換分析給開始按鈕綁定單擊事件定義循環(huán)定時器切換小相框的src屬性定義數(shù)組,存放圖片資源路徑生成隨機數(shù),數(shù)組索引給結(jié)束按鈕綁定單擊事件停止定時器給大相框設(shè)置src屬性
5、插件:增強jQuery功能
  • 實現(xiàn)方式$.fn.extend(object);增強通過jQuery獲取對象的功能 $("#id")$.extend(object);增強jQuery對象自身的功能 $/jQuery

學(xué)習(xí)產(chǎn)出:

1、 動畫
<!DOCTYPE html>
<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>
       // 隱藏div
       function hideFn() {
           /*$("#showDiv").hide("slow","swing",function () {
              // alert("隱藏了。。。");
          })*/
           // 默認方式
           // $("#showDiv").hide("slow","swing");
           // 滑動方式
           // $("#showDiv").slideDown("slow","swing");
           // 淡入淡出方式
           $("#showDiv").fadeOut("slow","swing");
      }
?
       // 顯示div
       function showFn() {
           /*$("#showDiv").show("slow","linear",function () {
              // alert("顯示了。。。");
          })*/
           // 默認方式
           // $("#showDiv").show("slow","swing");
           // 滑動方式
           // $("#showDiv").slideUp("slow","swing");
           // 淡入淡出方式
           $("#showDiv").fadeIn("slow","swing");
      }
?
       // 切換顯示隱藏div
       function toggleFn() {
           /*$("#showDiv").toggle("slow","swing",function () {
              // alert("切換顯示隱藏了。。。");
          })*/
           // 默認方式
           // $("#showDiv").toggle("slow","swing");
           // 滑動方式
           // $("#showDiv").slideToggle("slow","swing");
           // 淡入淡出方式
           $("#showDiv").fadeToggle("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>
2、遍歷
<!DOCTYPE html>
<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 () {
           // 獲取所有ul下面的li
           var citys = $("#city li");
           // 遍歷li
           // js遍歷方式
           for (var i = 0;i < citys.length; i++){
               // 獲取內(nèi)容
               alert(i+":"+citys[i].innerHTML);
          }
?
           // jq遍歷方式
           citys.each(function (index,element) {
               // 獲取li對象,直接用this
               // alert(this.innerHTML);
               // alert($(this).html());
               // 獲取li對象,在回調(diào)函數(shù)中定義參數(shù)index(索引) element(元素對象)
               // alert(index+":"+element.innerHTML);
               // alert(index+":"+$(element).html());
?
               // 判斷如果是上海,結(jié)束循環(huán)
               if ("上海"==$(this).html()){
                   // 如果當(dāng)前回調(diào)函數(shù)返回值是false,終止循環(huán)
                   // 如果當(dāng)前回調(diào)函數(shù)返回值是true,終止本次循環(huán),繼續(xù)下次循環(huán)
                   return false;
                   // return true;
              }
               alert(index+":"+$(element).html());
          });
?
           $.each(citys,function () {
               alert($(this).html());
          });
?
           for (li of citys){
               alert($(li).html());
          }
?
      });
?
   </script>
</head>
<body>
<ul id="city">
   <li>北京</li>
   <li>上海</li>
   <li>天津</li>
   <li>重慶</li>
</ul>
</body>
</html>
3、 事件綁定與解綁
<!DOCTYPE html>
<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 () {
           // 獲取name對象,綁定click事件
           // $("#name").click(function () {
           //     alert("我被點擊了!");
           // });
?
           // 給name對象綁定鼠標移動元素之上事件與鼠標移除事件
           // $("#name").mouseover(function () {
           //     alert("鼠標來了!");
           // });
           // $("#name").mouseleave(function () {
           //     alert("鼠標走了!");
           // });
?
           // 簡化操作,鏈式編程
           // $("#name").mouseover(function () {
           //     alert("鼠標來了");
           // }).mouseleave(function () {
           //     alert("鼠標走了");
           // })
?
?
           $("#name").focus();// 讓文本輸入框獲得焦點
           // 表單對象.submit()   // 讓表單提交
      })
?
   </script>
</head>
<body>
<input id="name" type="text" value="綁定點擊事件">
</body>
</html>
?
<!DOCTYPE html>
<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 () {
           // 使用on綁定事件
           $("#btn").on("click",function () {
               alert("我被點擊了!");
          });
?
           // 使用off解綁事件
           $("#btn2").click(function () {
               // 解除btn按鈕的click綁定事件
               $("#btn").off("click");
          });
      });
?
?
?
   </script>
</head>
<body>
<input id="btn" type="button" value="使用on綁定點擊事件">
<input id="btn2" type="button" value="使用off解綁點擊事件">
</body>
</html>
?
<!DOCTYPE html>
<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 src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       $(function () {
           $("#btn").toggle(function () {
               // 改變背景色為綠色
               $("#myDiv").css("backgroundColor","green");
          },function () {
               // 改變背景色為黃色
               $("#myDiv").css("backgroundColor","yellow");
          })
      })
   </script>
</head>
<body>
?
   <input id="btn" type="button" value="事件切換">
   <div id="myDiv" style="width:300px;height:300px;background:pink">
      點擊按鈕變成綠色,再次點擊黃色
   </div>
</body>
</html>
4、案例1:廣告顯示和隱藏
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>廣告的自動顯示與隱藏</title>
   <style>
       #content{width:100%;height:500px;background:#999}
   </style>
?
   <!--引入jquery-->
   <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
   <script>
       $(function () {
           // 定義定時器,3秒之后顯示廣告
           setTimeout(adShow,3000);
           // 定義定時器,5秒之后隱藏廣告
           setTimeout(adHide,8000);
      });
       // 顯示廣告
       function adShow() {
           $("#ad").show("slow");
      }
       // 隱藏廣告
       function adHide() {
           $("#ad").hide("slow");
      }
   </script>
</head>
<body>
<!-- 整體的DIV -->
<div>
   <!-- 廣告DIV -->
   <div id="ad" style="display: none;">
       <img style="width:100%" src="../img/adv.jpg" />
   </div>
?
   <!-- 下方正文部分 -->
   <div id="content">
      正文部分
   </div>
</div>
</body>
</html>
5、案例2:抽獎
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>jquery案例之抽獎</title>
   <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
   <script>
       var img = ["../img/man00.jpg",
           "../img/man01.jpg",
           "../img/man02.jpg",
           "../img/man03.jpg",
           "../img/man04.jpg",
           "../img/man05.jpg",
           "../img/man06.jpg"];
       $(function () {
           $("#startID").prop("disabled",false);
           $("#stopID").prop("disabled",true);
?
           var startId;
           var index;
           $("#startID").click(function () {
               $("#startID").prop("disabled",true);
               $("#stopID").prop("disabled",false);
               startId = setInterval(function () {
                   index = Math.floor(Math.random()*7);
                   $("#img1ID").prop("src",img[index])
              },20);
          });
           $("#stopID").click(function () {
               $("#startID").prop("disabled",false);
               $("#stopID").prop("disabled",true);
               clearInterval(startId);
               $("#img2ID").prop("src",img[index]).hide();
               $("#img2ID").show(1000);
          });
      })
   </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>
?
<!-- 大像框 -->
<div
       style="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>
?
<!-- 開始按鈕 -->
<input
       id="startID"
       type="button"
       value="點擊開始"
       style="width:150px;height:150px;font-size:22px"
       onclick="imgStart()">
?
<!-- 停止按鈕 -->
<input
       id="stopID"
       type="button"
       value="點擊停止"
       style="width:150px;height:150px;font-size:22px"
       onclick="imgStop()">
?
?
<script language='javascript' type='text/javascript'>
   //準備一個一維數(shù)組,裝用戶的像片路徑
   var imgs = [
       "../img/man00.jpg",
       "../img/man01.jpg",
       "../img/man02.jpg",
       "../img/man03.jpg",
       "../img/man04.jpg",
       "../img/man05.jpg",
       "../img/man06.jpg"
  ];
?
</script>
</body>
</html>
6、01-jQuery對象進行方法擴展
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>01-jQuery對象進行方法擴展</title>
   <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       // 使用jQuery插件,給jq添加兩個方法,check()選中所有復(fù)選框,uncheck()取消所有選中
       // 定義jQuery對象的插件
       $.fn.extend({
           // 定義一個check方法,所有的jq對象都可以調(diào)用該方法
           check:function () {
               this.prop("checked",true);
          },
           uncheck:function () {
               this.prop("checked",false);
          }
      });
       $(function () {
           $("#btn-check").click(function () {
               $("input[type='checkbox']").check();
          });
           $("#btn-uncheck").click(function () {
               $("input[type='checkbox']").uncheck();
          });
      })
   </script>
</head>
<body>
<input id="btn-check" type="button" value="點擊選中復(fù)選框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="點擊取消復(fù)選框選中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">籃球
<input type="checkbox" value="volleyball">排球
?
</body>
</html>
7、02-jQuery全局進行方法擴展
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>01-jQuery對象進行方法擴展</title>
   <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       //對全局方法擴展2個方法,擴展min方法:求2個值的最小值;擴展max方法:求2個值最大值
       $.extend({
           max:function (a,b) {
               return a >= b ? a : b;
          },
           min:function (a,b) {
               return a <= b ? a : b;
          }
      });
?
       var max = $.max(2,3);
       alert(max);
       var min = $.min(1,8);
       alert(min);
   </script>
</head>
<body>
</body>
</html>


0 人點贊