jQuery学习笔记04--淡入、淡出，fadein，fadeout，fadeto，弹窗广告，自定义动画及节奏，stop和delay方法，动画帧率，图标特效，无限循环滚动，添加、删除、复制、替换节点

最新推荐文章于 2021-07-08 14:20:02 发布

心湖中的石子

最新推荐文章于 2021-07-08 14:20:02 发布

阅读量586

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43745804/article/details/109266468

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、下拉菜单（动画队列），停止动画队列

1、stop（）停止动画队列
在jQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，然后再执行动画。

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    li{list-style: none;}
    .nav{ height:50px;width: 300px; margin: 100px auto; background-color: green;}
    .nav>li{ width:100px; height:50px; line-height: 50px; text-align: center; float:left}
     .sub{ background-color: purple; display: none;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
           //监听一级菜单的移入事件
           $(".nav>li").mouseenter(function(){
               //拿到二级菜单
               var $sub=$(this).children(".sub");
               $sub.stop();
               $sub.slideDown(500);
           });
           
           //监听一级菜单的移出事件
           $(".nav>li").mouseleave(function(){
            var $sub=$(this).children(".sub");
            $sub.stop();
            $sub.slideUp(500);
           });
      });    

    </script> 
<head>
</head>
<body>    
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>
</html>

2、淡入、淡出、但出到fadeIn，fadeOut，fadeTo

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    div{width: 200px; height: 200px; background-color: green;display: none;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
           $("button").eq(0).click(function (){
                $("div").fadeIn(500,function(){
                    console.log("淡入完毕");
                })
           });
           $("button").eq(1).click(function (){
                $("div").fadeOut(500,function(){
                    console.log("淡出完毕");
                })
            });
           $("button").eq(2).click(function (){
                $("div").fadeToggle(500,function(){
                    console.log("切换完毕");
                })
           });
           $("button").eq(3).click(function (){
            $("div").fadeTo(500,0.5,function(){
                    console.log("淡出完毕");
                })
            })
      });    

    </script> 
<head>
</head>
<body>    
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
</body>
</html>

3、淡入、淡出的弹窗广告

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    div{width: 400px; height: 300px; background-color: green;}
    .ad{position: fixed; right: 0; bottom: 0; display: none;}
    .ad>span{ display: inline-block; width: 35px; height: 35px; 
    background-color: red; position: absolute; top:0;right: 0;}
    
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
          //监听span的click事件
          $(".ad>span").click(function(){
              $(".ad").slideUp(500);
          });

          //执行广告动画
          //动画队列，依次执行
          $(".ad").stop().slideDown(500).fadeOut(500).fadeIn(500);
           
      });    

    </script> 
<head>
</head>
<body>    
    <div class="ad">
        <img src="images/gril06.jpg" width="400" height="300">
        <span></span>
    </div>
</body>
</html>

3、自定义动画及动画的节奏

1、animate（）
接受四个参数
第一个参数：接收一个对象，可以在对象指定变动中修改属性
第二个参数：指定动画时长
第三个参数：指定动画节奏，默认就是swing
第四个参数：指定动画执行后的回调函数

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    div{width: 100px; height: 100px; margin-top: 10px; background-color: green;}
    .two{background-color: blue;}
    
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
          $("button").eq(0).click(function (){
              $(".one").animate({
                  width:500,//设置自定义动画，使得width属性到500
              },500,function(){
                  console.log("自定义动画执行完毕");
              });

              $(".one").animate({
                  marginLeft:500,//设置自定义动画，使得width属性到500
              },500,"linear",function(){//linear线性动画，缓动（动画节奏）
                  console.log("自定义动画执行完毕");
              });

          });
          $("button").eq(1).click(function (){
                $(".one").animate({
                    //width:"+=100",//累加属性通过+=来实现
                    width:"hide"
                },500,function(){
                    console.log("自定义动画执行完毕");
                });
            });
          $("button").eq(2).click(function (){
              
          });
           
      });    

    </script> 
<head>
</head>
<body>    
    <button>操作属性</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

4、stop和delay方法

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    .one{width: 100px; height: 100px; background-color: green;}
    .two{width: 500px; height: 10px;background-color: blue;}
    
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
          $("button").eq(0).click(function (){
              $(".one").animate({
                  width:500,//设置自定义动画，使得width属性到500
              },500).delay(2000).animate({height:500},500);//执行完第一段动画后等待2000毫秒再执行下一段动画

             
          });
          $("button").eq(1).click(function (){
                $(".one").stop(true);//true为立即停止，false为动画全部完成再停止
                //和上面这个stop同样效果，立即停止当前的和后续的所有动画
                $(".one").stop(true,false);
                //立即完成当前的，继续执行后续动画
                $(".one").stop(false,true);
                //立即完成当前的，停止执行后续动画
                $(".one").stop(true,true);
                //立即停止当前动画，继续执行后续动画
                $(".one").stop();
                $(".one").stop(false);
                $(".one").stop(false,false);
            });
      });    

    </script> 
<head>
</head>
<body>    
    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

5、设置动画帧率

jQuery.fx.interval=100
数值越大越卡，越小越流畅

6、图标特效

jQuery.fx.interval=100
数值越大越卡，越小越流畅

<html>
    <style type="text/css">
    *{margin:0; padding: 0; list-style: none;}
    ul{width: 400px; height: 250px; border: 1px solid gray; margin: 100 auto;}
    ul>li{width: 100px; height: 50px; margin-top:50px;text-align: center; float: left; overflow: hidden;}
    ul>li>span{display: inline-block; width: 24px; height: 24px; background: url("images/img1.PNG") no-repeat 0 0;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
          //遍历所有的li
          $("li").each(function(index,ele){
                //生成新的图片位置
                var $url="url(\"images/img1.PNG\") no-repeat 0 "+(index*-24)+"px";//一张图片的不同位置
                //设置新的图片位置
                $(this).children("span").css("background",$url);  
          });
          //监听li移入事件
          $("li").mouseenter(function(){
                    //将图标往上移动
                    $(this).children("span").animate({
                        top:-50
                    },500,function(){
                        //将图标往下移动
                        $(this).css("top","50px");
                        //将图片复位
                        $(this).animate({
                            top:0
                        },500)
                    });
                });
      });    

    </script> 
<head>
</head>
<body>    
    <ul>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>新浪</p></li>
        <li><span></span><p>搜狐</p></li>
        <li><span></span><p>人民</p></li>
   
    
    </ul>

</body>
</html>

7、无限循环滚动

<html>
    <style type="text/css">
    *{margin:0; padding: 0; list-style: none;}
    div{ width: 400px;height: 150px; border:1px solid black;margin:100 auto;overflow: hidden;}
    ul{height: 150px; width: 1200px;  background-color: black;}
    ul>li{float:left; }
    img{width: 200px; height: 150px;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
          //1.定义一个偏移变量保存一个值
          var offset=0;
          //2.让图片滚动起来
          var timer;
          function autoPlay(){
            timer=setInterval(function(){
              offset+=-10;
              if(offset<=-800){//800是4张照片的宽度（200*4）
                  offset=0;
              }
              $("ul").css("marginLeft",offset);
            },50)
          }
          autoPlay();
          //3、监听li的移入和移出事件
          $("li").hover(function(){
              //停止移动，关闭定时器就可以了
              clearInterval(timer);
              //给非当前li添加蒙版
              $(this).siblings().fadeTo(100,0.5)
              //去除当前选中的蒙版
              $(this).fadeTo(100,1)
          },function(){
              //继续定时器
              autoPlay();
              $("li").fadeTo(100,1)

              
          });
      });    

    </script> 
<head>
</head>
<body>    
    <div>
        <ul>
            <li><img src="images/gril01.jpg"></li>
            <li><img src="images/gril02.jpg"></li>
            <li><img src="images/gril03.jpg"></li>
            <li><img src="images/gril04.jpg"></li>
            <li><img src="images/gril01.jpg"></li><!--后面两张图片和最开始两张图片一致-->
            <li><img src="images/gril02.jpg"></li>
        </ul>
    </div>

</body>
</html>

在这里插入图片描述

8、添加节点

1、内部插入
append（content|fn）
插入一个新节点到父节点的最后一个
appendTo（content）
插入一个新节点到父节点的最后一个，但是是由子元素调用
prepend（content|fn）
插入一个新节点到父节点的第一个
prependTo（content）
插入一个新节点到父节点的第一个，但是是由子元素调用

2、外部插入
after（content|fn）
添加到指定元素外部的后面
before（content|fn）
添加到指定元素外部的前面
insertAfter（content）
添加到指定元素外部的后面,由子元素调用
insertBefore（content）
添加到指定元素外部的前面,由子元素调用

<html>
    <style type="text/css">
   
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
         $("button").click(function(){
             //内部插入append
             $li=$("<li>我是新创建的节点</li>");
            //$("ul").append($li);
            //$("ul").prepend($li);
            //$li.appendTo("ul");

            //$("ul").after($li);//添加到指定元素外部的后面
            $li.insertAfter("ul")//添加到指定元素外部的后面,由子元素调用
         });
      });    

    </script> 
<head>
</head>
<body>    
    <button>添加节点</button>
    <ul>
        <li>我是第1个节点</li>
        <li>我是第2个节点</li>
        <li>我是第3个节点</li>
    </ul>
    

</body>
</html>

9、删除节点

remove（[expr]）
正则匹配删除
empty（）
清空指定节点
detach（[expr]）
正则匹配删除和emty作用一致

<html>
    <style type="text/css">
   
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
         $("button").click(function(){
            //$("ul").empty();//删除全部节点
            //$("div").empty();//删除全部节点
            //$("div").remove();//删除指定节点
            //$("li").detach(".item");//删除匹配节点
            $("li").remove(".item");//删除匹配节点
         });
      });    

    </script> 
<head>
</head>
<body>    
    <button>删除节点</button>
    <ul>
        <li class="item">我是第1个节点</li>
        <li>我是第2个节点</li>
        <li class="item">我是第3个节点</li>
        <li>我是第4个节点</li>
        <li class="item">我是第5个节点</li>
        <div>
            <p>我是段落</p>
        </div>
    </ul>
    

</body>
</html>

10、替换节点

replaceWith（content|fn）
用content替换调用者，用旧元素来调用
replaceAll（selector）
用新元素来调用

<html>
    <style type="text/css">
   
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
         $("button").click(function(){
           //新建一个元素
           $h6=$("<h6>我是标题h6</h6>");
           //替换元素
           //$("h1").replaceWith($h6);
           $h6.replaceAll($("h1"));
         });
      });    

    </script> 
<head>
</head>
<body>    
    <button>替换节点</button>
    <h1>我是标题1</h1>
    <h1>我是标题2</h1>
    <p>我是段落</p>
    

</body>
</html>

11、复制节点

深复制及浅复制都使用clone方法
clone（true|false），false为浅复制，true为深复制
浅复制仅能复制节点，深复制不仅可以复制节点还可以复制节点上的行为

<html>
    <style type="text/css">
   
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
      $(function (){
          //浅复制
         $("button").eq(0).click(function(){
           $clone2=$("li").eq(1).clone(false);//false表示浅复制
           $("ul").append($clone2);// 将复制的元素添加到ul中
         });
          //深复制
          $("button").eq(1).click(function(){
          $clone2=$("li").eq(1).clone(true);//false表示浅复制
           $("ul").append($clone2);// 将复制的元素添加到ul中
         });
         $("li").click(function(){
             alert($(this).html());
         })

         
      });    

    </script> 
<head>
</head>
<body>    
    <button>浅复制节点</button>
    <button>深复制节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
    

</body>
</html>

12、闭包

1、闭包是立即执行的函数（jQuery的本质是一个闭包）
2、为什么要使用闭包来实现
为了避免多个框架的冲突
3、jQuery如何让外界访问内部定义的局部变量
window.xxx=xxx
4、jquer为什么要给自己传递window变量

心湖中的石子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记04--淡入、淡出，fadein，fadeout，fadeto，弹窗广告，自定义动画及节奏，stop和delay方法，动画帧率，图标特效，无限循环滚动，添加、删除、复制、替换节点

1、下拉菜单（动画队列），停止动画队列1、stop（）停止动画队列在jQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，然后再执行动画。<html> <style type="text/css"> *{margin:0; padding: 0;} li{list-style: none;} .nav{ height:50px;width: 300px; margin: 100px auto; background-color:
复制链接

扫一扫