jQuery动画效果、jQuery插件使用

Jensony

2019-06-28

关注关注

一、事件的绑定与解绑

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 日期与时间组件

官网：http://laydate.layui.com/
如何使用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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，浏览器将会在加载可见图片之后即进入就绪状态,在某些情况下还可以帮助降低服务器负担.

官网地址：http://www.jq22.com/jquery-in...
这些东西小编真的讲不通，只有通过官网自己去看，还有真的是太多了

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

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

5.7 第三方插件(Swiper)

官网地址：https://www.swiper.com.cn/
引入swiper.css

<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>