jquery学习笔记 之二 事件与效果

 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 滑动特效

slideDown()

slideUp()

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");});

ps 4 停止动画功能 

4 chainning

语法糖

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

ps 支持空格。

5