深入理解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写的一个TableView控件代码
Jan 23 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
web方式ftp
2006/10/09 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php-fpm配置详解
2014/02/12 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP递归的三种常用方式
2019/02/28 PHP
一个网马的tips实现分析
2010/11/28 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python实现井字棋游戏
2020/03/30 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
PyQt5实现下载进度条效果
2018/04/19 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
技术总监个人的自我评价范文
2013/12/18 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
房屋维修协议书范本
2014/09/25 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
php双向队列实例讲解
2021/11/17 PHP