jQuery动画效果、jQuery插件使用

2019年9月8日 112次阅读 来源: 小菜鸟

一、事件的绑定与解绑

1.1 jQuery的简单绑定

1.1.1 on(events,fn)事件(新版本使用)

为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法适用于当前或未来的元素，如用脚本创建的新元素。

参数说明：

  • events 一个或多个用空格分隔的事件类型
  • fn 该事件被触发时执行的函数
  • eg：
    <div id="box">hello  world!</div>
    <script src="js/jquery.js"></script>
    <script>
    $("#box").on("click",functiong(){
        // js 原生
      alert(this.innerText);
      // jQuery  
      alert($(this).text());
    });
    </script>

jQuery 的其他事件如下：
《jQuery动画效果、jQuery插件使用》

1.1.2 on (events,{data},fn)事件

参数说明：

  • events: 一个或多个用空格分隔的事件类型
  • data: 需要传递的参数，作为event.data的属性值
  • fn: 该事件被触发时执行的函数。
 <div id="box" style="width:100px;height:100px;border:1px solid red"></div>
  <script src="js/jquery.js"></script>
  <script>
    $("#box").on("mouseover",{
      "fruit":"banana",
      "play":"run"
    },function(event){
      $(this).text(event.data.fruit);
    });

1.1.3 bind(events ,fn)事件

为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。bind()方法适用于当前或未来的元素，如用脚本创建的新元素

参数说明：

  • events: 一个或多个用空格分隔的事件类型
  • fn: 该事件被触发时执行的函数。

eg：

    <div>从前从前</div>
<script src='js/jquery.js'></script>
<script>
  $("div").bind("mousemove",function(){
    console.log($(this).text());
  });
</script>

1.1.4 bind(events,{data},fn)事件

针对已经存在的元素进行事件的设置

  • events: 指定绑定的事件名称，多个参数用空格隔开
  • data: 作为event.data属性值传递给事件对象的额外数据对象
  • fn: 回调函数(事件处理函数)
    <button>点击</button>
  <script src='js/jquery.js'></script>
  <script>
    $("button").bind("click",{
      "info":"因为爱所以爱"
    },function(event){
      alert(event.data.info);
    });
  </script>

bind 支持的事件名称

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

1.2 jQuery多事件绑定

使用mouseover、mouseout作为案例;（mouseenter mouseleave）

1.2.1 直接事件的绑定

    <button>移动/离开</button>
  <script src='js/jquery.js'></script>
  <script>
  // 链式编程
    $("button").mousemove(function(){
      console.log("我来了！");
    }).mouseout(function(){
      console.log("我离开了！");
    });
  </script>

《jQuery动画效果、jQuery插件使用》

1.2.2 on 多事件绑定

     <button>移动/点击</button>
  <script src='js/jquery.js'></script>
  <script>
    $("button").on("mouseover click",function(){
      console.log("123");
    });
  </script>

1.2.3 on 给不同的事件绑定不同的函数

    <button>放上/点击/离开</button>
  <script src='js/jquery.js'></script>
  <script>
    $("button").on({
      mouseover:function(){
        console.log("I");
      },
      click:function(){
        console.log("LOVE");
      },
      mouseout:function(){
        console.log("YOU");
      }
    });
  </script>

《jQuery动画效果、jQuery插件使用》

1.3 jQuery事件解绑

Off(events, selector, fn)

  • events: 想要移除的事件名称
  • selector: 移除那一个DOM节点的事件(必须和传入的DOM节点一致)
  • fn: 想要移除的绑定函数

事件解绑分为以下几种情况：

  • $(selector).unbind(); 移除所有的事件，看下面的例子：
    <button>放上/点击/离开</button>
  <script src='js/jquery.js'></script>
  <script>
    $("button").on({
      mouseover:function(){
        console.log("I");
      },
      click:function(){
        console.log("LOVE");
      },
      mouseout:function(){
        console.log("YOU");
      }
    });
    // 移除button元素的所有事件包括事件函数
    $("button").unbind();

《jQuery动画效果、jQuery插件使用》

  • $(selector).unbind(“mouseover mouseout”);//移除指定的事件
    <button>放上/点击/离开</button>
  <script src='js/jquery.js'></script>
  <script>
    $("button").on({
      mouseover:function(){
        console.log("I");
      },
      click:function(){
        console.log("LOVE");
      },
      mouseout:function(){
        console.log("YOU");
      }
    });
    // 移除button元素的点击事件
    $("button").unbind("click");

《jQuery动画效果、jQuery插件使用》

  • $(selector).off(); // 移除所有 这个和上面的bind一样，这里就不在举例子了
  • $(selector).off(‘click’); // 移除点击事件（而不会移除其他的事件）,这里也不举例子了
  • $(“body”).off(events,selector，fn); // 移除事件，同时会移除函数

eg:

      function change(){
      console.log("I LOVE YOU")
    }
    $("body").on("mouseover click mouseout","button",change);
    $("body").off("mouseover","button",change);

《jQuery动画效果、jQuery插件使用》

二、jQuery模拟事件

  • 语法：trigger(type,data)
  • 解释一：type: 指定要模拟的事件名称
  • 解释二：data: 传递给事件处理函数的附加参数
     <!-- 模拟事件 -->
    <div>点击</div>
    <script src='js/jquery.js'></script>
    <script>
    $("div").on("click",function(){
     console.log("hello");
    }).trigger("click");
    </script>// 默认让该函数输出一次，是模拟的结果，然后点击数时在触发一次

《jQuery动画效果、jQuery插件使用》

三、动画显示与隐藏

3.1 show([speed,[easing],[fn]])

  • 语法：显示隐藏的匹配元素
  • 解释一：speed: “slow”, “normal”(400), or “fast”或毫秒数值(如：1000)
  • 解释二：easing: 默认是”swing”变加速运动，参数”linear”匀速运动
  • 解释三：fn: 在动画完成时执行的函数，每个元素执行一次
     <p hidden>爱你哟！</p>
    <script src='js/jquery.js'></script>
    <script>
      $("p").show(1000,"linear",function(){
        $(this).css({
          "fontSize":24,
          "fontWeight":"bold",
          "color":"orange"
        });
      });
    </script>

《jQuery动画效果、jQuery插件使用》

3.2 hide([speed,[easing],[fn])

  • 语法：隐藏显示的元素
  • 解释一：speed: “slow”, “normal”, or “fast”或毫秒数值(如：1000)
  • 解释二：easing: 默认是”swing”变加速运动，参数”linear”匀速运动
  • 解释三：fn: 在动画完成时执行的函数，每个元素执行一次
     <p>爱你哟！</p>
    <script src='js/jquery.js'></script>
    <script>
      $("p").hide(1000,"linear",function(){
        $(this).css({
          "fontSize":24,
          "fontWeight":"bold",
          "color":"orange"
        });
      });
    </script>

《jQuery动画效果、jQuery插件使用》

3.3 toggle([speed],[easing], [callback])

  • 语法：在被选元素上进行 hide() 和 show() 之间的切换

注意： 这里的例子就不举了，很简单，一句话：显示的时候让他消失，隐藏的时候让他结束

3.4 slideDown([speed],[easing],[fn])

  • 用法：向下展开动态显示元素

3.5 slideUp([speed,[easing],[fn]])

  • 用法：向上展开动态显示元素

以上两种合例：

     <button id="btn1">折叠</button>
     <button id="btn2">伸展</button>
    <div></div>
    <script src='js/jquery.js'></script>
    <script>
    $("#btn1").click(function(){
      $("div").slideUp()
    });
     $("#btn2").click(function(){
      $("div").slideDown()
    });
    </script>

《jQuery动画效果、jQuery插件使用》

3.6 fadeIn([speed],[easing], [callback])

  • 语法：淡入（隐藏）

3.7 fadeOut([speed],[easing], [callback])

  • 语法： 淡出（显示）

以上两个合例：

    <button id="btn1">淡入</button>
  <button id="btn2">淡出</button>
  <div></div>
  <script src='js/jquery.js'></script>
  <script>
    $("#btn1").click(function(){
      $("div").fadeIn(3000);
    });
     $("#btn2").click(function(){
      $("div").fadeOut(3000);
    });
  </script>

《jQuery动画效果、jQuery插件使用》

3.8 fodeTo(speed,opcity,fn)

  • 语法：将被选元素的不透明度逐渐地改变为指定的值
  • opcity:必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字

3.9 其他函数

fadeToggle和slideToggle

解释一下就行了：很简单，意思就是 有则显示没有，没有则有

四、自定义动画

4.1 animate(properties,[duration],[easing],[callback])

参数解释

  • properties: 设置相关动画需要的CSS的属性内容
  • duration: 设置自定义动画执行的时长(毫秒)
  • easing: 默认jQuery提供”linear” 和 “swing
  • callback: 自定义动画执行完毕后的回调函数
     <button>点击</button>
    <div style="width:50px;height:50px;background:red;"></div>
    <script src='js/jquery.js'></script>
    <script>
    $("button").click(function(){
      start();
      function start(){
        $("div").animate({height:"500px"},2000,"linear");
       $("div").animate({width:"500px"},2000,"linear");
       $("div").animate({height:"50px"},2000,"linear");
       $("div").animate({width:"50px"},2000,"linear",start);
      }

    });
    </script>

《jQuery动画效果、jQuery插件使用》

4.2 animate(properties,options)

参数解释

  • properties: 设置相关动画需要的CSS的属性内容
  • options包括以下属性

 duration – 设置自定义动画执行的时长(毫秒)
 easing – 默认jQuery提供”linear” 和 “swing”.
 complete – 自定义动画执行完毕后的回调函数
 queue – Boolean值,(默认值: true) 设定为false将使此动画不进入动画队列，会立刻执行

eg：

    <button>点击</button>
    <div style="width:50px;height:50px;background:red;position: relative;"></div>
    <script src='js/jquery.js'></script>
    <script>
    $("button").click(function(){
      start();
      function start(){
        $("div").animate({width:"200px",height:"200px"},{
        duration:3000
      }).animate({left:500},{duration:3000,queue:true}).animate({left:0,width:50,height:50},{duration:3000,queue:true,start})
    }
  });
    </script>

《jQuery动画效果、jQuery插件使用》

五、jQuery常见插件的使用

5.1 .data()跟.attr() 方法的区别

  • 获取数据的时候，attr方法需要传入参数，data方法可以不传入参数，这时候获取到的是一个js对象，即使没有任何data属性
  • 获取到的数据类型不同，attr方法获取到的数据类型是字符串(String)，data方法获取到的是相应的类型。
  • data方法获取到数据之后，我们使用一个对象来接收它，那么就可以直接操作(设置值或获取值)这个对象，而attr方法不可以
  • data-attribute属性会在页面初始化的时候放到jQuery对象，被缓存起来，而attr方法不会

5.2 全局jQuery对象扩展方法

        <input type="text" name="" value="">
    <script src='js/jquery.js'></script>
    <script>
        $.log = function(){
            setInterval(function(){
            //获取秒数保存在input中
               $("input").val(new Date().getSeconds());
            },1000)
        }
        $.log();
    </script>

《jQuery动画效果、jQuery插件使用》

5.3 普通jQuery DOM原型对象扩展方法

    <input type="text" name="" value="">
    <script src='js/jquery.js'></script>
    <script>
        $.fn.log = function(){
            setInterval(function(){
           // 获取1976年到现在的毫秒数
               $("input").val(new Date().getTime());
            },1000)
        }
        $.fn.log();
    </script>

《jQuery动画效果、jQuery插件使用》

5.4 第三方插件( laydate 插件 )

layDate 日期与时间组件

  1. 官网：http://laydate.layui.com/
  2. 如何使用laydate插件

 下载解压。
 将laydate整个文件放至项目的任意目录 ( 不要移动其文件结构，它们具有完整的依赖体系 )。
 只需在页面引入laydate.js即可

    <!-- 引用laydate的插件 -->
    <script src='laydate/laydate.js'></script>
    <input type="text" name="" value="">
    <script>
       laydate.render({
        // 指定元素
        elem: 'input'
          ,type: 'year'// 年选择
    });
    </script>

《jQuery动画效果、jQuery插件使用》

注意：还有其他的功能，这里小编就不一一写了，关键时太多了，要是你有用到这个东西，就去官网上进行查看

5.5 第三方插件( jQuery.lazyload.js )

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，浏览器将会在加载可见图片之后即进入就绪状态,在某些情况下还可以帮助降低服务器负担.

5.6 第三方插件( masonry )瀑布流

  • 官网: http://masonry.desandro.com/
  • Masonry是 一款非常强大的jQuery动态网格布局插件，可以帮助开 发人员快速开发瀑布流效果。很多网站都有使用这样的布局，比如：淘 宝的哇哦、花瓣网、蘑菇街
  • 具体用法：找官网

5.7 第三方插件(Swiper)

<link rel=”stylesheet” href=”lib/Swiper-3.3.1/dist/css/swiper.min.css”>

<script type=”text/javascript” src=”lib/jquery-1.11.3.js”></script>.

  • 引入swiper.jquery.min.js

<script type=”text/javascript” src=”lib/Swiper-3.3.1/dist/js/swiper.jquery.min.js”></script>

  • 具体用法：见官方

5.8 unslider(轮播插件)

小编懒语：这些插件并不是一时半会就学会的，如果你需要那个就去官方网站上进行查找，里面有压缩包，还有具体的用法

5.9 echarts

官方地址：http://echarts.baidu.com/

5.10 highcharts

官方地址：http://www.hcharts.cn/

5.11 插件封装模板

    <script>
        ;(function($) {
                $.fn.table = function(options) {
                    // 默认参数
                    var defaultOptions = {
                        
                    }

                    // 将两个对象合并成一个对象
                    var endOptions = $.extend(defaultOptions, options)

                    $(this).each(function() {
                        
                    })

                    return $(this);
                }
        })(jQuery);
    </script>

5.12 fullpage插件

官网：http://www.jq22.com/jquery-in…

六、总结

小编写的这节内容有水的部分，比如 插件，其实插件这部分需要自己去摸索，自己去官网查看，我只是列举了几个重要的插件，如果你有需要，就认真一点去官网上看看，或者自己写一个让小编我see see！

    原文作者：小菜鸟
    原文地址: https://segmentfault.com/a/1190000015880662
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞