深入理解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动态判断html元素并执行不同的操作
Jun 16 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
xtree.js 代码
2007/03/13 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
对python实现模板生成脚本的方法详解
2019/01/30 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
数据库基础的一些面试题
2012/02/25 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
临床护士自荐信
2014/01/31 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
完整版商业计划书
2014/09/15 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
观看建国大业观后感
2015/06/01 职场文书
酒店员工管理制度
2015/08/05 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Java实现简易的分词器功能
2021/06/15 Java/Android
React如何创建组件
2021/06/27 Javascript