六、JS06 jQuery 中的事件与动画

六、jQuery 中的事件与动画

6.1 jQuery 中的事件

在 jQuery 中，事件总体分为两大类：基础事件和复合事件

jQuery 中的简单事件，与 javaScript 中的事件几乎一样，只是对应的方法名称略微不同

复合事件则是截取组合了用户操作，以多个函数作为响应而自定义的处理程序

6.1.1 基础事件

jQuery 中，基础事件和 JavaScript 中的事件一致，提供了特有的事件方法和处理函数绑定

1、载入事件

• 载入事件就是 window 事件的一种
• window 事件表示当用户执行某些会影响浏览器的操作时触发的事件
• 在 jQuery中，常用的 window 事件有文档载入事件：ready()

2、鼠标事件

• 鼠标事件就是当用户在文档上移动或单击鼠标时而产生的事件
• 常用鼠标事件的方法

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的 click 事件	鼠标单击时
mouseover()	触发或将函数绑定到指定元素的 mouseover 事件	鼠标指针移过时
mouseout()	触发或将函数绑定到指定元素的 mouseout 事件	鼠标指针移出时
mouseenter()	触发或将函数绑定到指定元素的 mouseenter 事件	鼠标指针进入时
mouseleave()	触发或将函数绑定到指定元素的 mouseleave 事件	鼠标指针离开时

• mouseover() 和 mouseenter() 的区别
  • 鼠标指针进入被选元素时，mouseover() 和 mouseenter() 都会被触发
  • 如果鼠标指针在其被选元素的子元素上来回进入时，则会触发 mouseover() 事件
  • 鼠标指针在其被选元素的子元素上来回进入时,不会触发 mouseenter() 事件
• mouseout() 和 mouseleave() 的区别
  • 鼠标指针离开被选元素时，mouseout() 和 mouseleave() 都会被触发
  • 如果鼠标指针在其被选元素的子元素上来回离开，则会触发 mouseout() 事件
  • 鼠标指针在其被选元素的子元素上来回离开,不会触发 mouseleave() 事件

3、键盘事件

• 当键盘聚焦到 Web 浏览器时，用户每次按下或者释放键盘上的按键时，都会产生事件
• 常用键盘事件的方法

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的 keydown 事件	按下按键时
keyup()	触发或将函数绑定到指定元素的 keyup 事件	释放按键时
keypress()	触发或将函数绑定到指定元素的 keypress 事件	产生可打印的字符时

• keypress 事件
  • 较为高级的文本事件
  • 它的事件对象指定产生的字符，而不是按下的所有键
  • 例如 Enter、Shift 这些键，不会产生字符，则不会触发 keypress 事件

4、浏览器事件

• 当浏览器窗口被调整大小时，页面就会有一些变化
• 这些就是通过 jQuery 中的 resize() 方法触发 resize 事件
• resize() 语法如下

$(selector).resize();

6.1.2 绑定事件与移除事件

在 jQuery 中，绑定事件与移除事件也属于基础事件

主要用于绑定或移除其他基础事件，也可以绑定或移除自定义事件

有时需要对同一个元素进行多个不同的事件处理

例如，鼠标指针移至某一个元素上时出现一种特效，离开时又显示另一种特效

这时就需要使用绑定事件方法 bind() 一次性绑定或移除一个或多个事件

既然有绑定事件，就有移除事件方法 unbind()

1、绑定事件

• jQuery 中，如果需要为匹配的元素同时绑定一个或多个事件，则可以使用 bind() 方法
• 语法格式如下

bind(type,[data],fn);

• bind() 方法的参数说明

参数类型	参数含义	描述
type	事件类型	主要包括 click、mouseover等基础事件，此外，还可以自定义事件
[data]	可选参数	作为 event.date 属性值传递给事件对象的额外数据对象，该参数不是必需的
fn	处理函数	用来绑定处理函数

• 1) 绑定单个事件

  • 使用 bind() 方法为元素绑定单个事件
  • 语法格式如下

  $(selector).bind("事件",处理函数);
  

  • 示例，为div 绑定点击事件

  $(document).ready(function() {
      $("div").bind("click",function() {
         //执行代码 
      });
  });
  

• 2) 同时绑定多个事件

  • bind() 方法还可以同时绑定多个事件
  • 使用 bind() 方法同时绑定多个事件 语法

  $(selector).bind({事件1:处理函数1,事件2:处理函数2,...});
  

  • 示例，为 div 绑定多个事件

  $(document).ready(function() {
      $("div").bind({mouseover:function(){执行代码},mouseout:function(){执行代码}});
  });
  

2、移除事件

• jQuery 中，可以使用移除事件的方法，把绑定的事件通过一定的办法取消
• 使用 unbind() 方法移除元素的单个或多个事件
• 语法格式如下

unbind([type],[fn]);

• unbind() 方法有两个参数，这两个参数不是必需的
• 当 unbind() 不带参数时，表示移除所绑定的全部事件
• unbind() 方法的参数说明

参数类型	参数含义	描述
[type]	事件类型	主要包括 click、mouseover、mouseout 等基础事件，此外，还可以自定义事件
[fn]	处理函数	用来接触绑定的处理函数

6.1.3 复合事件

jQuery 中有两个复合事件方法—— hover() 和 toggle() 方法

1、hover() 方法

• hover() 方法用于模拟鼠标指针移入和移出事件，此方法有两个函数
• 当鼠标指针移至元素上时，会触发指定的第一个函数
• 当鼠标指针移出这个元素时，则会触发第二个函数
• 语法格式如下

hover(enter,leave);

• enter 和 leave 为两个执行函数

2、toggle() 方法

• jQuery 中，toggle() 分为带参的方法和不带参的方法
• 带参方法用于模仿鼠标连续点击事件
  • 第一次单击元素，触发第一个函数，第二次点击元素，触发第二个函数
  • 如果点击次数超过了函数数量，则会对现有函数进行循环
• toggle() 不带参数时，与 show() 和 hide() 方法作用一样
  • 用于切换元素的可见状态
  • 如果元素是可见的，则切换为隐藏状态
  • 如果元素是隐藏的，则切换为显示状态
• 示例

$(document).ready(){
    //点击 div 切换背景颜色
    $("div").toggle(
    function(){$("div").css("background","#ff0000");},
    function(){$("div").css("background","#00ff00");},
    function(){$("div").css("background","#0000ff");}
    );
    
    //点击div，如果div显示，则隐藏，如果隐藏，则显示
    $("div").click(function() {
        $("div").toggle();
    });
}

3、toggleClass() 方法

• toggleClass() 可以对样式进行切换
• 实现事件触发时，某元素在 “加载某个样式” 和 “移除某个样式” 之间切换
• 语法格式如下

toggleClass(className);

• 如果此元素没有 className 样式，则会应用样式
• 如果元素应用了此 className 样式，则会移除此样式

​

6.2 jQuery 中的动画

6.2.1 控制元素显示与隐藏

前面已经学习了 show() 和 hide() 方法的使用，但都是最基础的应用

下面讲解以下 show() 和 hide 的完整的语法应用

1、控制元素显示

• 在 jQuery 中，除了可以显示元素外，还可以定义显示元素时的效果，如显示速度
• show() 语法格式如下

$(selector).show([speed],[callback]);

• show() 的参数说明

参数	描述
speed	可选。规定元素从隐藏到完全可见的速度。默认为 “0” 可能值：毫秒（如1000）、slow、normal、fast 在设置速度的情况下，元素从隐藏到完全可见的过程，会逐渐地 改变高度、宽度、外边距、内边距和透明度
callback	可选。show() 函数执行完之后，要执行的函数

2、控制元素隐藏

• 在 jQuery 中hide() 方法是控制元素隐藏，与 show() 方法对应
• 除了控制元素的隐藏，它和 show() 方法相同，可以定义隐藏元素时的效果
• hide() 语法格式如下

$(selector).hide([speed],[callback]);

• hide() 方法参数设置与 show() 方法参数相同
• 绝大多数情况下，hide() 方法与 show() 方法总是在一起使用

6.2.2 改变元素透明度

jQuery 中提供的动画效果相对丰富，除了显示和隐藏元素外

还有改变元素透明度和高度

fadeIn() 和 fadeOut() 方法则是控制元素的透明度

1、控制元素淡入

• jQuery 中，如果元素时隐藏的，则可以使用 fadeIn() 方法控制元素淡入
• 它与 show() 方法相同，可以定义元素淡入时的效果，如显示速度
• fadeIn() 语法格式如下

$(selector).fadeIn([speed],[callback]);

• fadeIn() 方法的参数说明

参数	描述
speed	可选。规定元素从隐藏到完全可见的速度。默认为 “0” 可能值：毫秒（如1000）、slow、normal、fast 在设置速度的情况下，元素从隐藏到完全可见的过程，会逐渐地 改变其透明度，给视觉淡入的效果
callback	可选。fadeIn() 函数执行完之后，要执行的函数 除非设置了 speed 参数，否则不能设置该参数

2、控制元素淡出

• 在 jQuery 中，fadeOut() 方法可以控制元素淡出，与 fadeIn() 方法对应
• 除了控制元素的淡出，它和 fadeIn() 方法相同，可以定义淡出元素时的效果
• fadeOut() 语法格式如下

$(selector).fadeOut([speed],[callback]);

• 其参数设置方法与 fadeIn() 方法相同

6.2.3 改变元素高度

• 在 jQuery 中，用于改变元素高度的方法是 slideUp() 和 slideDown()
• 若元素的 display 属性值为 none，当调用 slideDown() 方法时，这个元素会从上向下延伸展示
• 而 slideUp() 方法正好相反，元素从下到上缩短直至隐藏
• slideUp() 和 slideDown() 语法格式如下

$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[callback]);

• 与 fadeIn() 和 fadeOut() 方法中的参数设置是一致的
• speed 参数规定元素显示或隐藏的速度
• callback 参数表示函数执行完毕后要执行的函数

6.2.4 show() 和 hide()、fadeIn() 和 fadeOut()、slideUp() 和 slideDown() 之间的区别

• show() 和 hide()：当设置时间时，效果是从下至上或从右下到左上的慢慢折叠缩小或放大元素，来显示或隐藏元素
• fadeIn() 和 fadeOut()：当设置时间时，效果是通过逐渐改变元素间的透明度来显示或隐藏元素
• slideUp() 和 slideDown()：当设置时间时，效果是通过将元素逐渐向上或向下移动，来显示或隐藏元素
• 但是三者之间，显示时，先显示元素（及元素 display:block），在执行各自的效果
• 隐藏时，先执行各执的效果，再隐藏，（及元素 display:none）