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