深入理解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实现页面定时跳转总结篇
Sep 21 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
angular之ng-template模板加载
Nov 09 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
微信小程序实现分页加载效果
Nov 19 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中autoload的用法总结
2013/11/08 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
使用python实现knn算法
2017/12/20 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
初中三好学生事迹材料
2014/01/13 职场文书
物理学专业自荐信
2014/06/11 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android