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  


阅读更多
个人分类: phonegap and jQuery
想对作者说点什么? 我来说一句

JQuery学习笔记

2011年01月16日 316KB 下载

jQuery 语法学习笔记

2011年09月12日 18KB 下载

jquery 学习笔记

2009年08月31日 45KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭