本章简介：

[code]JavaScript与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。
虽然传统的JavaScript事件能够完成这些交互，但JQuery增强并扩展了基本的事件处理机制。
今天将通过对比JavaScript事件来认识JQuery中一些与JavaScript中相同的常用事件，
比如绑定事件，移出事件，复合事件。
还将认识JQuery中用于提高用户体验度，增强视觉效果的动画方法。

 

本章单词：

[code]bind           绑定
Unbind         解除绑定
Toggle        复合点击事件
FadeIn        淡入事件
FadeOut       淡出事件
Animate       动画

 

 

JQuery中的事件

[code]在JQuery中事件分为俩大类，
基础事件和复合事件JQuery中的基础事件和JavaScript中的事件几乎一样。
复合事件则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。

 

载入事件

所谓的载入事件，也就是window事件的一种，表示当用户执行某些会影响浏览器的操作时，而触发的事件。

在JQuery中，常用的window事件有文档载入事件，它对应的是ready（）方法。

 

 鼠标事件

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

click();           鼠标单击时   
mouseover();       鼠标指针移过时
mouseout();        鼠标指针移出时
mouseenter();      鼠标指针进入时
mouseleave();      鼠标指针离开时

 

 键盘事件

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

[code]keydown();         按下按键时
keyup();           释放按键时
keypress();        产生可打印的字符时

 

浏览器事件

[code]在浏览网页时，如果调整窗口大小，页面进行发生变化，这些都是JQuery中的resize()方法触发resize事件

$(selector).resize();

 

 绑定事件与移除事件

[code]在JQuery中绑定和移除事件也属于基础事件，它们主要用于绑定和移除其他的基础事件。
//绑定单个事件
$("h1").bind("mouseover",function () {
        //编写事件代码
});

[code]  //绑定多个事件
$("h1").bind({
    mouserover:function () {
        //编写事件代码
    },
    mouserout:function () {
        //编写事件代码
    }
});

[code]//移除事件
$("h1").unbind();

 

复合事件

在JQuery中有两个复合事件，它们和 ready类似，都是JQuery自定义的方法。

[code]// hover（） 方法相当于 mouseover 和 mouseleave 事件的组合。
$("h1").hover(function () {
        //鼠标移入事件
},function () {
        //鼠标移出事件
})

// toggle() 分为带参数和不带参数
//带参数模拟鼠标连续点击事件
$("h1").toggle(
function () { 第一次点击  },
function () { 第二次点击  },
function () { 第三次点击  }
);

//不带参数时，和show()、hide()方法的作用一样，切换元素的可见状态。
$("h1").toggle();

// toggleClass() 方法实现样式的切换
$("h1").toggleClass("写好的类样式");

 

 

JQuery中的动画

[code]JQuery中的所有动画效果都可以设置三种速度参数，
分别是 slow、normal、fast对应着 0.6秒、0.4秒、0.2秒。
当使用关键字作为参数时需要使用双引号括起来，使用数值时则不需要。

 

控制元素的显示与隐藏

在JQuery中，可以使用 show（）方法控制元素的显示，除此之外，它还能定义显示元素时的效果，如显示速度。

[code]//参数可以使用毫秒值，也可以用单词表示

$("h1").show(150);
$("h1").show("fast");

$("h1").hide(550);
$("h1").hide("slow");

 

 改变元素的透明度

[code] //改变元素的透明度如果元素是隐藏的，可以使用 fadeIn() 方法控制元素的淡入，它与 show() 方法相似。
$("h1").fadeIn(550);
$("h1").fadeIn("slow");

//如果元素是显示的，可以使用 fadeOut() 方法控制元素的淡出，它与hide() 方法相似。
$("h1").fadeOut(550);
$("h1").fadeOut("slow");

 

 改变元素的高度

 

[code]//若元素的 display 属性属性为none,当调用 slideDown() 方法时，这个元素会从上向下延伸显示，而 slideUp() 方法正好相反。
$("h1").slideUp(550);
$("h1").slideDown("slow");

 

 自定义动画

在JQuery中，除了以上学习的几种动画，我们自己还可以创建自定义动画，来实现各种比较复杂的动画。

[code]$("h1").animate({params},speed,callback);
params : 必须参数，定义形成动画的 css3 属性
speed  : 可选参数，和系统动画一样属性
callbak: 可选参数，动画完成后执行的函数名称

$("h1").animate({"widtn":"1500px"},2000);

 

本章总结

[code]1、在JQuery中，提供了 click方法等一系列基础事件绑定方法，支持window事件，鼠标事件、键盘事件等基础事件的绑定。
2、使用 bind（）方法可以一次性绑定一个或多个事件处理方法，使用unbind() 方法可以移除事件绑定。
3、在JQuery中，提供了 hover（）和toggle（）等复合事件方法
4、使用 show() 方法和 hide()方法控制元素的显示与隐藏、
使用 fadeIn() 方法 和 fadeout() 方法控制元素的淡入和淡出、
使用 slideUp() 方法和 slideDown() 方法实现元素的收缩与展开、
使用animate () 方法实现自定义动画。’

 

阅读更多