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  


jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } ...
  • yusirxiaer
  • yusirxiaer
  • 2017年06月07日 16:53
  • 519

jQuery学习之二:jQuery效果

1、jQuery 效果之隐藏和显示
  • chun_hua
  • chun_hua
  • 2014年06月23日 17:00
  • 33

jQuery自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101...
  • alokka
  • alokka
  • 2017年06月15日 22:52
  • 694

jQuery手风琴效果

原地址:http://www.jq22.com/jquery-info9370
  • cometwo
  • cometwo
  • 2016年09月12日 09:34
  • 990

jQuery事件大全(真的很全)

Dom: Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Ima...
  • tanga842428
  • tanga842428
  • 2016年09月21日 20:36
  • 1020

jquery mobile js失效原理与解决

jquery mobile 转场JS失效 作者:admin 时间:2013-01-05 标签:JS/jQuery     文章摘要: 最近在使用jQuery mobile时遇到一个很...
  • zhongyangjian
  • zhongyangjian
  • 2014年03月13日 11:37
  • 1481

JQuery事件与效果

jQuery 事件hover事件: hover()方法用于模拟光标悬停事件。 当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(m...
  • ZooJinGoo
  • ZooJinGoo
  • 2015年11月30日 00:46
  • 209

javascript事件委托理解,jQuery .on()方法一步到位实现事件委托

本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 === 事件委托,现在才知道这两个是一个意思) 高程3上讲:事件委托...
  • z69183787
  • z69183787
  • 2017年01月04日 15:15
  • 8744

jquery中四种事件监听的区别

我们知道jquery提供了四种事件监听方式,分别是bind、live、delegate、on,下面就分别对这四种事件监听方式分析。 已知有4个列表元素:    列表元素1    列表元素2    列...
  • zhang070514
  • zhang070514
  • 2017年08月06日 23:20
  • 1345

jquery on事件jquery on实现绑定多个事件

on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。 在jQue...
  • pangchengyong0724
  • pangchengyong0724
  • 2016年11月16日 14:23
  • 6072
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery学习笔记 之二 事件与效果
举报原因:
原因补充:

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