jquery 事件驱动
1 可以响应的基本事件
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
hide
show
toggle
语法
$(selector).toggle(speed,callback);
可以定义callback事件回掉.
2 淡入淡出效果
fadin
fadout
fadeToggle
fadeTo 有点意思,可以淡出到指定的透明值
3 滑动特效
slideToggle()
以及
animate 可以自定义动画效果。例如
$("#box").animate({height:"300px"});
$("#box").animate({height:"100px"});
在不同状态切换 。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画。颜色之类的切换做不到。
ps1 位置 注意 :如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
ps 2 甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle": 这个很有意思。
ps 3 动画的队列功能
例如
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });
4 chainning
语法糖
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
ps 支持空格。
5