首页 > 代码库 > 【学习笔记】锋利的jQuery(三)事件和动画
【学习笔记】锋利的jQuery(三)事件和动画
一、jQuery事件
1,加载事件
$(document).ready(function(){...}) //等同于$(function(){..})$(window).load(function(){...}) //等同于window.onload = fn
2,基本事件绑定
bind(type,[.data],fn) //可绑定多个事件:bind("mouseover mouseout",fn)unbind(type,fn) //解除绑定one(type,[.data],fn) //绑定的事件只执行一次
//简写绑定
click(fn)/dblclick(fn)mouseover(fn)/mouseout(fn)mouseenter(fn)/mouseleave(fn) //不包括移出元素内部的子元素
scroll(fn)
//常用表单事件
focus(fn)/blur(fn)
keyup(fn)/keydown(fn) //按下和松下按键
keypress(fn) //按了个键值时候
change(fn) //表单文本域(input:text,textarea,select)值改变时触发
//合成事件hover(fn1,fn2) //相当于bind("mouseenter")和bind("mouseleave")toggle(fn1,fn2,fn3...) //连续单击事件,轮番调用多个函数trigger(type) //触发对应type的事件,会执行浏览器默认操作,type可为自定义名称triggerHandler(type) //绑定type事件,且阻止浏览器默认操作
3,事件的命名空间
bind("click.name",fn);bind("mouseover.name",fn);bind("click",fn);unbind(".name"); //命名空间解绑trigger("click!"); //匹配不包含命名空间的click,即第三个
4,event事件对象
bind(type,function(event){....}) //添加事件对象参数,推荐命名为event或e,原理上可随便命名//event属性event.type event.target event.relatedTarget //触发事件的相关元素event.pageX/event.pageY //相对于页面的x和y坐标
event.which //键盘事件:返回按键的ASCALL码,点击事件:1(左)2(中)3(右)。jq中整合了keyCode和charCode的兼容及鼠标事件
event.keyCode //返回按键的ASCALL码,建议用which//event方法,两个同时使用,相当于事件里边添加"return false;"event.stopPropagation(); //阻止冒泡event.preventDefault(); //阻止浏览器事件默认行为
注意:jQuery中,获取和设置类似disabled和checked属性时,用prop()方法代替attr(),只有true/false值。
二、jQuery动画
/* *params:动画的最终样式或值的效果,如{left:"+=500px"},left会进行累加 *speed:动画时间,单位ms。slow为600,normal为400,fast为200 *callback:动画完成后执行的回调函数 */animate(params,speed,callback);$div.animate().animate()... //按顺序执行动画.stop([clearQueue],[goEnd]) //两个布尔值参数可选,无参数仅停止当前动画.delay() //推迟执行//动画简写hide()/show() //相当于css("display":"none/block/inline")slideUp()/slideDown() //通过高度上下拉伸隐藏fadeIn()/fadeOut() //淡进、淡出fadeTo(speed,0~1) //渐进方式调到指定透明度//组合动画toggle()slideToggle()fadeToggle()
//animate(params,500),常用的params
{scrollTop:"-=50"}
{height:"+=50"}
【学习笔记】锋利的jQuery(三)事件和动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。