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

原创 2013年12月05日 15:04:22

 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  


相关文章推荐

C#学习笔记之二:事件

关键字:event  特定类型:EventHandler,EventArgs(都位于System命名空间中) 1.事件是什么? (1)类成员的一种。委托类型。 (2)涉及两方:事件的发布者(可以定义一...

jquery-mobile 学习笔记之二(表单创建)

绪上 一、注意事项 1. 元素必须设置 method 和 action 属性 2. 每个表单元素必须设置唯一的 "id" 属性。    该 id 在站点的页面中必须是唯一的。 ...

C++ Primer Plus学习笔记之二

  • 2016年09月01日 12:06
  • 8KB
  • 下载

jQuery学习笔记(二)基础事件

一.绑定事件 在JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseove...
  • QCIWYY
  • QCIWYY
  • 2015年12月22日 14:14
  • 265

jQuery学习笔记(二)选择器 事件

选择器: $(document).ready(function() { $("button").click(function() { $("p").css("background-c...

Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android添加两次返回退出游戏效果)

这节我们来学习Cocos2d

JQuery学习笔记(二):jQuery 效果

jQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画) 1)显示和隐藏 $(selector).hide(speed,callback); $(selector).show(speed,...

jQuery学习笔记(4)——动画效果

jQuery动画效果jQuery提供了较为丰富和简单的动画效果,但是效果是为了可用性服务的,如果简单的堆砌效果,往往适得其反。jQuery的动画效果: 隐藏/显示 淡入/淡出 滑动 自定义动画 显示和...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery学习笔记 之二 事件与效果
举报原因:
原因补充:

(最多只允许输入30个字)