深入理解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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
js实现动态显示时间效果
Mar 06 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
js实现随机数小游戏
Jun 28 Javascript
es6函数之尾递归用法实例分析
Apr 25 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
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python微信公众号开发平台
2018/01/25 Python
python cs架构实现简单文件传输
2020/03/20 Python
python配置grpc环境
2019/01/01 Python
区分python中的进程与线程
2020/08/13 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
一些Unix笔试题和面试题
2012/09/25 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
小摄影师教学反思
2014/04/27 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android