深入理解jquery中的事件与动画


Posted in Javascript onMay 24, 2016

1.鼠标事件

 深入理解jquery中的事件与动画

eg:光棒效果

$(function () {
   $('li').mouseover(function () { //鼠标移过时
    $(this).css('background','blue');
   }).mouseout(function () { //鼠标移过后
    $(this).css('background','');
   });

  });

2.键盘事件

深入理解jquery中的事件与动画

3.表单事件

深入理解jquery中的事件与动画

 eg:输入框的文字显示效果

// 查询输入框
  $("input[name='search']").focus(function(){
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
   $(this).val("请输入要查询的问题"); 
  });

4.绑定事件与移除事件

 bind():绑定事件

01.绑定一个

$("input[name=event_1]").bind("click",function() {
 $("p").css("background-color","#F30");
});

02.绑定多个

$("input[name=event_1]").bind({
mouseover: function () {
 $("ul").css("display", "none");
},
mouseout: function () {
 $("ul").css("display", "block");
}
});

 unbind([type],[fn]):移除事件

深入理解jquery中的事件与动画

当unbind()不带参数时,表示移除所绑定的全部事件

5. 复合事件

 1.hover()方法 

  hover()方法相当于mouseover与mouseout事件的组合,用于模拟鼠标指针悬停事件

        深入理解jquery中的事件与动画

 2.toggle()方法 (在j 1.7后就删除,不建议使用)

  toggle()方法用于模拟鼠标连续click事件

2.toggle()方法 (在j 1.7后就删除,不建议使用)

  toggle()方法用于模拟鼠标连续click事件

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...     //...
);

同时toggle()方法还有一个作用:切换元素可见状态

$('input').toggle( 
  function () {
  $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
  },
  function () {
   $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
  }
 );

二:动画

1.显示及隐藏元素

show() 在显示元素时,能定义显示元素时的效果,如显示速度

$(".tipsbox").show("slow");//以较慢的速度显示元素

hide() 隐藏元素

$(".tipsbox").hide("slow");//以较慢的速度隐藏元素

这里补充一个is()方法的使用,可以用来判断是显示还是隐藏。

eg:

$('input').bind('click', function () {
    if ($(this).is(':visible')) {//如果内容为显示
     $(this).hide();
    } else {
     $(this).show();
    }
   })

2.切换元素可见状态(toggle())

 toggle()除了可以模拟鼠标的连续单击事件外,还能用于切换元素的可见状态

$("li:gt(5):not(:last)").toggle();//是隐藏则显示,是显示则隐藏

3.淡入淡出效果

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$("input[name=fadein_btn]").click(function(){
  $("img").fadeIn("slow"); //以较慢的速度淡入

});
$("input[name=fadeout_btn]").click(function(){
  $("img").fadeOut(1000); //以1000毫秒的速度淡出

});

4.改变元素的高度

slideDown() 可以使元素逐步延伸显示,slideUp()则使元素逐步缩短直至隐藏

$("h2").click(function(){
  $(".txt").slideUp("slow");
  $(".txt").slideDown("slow");
});

三:自定义动画

详情 点击 深入理解jquery自定义动画animate()

你一定会有所收获的!

以上这篇深入理解jquery中的事件与动画就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
js数组去重的方法总结
Jan 18 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
Jquery元素追加和删除的实现方法
May 24 #Javascript
jquery html动态添加的元素绑定事件详解
May 24 #Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 #Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 #Javascript
jQuery unbind 删除绑定事件详解
May 24 #Javascript
深入理解jQuery之防止冒泡事件
May 24 #Javascript
30分钟快速掌握Bootstrap框架
May 24 #Javascript
You might like
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
php实现学生管理系统
2020/03/21 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python字典排序的方法
2019/10/12 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
python re模块和正则表达式
2021/03/24 Python
经销商订货会主持词
2014/03/27 职场文书
初中同学会致辞
2015/08/01 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
JavaScript继承的三种方法实例
2021/05/12 Javascript