锋利的jQuery Day4

JavaScript jQuery

1 jQuery中的事件

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的时间来处理的。

1.1 加载DOM

在常规JavaScript代码中使用window.onload()方法来为DOM元素添加事件。在jQuery中使用$(document).ready()方法，该方法是事件模块中最重要的一个函数，极大地提高Web应用程序的响应速度。
在使用中，两者有一些细微的区别：

• 执行时机
  window.onload方法实在页面所有元素（包括元素的所有关联文件）完全加载到浏览器才执行，即JavaScript此时才可以访问网页中的任何元素。
  jQuery中的$(document).ready()方法注册的时间处理程序，在DOM完全就绪时就可以被调用。此时网页所有元素都能被jQuery访问，但不意味着元素关联文件都下载完成。
  jQuery中的onload()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对项目则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，会在元素内容加载完毕后触发。
• 多次使用
  JavaScript的onload事件一次只能保存对一个函数的引用，会自动覆盖前面的函数。
  $(document).ready()方法可以在现有的行为上追加新行为，行为函数会根据注册的顺序一次执行。
• 简写方式

$(document).ready(function(){
    //编写代码
})

可以简写为：

$(function(){
    //编写代码
})

另外$(document)也可以简写为$()。当$()不带参数是，默认参数为document：

$().ready(function(){
    //编写代码
})

1.2 事件绑定

文档装载完成后，如果想为元素绑定事件来完成某些操作，可以使用bind()方法来对匹配元素进行特定事件绑定：

bind( type [, data] , fn)；

第一个参数是事件类型，

第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数则是用来绑定处理函数的。

注：jQuery中的事件绑定类型比JavaScript中少了"on"，如jqery中鼠标点击事件click()，JavaScript中为onclick()。

1.3 合成事件

jQuery有两个合成事件——hover()方法和toggle()方法。

• hover()方法
  语法结构为：

hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发第一个函数（enter），当光标移出这个元素时，会触发第二个函数（leave）。

• toggle()方法
  语法结构为：

toggle(fn1,fn2,...fnN);

toggle()方法用于模拟鼠标连续单击事件。第一次点击元素，触发指定的第1个函数（fn1），第二次点击同一元素时，触发指定的第2个函数（fn2），之后以此触发，直到最后一个。随后的每次点击都会重复对这些函数的轮番调用。
toggle()方法还可以用来切换元素的可见状态。

1.4 事件冒泡

• 事件对象

由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象比较困难。故jQuery进行了封装，在程序中使用事件对象非常简单，只需要为函数添加一个参数：

$("element").bind("click",function(event){  //event：事件对象
    //
});

当点击element元素时，事件对象就被创建，且只有事件处理函数能访问到该对象，函数执行完毕后，事件对象被销毁。

• 停止事件冒泡
  停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。jQuery中提供了stopPropagation()方法来停止事件冒泡。

• 阻止默认行为

网页的元素有自己的默认行为，例如，单击超链接会跳转，点击提交按钮后表单会提交等。在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。
想同时对事件对象停止冒泡和默认行为i额，可以在事件处理函数中返回false。

1.5 事件对象的属性

• event.type
  该属性是可以获取到事件的类型。
• event.preventDefault()方法
  作用是阻止默认的事件默认行为。
• event.stopPropagation()方法
  作用是阻止事件的冒泡。
• event.target
  作用是获取到触发事件的元素。
• event.pageX和event.pageY
  作用是获取到光标相对页面的x坐标和y坐标。
• event.which
  作用是在鼠标点击事件中获取到鼠标的左中右建，在键盘事件中获取键盘的按键。

$("a").click(function(event){
        alert(event.which);//1=左键，2=中键，3=右键
        return false;
    })

$("a").click(function(event){
    alert(event.which);
    return false;
})

• event.metaKey
  为键盘事件获取ctrl按键。

1.6 移除事件

• 移除按钮元素上以前注册的事件

unbind()方法语法结构：

unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数。
1. 如果没有参数，则删除所有绑定的事件。
2. 如果提供了事件类型作为参数，则只删除该类型的绑定事件。
3. 如果把在绑定时传递的处理函数作为第2个参数，则只有这个指定的事件处理函数会被删除。

对于只需要触发一次，随后就立刻解除绑定的情况，jQuery提供了一种简写方法——one()方法，one()方法可以为元素绑定处理函数。当处理函数触发一次后立刻被删除。其语法结构与bind()方法类似：

one( type,[data],fn);

1.7 模拟操作

• 常用模拟
  在jQuery中，可以使用trigger()方法完成模拟操作。例如，模拟点击操作：

$('#btn').trigger("click");

也可以直接用简化写法click()，可以达到同样的效果：

$('#btn').click();

• 触发自定义事件
  trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以出发自定义名称的事件。

• 传递数据

trigger(type,[data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发还是用户触发。

• 执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作，例如：

$("input").trigger("focus");

不仅会触发<input>元素绑定的focus事件，也会使<input>元素本身得到焦点(这是浏览器的默认操作)。
如果只是想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery的另一个方法————triggerHandler()方法：

$("input").triggerHandler("focus");

1.8 其他用法

bind()方法不仅能为元素绑定浏览器支持的具体相同名称的事件，也可以绑定自定义事件。

• 绑定多个事件类型
  例如可以为元素一次性绑定多个事件类型：

$(function(){
   		$('#btn').trigger("click");
   		$("div").bind("mouseover mouserout",function(){
   		$(this).toggleClass("over");
        });
 });

• 添加事件命名空间，便于管理
  例如可以把为元素绑定的多个事件类型用命名空间规范起来。
• 相同事件名称，不同命名空间执行方法
  例如可以为元素绑定相同的事件类型，然后以命名空间的不同来按需调用。

2 jQuery中的动画

2.1 show()方法和hide()方法

在HTML文档中，为一个元素调用hide()方法，会将该元素的display样式改为"none"。在元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态。

show()方法和hide()方法不带任何参数时，想到于css("display","none/block")，作用是立即隐藏或显示元素，不会有任何动画。
可以为他们指定速度参数：slow为600毫秒，normal为400毫米，fast为200毫秒，当然也可以直接输入数字，单位是毫秒。

2.2 fadeIn()方法和fadeOut()方法

fadeIn()和fadeOut()只改变元素的透明度。fadeOut()方法会在指定的一段时间内降低元素的透明度，直到元素完全消失（“display:none”）；fadeIn()方法则相反。

2.3 slideUp()方法和slideDown()方法

slideUp()和slideDown()方法只会改变元素的高度。slideDown()方法，作用是将元素由上至下延伸显示。slideUp()方法正好相反，由下到上缩短隐藏。

注： jQuery中任何动画效果，都可以指定三种速度参数，即slow，normal，fast，分别是600，400，200毫秒，当使用关键字时需要加引号，如show("slow")，但使用数字时不需要加引号，例如show(1000)，单位为毫秒。

2.4 自定义动画方法animate()

animate()语法结构：

animate(params,speed,callback);

参数说明：
1. params： 一个包含样式属性及值的映射，如{property1:"value1",property2:"value2",...}。
2. speed：速度参数，可选。
3. classback：在动画完成时执行的函数，可选。

• 自定义简单动画

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"500px"},3000);
    })
})

本段代码，首先为id为“panel”的元素创建了一个点击事件，然后对元素加入animate()方法，使元素在3000毫秒内，距离左边距500像素，即右移500像素。
- 累加、累减动画

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"+=500px"},3000);
    })
})

与上面的区别在于“+=500”表示在当前位置累加，“-=500”表示在当前位置累减。

• 同时执行多个动画

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"+=500px",height:"200px"},3000);
    })
})

本代码表示元素在向右移动的同时，放大元素高度。

• 顺序执行多个动画

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"+=500px"},3000);
		$(this).animate({height:"200px"},3000);
    })
})

本代码意思就是先执行向右移动，然后再放大它的高度。

2.5 动画回调函数

可以使用回调函数（callback）对非动画方法实现排队。只需将方法写在最后一个动画的回调函数里即可：

$(function() {
    $("#panel").css("opacity", 0.5);
    $("#panel").click(function() {
        $(this).animate({
                left: "+=500px",
                height: "200px",
                opacity: "1"
            }, 3000)
            .animate({
                top: "200px",
                width: "200px"
            }, 3000, function() {
                $(this).css("border", "5px solid blue");
            })
    })
})

注：callback回调函数适用于jQuery所有的动画效果方法。意思就是在动画完成后执行回调函数体内的代码。

2.6 停止动画和判断是否处于动画状态

• 停止元素的动画

使用stop()方法，可以在某处停止动画，语法结构如下：

stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选参数，为Boolean值。clearQueue代表是否要清除未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。
第一个参数clearQueue为true，程序会把当前元素接下来尚未执行完的动画队列都清空。
第二个参数gotoEnd，通常用于后一个动画需要在前一个动画的末状态的情况，可以使用stop(flase,true)这种方式来让动画直接到末状态，执行下一动画。
stop(true,true)，即停止当前动画并直接到当前动画的末状态，且清空动画队列。

• 判断元素是否处于动画状态

为避免动画积累而导致动画与用户的行为不一致。解决办法是判断元素是否正处在动画状态，代码如下：

if(! $(element).is(":animated")){   //判断元素是否正处于动画状态
        //如果当前没有进行动画，则添加新动画
        ｝

该判断方法在animate()动画中经常被使用，要牢记。

• 延迟动画

将队列中的函数延迟操作，使用delay()方法，可传入数字参数，单位为毫秒。

2.7 其他动画方法

• toggle(speed,[callback])方法

toggle()方法可切换元素的可见状态。如果可见切换为隐藏，反之一样。

• slideToggle(speed,[easing],[callback]）方法

sideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。实际上就是用toggle()方法和slideUp()、slideDown()方法一起使用。

• fadeTo(speed,opacity,[callback])方法

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定值。该动画只能调整元素的不透明度，即匹配的元素的高度和宽度不会发生改变。

• fadeToggle(speed,[easing],[callback])方法

fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。该动画效果只能调整元素的不透明度。实际上就是用toggle()方法和fadeOut()、fadeIn()方法一起使用。

2.8 动画方法概括

• 改变样式属性

• 动画队列

一个元素上的动画效果：
当在一个animate()方法中应用多个属性时，动画是同时发生的；
当以链式写法应用动画方法时，动画是按照顺序发生的。

多组元素上的动画效果：
默认情况下，动画都是同时发生的；
当以回调形式应用动画方式时，动画是按照回调顺序发生的。