JQuery事件与动画总结

Posted 2020-09-13

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"),回调函数)：自定义动画。