jQuery中的事件和动画学习笔记

最新推荐文章于 2025-02-25 09:51:17 发布

转载最新推荐文章于 2025-02-25 09:51:17 发布 · 585 阅读

文章标签：

#jquery

jQuery 专栏收录该内容

6 篇文章

订阅专栏

JS和THML之间的交互是通过用户和浏览器操作页面是引发的事件来处理的。当文档或者他的某些元素发生某些变化或者操作时，浏览器会自动生成一个事件。虽然传统的js事件能完成这些交互，但jQuery增加并扩展了基本事件处理机制。

加载DOM

1、jQuery 中用$(document).ready()方法代替传统的window.onload方法。需要注意，两者是有差别的。
window.onload方法是在网页中所有元素（包括元素的所有关联文件）完成加载到浏览器后执行，即js此时才能访问网页中的元素；$(document).ready()在DOM完成就绪时就可以被调用，例如对于一个大型的图库网站，只要DOM记载完毕，不需要等待所有图片下载完毕就能操作，不过图片的高度和宽度这样的属性此时不一定有效。
2、onload事件一次只能确保对一个函数的引用，他会自动用后面的函数覆盖前面的函数。

window.onload = one;
window.onload = two;   //只执行two函数

$(document).ready()方法会在现有的行为上追加新的行为，这些行为会根据注册的顺序依次执行。

$(document).ready(){       //先执行one()，再执行two()
    one();
}
$(document).ready(){
    two();
}

3、 $(document).ready(function(){})可以简写成$ (function(){})或者$().ready(function(){})。

事件绑定

bind(),接收3个参数，第一个是事件类型，第二个是可选参数，作为event.data属性值传递给事件对象的额外数据对象，第三个是用来绑定的处理函数。

//点击标题，如果内容隐藏则显示，如果内容显示则隐藏
$(function(){
    $("#panel h5.head").bind("click",function(){
        if($(this).next().is(:visible)){
            $(this).next().hide();
        }else{
            $(this).next().show();
        }
    })
});

可以把上面的例子简写成：

$(function(){
    $("#panel h5.head").click(function(){
        if($(this).next().is(:visible)){
            $(this).next().hide();
        }else{
            $(this).next().show();
        }
    })
});

合成事件

1、hover(enter,leave),用于模拟光标悬浮事件。当光标移动到元素上是，触发enter函数，当光标移除这个元素时，触发leave函数。

$(function(){
    $(#panel h5.head).hover(function(){
        $(this).next().ahow();
    },function(){
        $(this).next.hide();
    });
});

2、toggle(fn1,fn2,…fnN)，用于模拟鼠标连续单击事件。第一次单击触发第一个函数，第二次触发第二个，依次类推。

$(function(){
    $(#panel h5.head).toggle(function(){
        $(this).next().ahow();
    },function(){
        $(this).next.hide();
    });
});

另外一个作用，切换元素可见状态，上面的代码还可以写成：

$(function(){
    $(#panel h5.head).toggle(function(){
        $(this).next().toggle();
    },function(){
        $(this).next.toggle();
    });
});

事件对象的属性

1、event.tyep，获取事件的类型

$("a").click(function(event){
    alert(event.type);    //"click"
    return false;   //阻止链接跳转
})

2、event.preventDefault()，阻止默认的事件行为。
3、event.stopPropagation()，阻止事件的冒泡。
4、event.target，获取到触发事件的元素。
5、event.pageX和event.pageY，获取到页面相对于x坐标和y坐标。
6、event.which，在鼠标单击事件中获取鼠标的左中右键；在键盘事件中获取按键。

移除事件

unbind(),第一个参数是事件类型，第二个参数是将要移除的函数。
（1）、如果没有参数，删除所有绑定的事件；
（2）、如果提供了事件类型作为参数，只删除该类型的绑定事件；
（3）、如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理程序函数会被删除。
另外，如果只需触发一次，使用one()方法。当处理函数绑定一次后立即删除，即在每个对象上，事件处理函数只会执行一次，用法和bind()类似。

jQuery中的动画

1、show()和hide()方法

为一个元素调用hide()方法，会将该元素的display样式改为none，修改之前会先记住原先display的属性值。show()方法将元素的display属性值设置为先前的显示状态。
可以指定参数slow,normal,fast或直接指定显示的速度（毫秒）。show(“slow”),hide(100)

2、fadeIn()和fadeOut()方法

fadeOut()方法在指定的一段时间内降低元素的不透明度，直到元素完全消失（display:none）.fadeIn()方法则相反。

3、slideUp()和slideDown()方法

只会改变元素的高度。如果一个元素的display属性值为none，调用slideDown()将这个元素又上至下延伸显示，slideUp相反，元素将由下到上缩短隐藏。

4、自定义动画方法animate()

animate(params,speed,callback)。
params:一个包含样式属性及值的映射；
speed:速度，可选；
callback:在动画完成时执行的函数，可选。
综合动画，点击后让他向右移动的同时增大他的高度，并将他的不透明度从50%变换到100%，然后再让他从上到下移动，同时让他的宽度变大，当完成这些效果后，让他以淡出的方式隐藏。

$(function(){
    $("#span1").css("opacity","0.5");     
    $("#span1").click(function(){
        $(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
            .animate({top:"200px",width:"200px"},300)
            .fadeOut("slow");
    });
});

css()方法并不会加入到动画序列中，而是立即执行。可以使用回调函数对非动画方法实现排队。

$(function(){
    $("#span1").css("opacity","0.5");     
    $("#span1").click(function(){
        $(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
            .animate({top:"200px",width:"200px"},300,function(){
                $(this).css("border","5px solid blue");
            })
    });
});

5、停止动画好判断是否处于动画状态

stop([clearQueue],[gotoEnd])。
两个参数都是布尔值，第一个表示是否要清空未执行的动画序列，设置为true把接下来尚未执行完的动画序列都清空；第二个表示是否直接将正在执行的动画跳转到末状态，通常用于后一个动画需要基于前一个动画末状态的情况。
直接使用stop()方法，会立即停止当前正在执行的动画，如果接下来还有动画等待继续执行，则以当前状态开始接下来的动画。
JQuery只能设置正在执行的动画的末状态！

$(element).is(":animated")      //判断元素是否正处于动画状态