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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Vue 项目代理设置的优化
Apr 17 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Django的Modelforms用法简介
2019/07/27 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
班主任工作经验材料
2014/02/02 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
安全口号大全
2014/06/21 职场文书
2014年司法局工作总结
2014/12/11 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python