深入理解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 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
JS的replace方法介绍
Oct 20 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
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
一个SQL管理员的web接口
2006/10/09 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php身份证号码检查类实例
2015/06/18 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Python引用传值概念与用法实例小结
2017/10/07 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python url 参数修改方法
2018/12/26 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python数据库小程序源代码
2019/09/15 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
判断单链表中是否存在环
2012/07/16 面试题
《圆明园的毁灭》教学反思
2014/02/28 职场文书
建材投资建议书
2014/05/16 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python