jQuery动画效果、jQuery插件使用

阅读量：5912 次

发布时间：2019-06-19

本文共 4563 字，大约阅读时间需要 15 分钟。

一、事件的绑定与解绑

1.1 jQuery的简单绑定

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

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

参数说明：

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

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

eg：


    
     hello  world!

jQuery 的其他事件如下：

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

参数说明：

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

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

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

1.1.3 bind(events ,fn)事件

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

参数说明：

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

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

eg：


    
     从前从前

1.1.4 bind(events,{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

1.2 jQuery多事件绑定

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

1.2.1 直接事件的绑定

图片描述

1.2.2 on 多事件绑定

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

图片描述

1.3 jQuery事件解绑

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

官网：

如何使用laydate插件

 下载解压。

 将laydate整个文件放至项目的任意目录 ( 不要移动其文件结构，它们具有完整的依赖体系 )。

 只需在页面引入laydate.js即可

图片描述

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

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

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

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