jQuery中事件与动画的总结分享


Posted in Javascript onMay 24, 2016

1.加载DOM

1.1.window事件

window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行

$(function(){}) ……:只是等待标签完毕,即可执行

区别:前者在HTML页面中只能解析最后一个,二后者是N个

window.onload() = function () {

    }
    $(function () {
      $("li").bind("click", function () {
        $(this).css("background","red");
      });
    });
    $(function () {
      $("div").bind("click", function () {
        $(this).css("background", "red");
      });
    });

第一部分--事件

2.鼠标事件

2.1 常用鼠标事件的方法

click() :单击事件、触发或将函数绑定到指定元素的click事件

mouseover(): 触发或将函数绑定到指定元素的mouseover事件

mouseout() :触发或将函数绑定到指定元素的mouseout的事件

经典的光棒效果:

$(function () {
      $("input").click(function () {
        $("li").mouseover(function () {
          $(this).css("background", "green");
        }).mouseout(function () {
          //this.style.background = "";
          this.style.cssText = "background:";
        });
      });
    });

3.键盘事件

3.1 常用键盘事件的方法

keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件

keyup():  释放按键时、触发或将函数绑定到指定元素的keyup事件

keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件

$(function () {
      $("p input").keyup(function () {
        $("#events").append("keyup");
      }).keydown(function () {
        $("#events").append("keydown");
      }).keypress(function () {
        $("#events").append("keypress");
      });
      $(document).keydown(function (event) {
        if (event.keyCode == "13") {
          //按enter键
          alert("确认要提交么?");
        }
      });
    });

4.表单事件

4.1 常用表单事件的方法

focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件

blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件

$(function () {
        //给文本框添加边框样式
        $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
        });
    });

5.绑定事件与移除事件

5.1 绑定事件

语法:

bind(type,[data],fn),其中data不是必需的

type:事件类型、主要包括blur、focus、click、mouseout等基础事件,此外也还可以是自定义事件

fn :用来绑定的处理函数

$(function () {      //给li绑定click事件、并进行样式修改
      $("li").bind("click", function () {
        $(this).css("background","red");
      });
    });

 5.2 同时绑定多个事件

$(function () {
      $("li").bind({
        mouseover: function() {
          $(this).css("background", "pink");
        }, mouseout: function() {
          $(this).css("background", "gray");
        }
      });
    });

5.3 移除事件与同时移除多个事件

unbind([type],[fn]) 与绑定事件刚好相反,如果方法没有参数则表示移除全部的事件

unbind如果要移除多个只需在两两之间添加一个空格即可

$(function () {
      $("li").unbind("click");      $("li").unbind("mouseover mouseout");
    });

5.4 一些其他的绑定与移除的方法

1.live() unbind()

2.on()  jQuery1.7版本之后才有的方法 off()

3.delegate() undelegate()

6. 复合事件

6.1 hover()方法

语法:

hover(enter,leave);  该方法相当于mouseover与mouseout事件的组合

$("li").hover(function() {
        $("li").css("background", "gray");
      }, function() {
        $("li").css("background", "green");
      });

6.2 toggle()方法

语法:

toggle(fn1,fn2,……,fnN);  该方法用于模拟鼠标连续click事件,单鼠标单击一次就执行一个fn,从头开始按顺序执行,tolgge()使用的隐藏域属于

display,它在浏览器中是不占用位置的,与它相同的visibility是占用的

$("body").toggle(function () {
        $("li").css("background", "gray");
      }, function () {
        $("li").css("background", "green");
      }, function () {
        $("li").css("background", "blue");
      });

接下来再看看第二部分--动画

1. 控制元素显示与隐藏

语法:

$(select).show([speed],[callback]);

与show()方法相对的是hide()方法,该方法可以控制元素隐藏。

语法:

$(select).hide([speed],[callback]); 除了可以控制元素的隐藏外,还能定义隐藏元素时的效果,如隐藏速度

注意:绝大多数情况下,hide()方法与show()方法总是在一起使用 

2. 控制元素透明度

2.1 控制元素淡入

语法:

$(select).fadeIn([speed],[callback]);

与show()方法相对的是fadeOut()方法,该方法可以控制元素淡出。

3. 改变元素高度

3.1 方法 slideUp()和slideDown()

slideDown()会将元素从上向下延伸显示,slideUp()方法正好相反,元素会从下到上缩短直至隐藏。

 

$(function () {
      $("#btnshow").click(function () {
        $("img").show(1000);
      });
      $("#btnhide").click(function () {
        $("img").hide(1000);
      });
    });
    $(function () {
      $("#btnin").click(function () {
        $("img").fadeIn(5000);
      });
      $("#btnout").click(function () {
        $("img").fadeOut(5000);
      });
    });
    $(function () {
      $("#btnup").click(function () {
        $("img").slideUp(5000);
      });
      $("#btndown").click(function () {
        $("img").slideDown(5000);
      });
    });

 4.animate()方法是用来自定义动画的

当我们需要对动画有更多的控制时,使用animate()方法能够更具有灵活性,因为它可以替换其他所有的方法

$(function () {
      $("[type=button]").bind("click", function () {
        //两个特效并行执行,不加入队列:
        $("div").
        animate({ "font-size": "50px" }, 3000)
        .animate({ "width": "300px" }, { queue: false, duration: 3000 });
      });
    });

 4.1 animate()方法替换一些其他的方法

//替换show()方法
        //$("img").show(1000);
        $("img").animate({height:"show",width:"show",opacity:"show"},1000);
        //替换fadeIn()方法
        $("img").fadeIn(5000);
        $("img").animate({opacity:"show"},5000);
 
        //替换slideDown()方法        $("img").slideDown(5000); 
        $("img").animate({ height: "show" }, 5000);

这些动画就是animate()方法的一种内置了特定样式的简写形式,这些特定的样式值可以为"show"、"hide"、"toggle",也可以自定义数值

jQuery中事件与动画的总结分享

$("div").click(function() { $(this).next().toggle(); $(this).next().fadeTo(600,0.2); $(this).next().fadeToggle(); $(this).next().slideToggle(); }); 

以上这篇jQuery中事件与动画的总结分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Node.js中的事件驱动编程详解
Aug 16 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
Jquery api 速查表分享
Jan 12 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
vue之延时刷新实例
Nov 14 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
jQuery根据表单name获取值的方法
May 24 #Javascript
深入理解jquery自定义动画animate()
May 24 #Javascript
深入理解jquery中的事件与动画
May 24 #Javascript
Jquery元素追加和删除的实现方法
May 24 #Javascript
jquery html动态添加的元素绑定事件详解
May 24 #Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 #Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 #Javascript
You might like
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python解决字符串倒序输出的问题
2018/06/25 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python 的topk算法实例
2020/04/02 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
高中的自我鉴定
2013/12/16 职场文书
cf战队收人口号
2014/06/21 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
创先争优个人总结
2015/03/04 职场文书
军事博物馆观后感
2015/06/05 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫