jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。

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

参数说明：

events 一个或多个用空格分隔的事件类型

fn 该事件被触发时执行的函数

eg：

    
hello  world!
    
    

jQuery 的其他事件如下：

参数说明：

events: 一个或多个用空格分隔的事件类型

data: 需要传递的参数，作为event.data的属性值

fn: 该事件被触发时执行的函数。

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

events: 指定绑定的事件名称，多个参数用空格隔开

data: 作为event.data属性值传递给事件对象的额外数据对象

fn: 回调函数(事件处理函数)

    点击
  
  

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

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

    移动/离开
  
  

     移动/点击
  
  

    放上/点击/离开
  
  

Off(events, selector, fn)

events: 想要移除的事件名称

selector: 移除那一个DOM节点的事件(必须和传入的DOM节点一致)

fn: 想要移除的绑定函数

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

$(selector).unbind(); 移除所有的事件，看下面的例子：

    放上/点击/离开
  
  

$(selector).unbind("mouseover mouseout");//移除指定的事件
    放上/点击/离开
  
  


$(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模拟事件

语法：trigger(type,data)
解释一：type: 指定要模拟的事件名称
解释二：data: 传递给事件处理函数的附加参数

     
    
点击
    
    // 默认让该函数输出一次，是模拟的结果，然后点击数时在触发一次

三、动画显示与隐藏
3.1 show([speed,[easing],[fn]])

语法：显示隐藏的匹配元素
解释一：speed:  "slow", "normal"(400),  or "fast"或毫秒数值(如：1000)
解释二：easing: 默认是"swing"变加速运动，参数"linear"匀速运动
解释三：fn: 在动画完成时执行的函数，每个元素执行一次

     
    
    

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

语法：隐藏显示的元素
解释一：speed:  "slow", "normal",  or "fast"或毫秒数值(如：1000)
解释二：easing: 默认是"swing"变加速运动，参数"linear"匀速运动
解释三：fn: 在动画完成时执行的函数，每个元素执行一次

     
爱你哟！
    
    

3.3 toggle([speed],[easing], [callback])
语法：在被选元素上进行 hide() 和 show() 之间的切换
注意： 这里的例子就不举了，很简单，一句话：显示的时候让他消失，隐藏的时候让他结束
3.4 slideDown([speed],[easing],[fn])
用法：向下展开动态显示元素
3.5 slideUp([speed,[easing],[fn]])
用法：向上展开动态显示元素
以上两种合例：
     折叠
     伸展
    

    
    

3.6 fadeIn([speed],[easing], [callback])
语法：淡入（隐藏）
3.7  fadeOut([speed],[easing], [callback])
语法： 淡出（显示）
以上两个合例：
    淡入
  淡出
  

  
  

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:  自定义动画执行完毕后的回调函数

     点击
    

    
    

4.2 animate(properties,options)
参数解释

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

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

    
    

五、jQuery常见插件的使用
5.1 .data()跟.attr() 方法的区别

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

5.2 全局jQuery对象扩展方法
        
    
    

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

5.4 第三方插件( laydate 插件 )
layDate 日期与时间组件

官网：http://laydate.layui.com/

如何使用laydate插件

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

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


.
引入swiper.jquery.min.js

具体用法：见官方
5.8 unslider(轮播插件)
小编懒语：这些插件并不是一时半会就学会的，如果你需要那个就去官方网站上进行查找，里面有压缩包，还有具体的用法
5.9 echarts
官方地址：http://echarts.baidu.com/
5.10 highcharts
官方地址：http://www.hcharts.cn/
5.11 插件封装模板
    
5.12 fullpage插件
官网：http://www.jq22.com/jquery-in...
六、总结
小编写的这节内容有水的部分，比如 插件，其实插件这部分需要自己去摸索，自己去官网查看，我只是列举了几个重要的插件，如果你有需要，就认真一点去官网上看看，或者自己写一个让小编我see see！