JQuery事件与动画总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery事件与动画总结相关的知识,希望对你有一定的参考价值。

1、加载DOM

 

1.1.window事件

 

window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行

 

$(function(){}) ……:只是等待标签完毕,即可执行

 

区别:

① window.onload需在网页所有内容加载完成之后执行(包括图片音频)
文档就绪函数:只需要在网页DOM结构加载以后便执行
② window.onload只能写一个,写多个只会执行最后一个
文档就绪函数:可以写多个,也不会被覆盖

window.onload() = function () {

    }
    $(function () {
      $("li").bind("click", function () {
        $(this).css("background","red");
      });
    });
    $(function () {
      $("div").bind("click", function () {
        $(this).css("background", "red");
      });
    });

2、JQuery中的事件

 

①事件绑定快捷方式

$("button:first").click(function(){
alert("666");
});

(1)使用on绑定事件

 

① 使用on 进行单事件绑定

$("button").on("click",function(){
//$(this) 取到当前调用事件函数的对象
console.log($(this).html())
})

② 使用on同时为多个事件,绑定同一函数

$("button").on("click mouseover",function(){
console.log($(this).html())
})

③ 调用函数时,传入自定义参数

$("button").on("click",{name:"哈哈哈"},function(event){
                    //使用event.data.属性名找到传入的参数
                    console.log(event.data.name)

④ 使用on进行多时间多函数绑定

$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver");
alert("哈哈哈")
}
});

⑤ 使用on进行事件委派:将原本需要绑定到某元素上的事件,改为绑定在父元素乃至根节点上,然后委派给当前元素生效;
作用:默认的绑定方式,只能绑定到页面初始时已有的p元素,当页面新p元素时,无法绑定到新元素上;
使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件

$(document).on("click","button",function(){
alert("富强民主和谐爱国敬业");
});

$("button").on("click",function(){
var p = $("<p>3333<p>");
$("p").after(p);
})

$(document).on("click","p",function(){
alert("富强民主和谐爱国敬业");
});

(2).off()事件绑定

1、$("p").off():取消所有事件;
2、$("p").off("click"):取消点击事件;
3、$("p").off("click mouseover"):取消多个事件;
4、$(document).off("click","on"):取消事件委派。

off事件绑定的使用方法和on的用法基本都相同,这里我就不一一赘述了。

(3)、.one()事件绑定

这个one绑定用法什么的都一样,就一个不同使用.one()绑定的函数,只能执行一次

 

$("button").one("click",function(){
                    alert("富强民主和谐爱国敬业");
                })

 

3、动画

 

 

<p>动画动画动画</p>

 

      p{
                width: 00px;
                height: 0px;
                background-color: red;
                display: none;
            }

.show

① 不传参:让隐藏的元素直接显示,不进行动画
② 传入时间:多少毫秒之内完成动画
③ 传入(时间,函数):完成动画后,执行回调函数
>>> show()动画执行效果:同时修改元素的宽度、高度、opacity属性

$("p").show(2000,,function(){
alert("已经完成");
})

.hide():让显示元素隐藏,与show相反;

.slideDown():让隐藏元素显示,效果为从上往下,增加高度;
.slideUp():让显示的元素隐藏,效果为从下往上,减小高度;
.slideToggle():让显示的隐藏,让隐藏的显示
.fadeOut():让显示元素隐藏,淡出
.fadeIn():让隐藏元素显示,淡入
.fadeToggle():让显示的隐藏,让隐藏的显示。淡入淡出
.fadeTo(时间,透明度,函数):同fadeToggle,但是多了透明度参数,可以指定显示的最终透明度
.animate({最终的样式属性键值对},动画时间,动画效果("linear""swing"),回调函数):自定义动画。

 

以上是关于JQuery事件与动画总结的主要内容,如果未能解决你的问题,请参考以下文章

jquery总结06-动画事件03-淡入淡出效果

JQuery总结:选择器归纳DOM遍历和事件处理DOM完全操作和动画

jquery总结06-动画事件04-自定义动画

JQuery总结:选择器归纳DOM遍历和事件处理DOM完全操作和动画

不写完不让回家的JQuery的事件与动画

jQuery中的事件与动画 (你的明天Via Via)