1.动画

1.1三种方式显示和隐藏元素

默认显示和隐藏方式
1.show([speed,[easing],fn])：显示
       参数：
               1.speed:动画的速度。三个预定义的值（“slow”,“normal”,“fast”）或表示动画时长的毫秒值（如：1000）
               2.easing：用来指定切换效果，默认值是"swing"，可用参数"linear"
                        *swing:动画执行效果是先慢，中间快，最后慢
                        *linear:动画指向性是速度是均匀的
2.hidden([speed,[easing],fn])：隐藏
3.toggle([speed,[easing],fn])：反转
滑动显示和隐藏方式
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])
代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
    
    
          $("#btn1").click(function () {
    
    
           //$("#div1").show("normal","swing")
          // $("#div1").slideDown("normal","swing")
          $("#div1").fadeIn("normal","swing")
          }

          )
           $("#btn2").click(function () {
    
    
               // $("#div1").hide("slow","linear")
               // $("#div1").slideUp("slow","linear")
               $("#div1").fadeOut("slow","linear")
           })
            $("#btn3").click(function () {
    
    
             // $("#div1").toggle("normal","swing")
             //    $("#div1").slideToggle("normal","linear")
                $("#div1").fadeToggle("normal","linear")
            })

        })
    </script>
</head>
<body>
<div id="div1" style="width: 1000px;height: 1000px;background-color: red"></div>
<input type="button" id="btn1" value="显示">
<input type="button" id="btn2" value="隐藏">
<input type="button" id="btn3" value="切换">
</body>
</html>

遍历
   1.js遍历方式
       for(初始化值;循环结束条件;步长)
   2.jq遍历方式
       1.jq对象.each(callback)
       2.$.each(Object,[callback])
       3.for…of
样例展示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-3.5.1.min.js"></script>
 <script>
     $(function () {
    
    
         var city = $("#city li");
         // //方式一 Js遍历
         // for(var i=0;i<city.length;i++)
         // {
    
    
         //     console.log(i+' '+city[i].innerHTML+' '+$(city[i]).html())
         // }
       //方式二 jQuery对象.each
       //   city.each(function (index,value) {
    
    
       //       if(value.innerHTML=="襄阳")
       //           return true ;//这是的true相当于continue false相当于break
       //    alert(index+' '+$(value).html())
       //   })
       //   //方式三 $.each(对象，callback（回调函数）)
       //   $.each(city,function (index,value) {
    
    
       //       alert(index+' '+value.innerHTML)
       //   })
         //方式四 for  of
         for(c of city)
         {
    
    
             alert(c.innerHTML)
         }
     })
 </script>
</head>
<body>
<ul id="city">
 <li>武汉</li>
 <li>襄阳</li>
 <li>宜昌</li>
 <li>十堰</li>
</ul>
</body>
</html>

事件绑定
   1.jQuery标准事件绑定
       jq对象.事件方法(回调函数)
       注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
   on绑定事件/off解除绑定
       jq对象.on(“事件名称”,回调函数)
       jq对象.off(“事件名称”) 如果off不传递任何参数，则将组件上的所有事件全部解绑

jQuery高级部分

1.动画

猜你喜欢