JQuery事件与动画

事件绑用快捷方式

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

使用on绑定事件

① 使用on进行单事件绑定
$("button").on("click",function(){
 $(this) 取到当前调用事件函数的对象
console.log($(this).html());
});

② 使用on同时为多个事件,绑定同一函数
$("button").on("mouseover click",function(){
console.log($(this).html())
})*/

/③ 调用函数时,传入自定义参数
$("button").on("click",{name:"jianghao"},function(event){
/使用event.data.属性名 找到传入的参数
console.log(event.data.name);
})

/④ 使用on进行多事件多函数绑定
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver")
}
});*/

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

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

$("p").click(function(){
alert(1);
});

$(document).on("click","p",function(){
alert(1);
});

 off() 取消事件绑定

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

 使用.one() 绑定事件,只能执行一次

$("button").one("click",function(){
alert(1);
})

.trigger("event"):自动触发某元素的事件

$("p").trigger("click",["haha","hehe"]); 触发事件时,传递参数

$("p").click(function(event,arg1,arg2){
alert("触发了P的click事件"+arg1+arg2);
})

$("button").click(function(){
$("p").trigger("click",["haha","hehe"]);
})*/


动画

 .show():让隐藏元素显示,同时修改元素的宽度、高度、opacity属性

① 不传参:让隐藏的元素直接显示,不进行动画
 ② 传入时间:多少毫秒之内完成动画
 ③ 传入(时间,函数):完成动画之后,执行回调函数
 .hide():让显示元素隐藏,与show()相反;
 .slideDown(): 让隐藏元素显示,效果为从上往下,增加高度
.slideUp(): 让显示的元素隐藏,效果从下往上,减小高度
 .slideToggle():让显示的隐藏,让隐藏的显示

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

时间: 2024-07-30 10:19:53

JQuery事件与动画的相关文章

JQuery事件与动画总结

1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可执行 区别: ① window.onload需在网页所有内容加载完成之后执行(包括图片音频) 文档就绪函数:只需要在网页DOM结构加载以后便执行 ② window.onload只能写一个,写多个只会执行最后一个 文档就绪函数:可以写多个,也不会被覆盖 window.onload() = functi

JavaScript jQuery 事件、动画、扩展

事件 http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143564690172894383ccd7ab64669b4971f4b03fa342d000 动画 http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500456006abd6381dc3bb

使用jQuery快速高效制作网页特效-----------------------------之jQuery事件与动画

1.基础事件 分为三个事件 1.1 window事件 所谓window事件,就是当用户执行某些会影响浏览器的操作时,而触发的事件. 1.2 鼠标事件 鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时而产生的事件. 1.click事件:    单击鼠标时触发 $('p').click(function(){}); 2.mouseover事件: list.mouseover(function(){ $(this).css("background","pink"); }

锋利的JQuery —— 事件和动画

大图猛戳

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

在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们这听得一脸懵逼的人,说了一句不写完就别回家,心里咯噔一下,比被车撞都...... 一.jQuery中事件 1.如何加载DOM呢? 在常规的JavaScript代码中,我们通常使用window.onload方法对吧,而在jQuery中,使用的是$(document).ready()方法.$(docum

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

jquery学习笔记(三)事件和动画

一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} )  jquery的ready函数会在dom准备完毕后执行,并且可以多次使用 $(selector).load( function(){} ) 此方法相当于js自身的onload方法 如 $(window).load(function(){})    相当于  window.onload=function(){} ------

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

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function(){   // 编写代码... }); $(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行,可能此时DOM元素关联的东西(比如图片)并没有加载完. $(document).ready()方法能同时编写多个,每次调用$(document).ready()方法都