一，事件
1,加载事件
1
2
3
4
5
6
$(document).ready(function(){
  //todo
}); //dom准备就绪后执行ready里面的函数，此时dom对应的相关文件(比如图片)可能还未加载完毕，此时图片的height和width还不能访问。
$img.load(function(){
    //todo
}); //图片加载完毕后执行里面的函数。
 
2，事件绑定：
1）

1
2
3
4
5
6
7
8
var $ul=$("#ulMain");
            $ul.bind("click",{name:"zy",age:22},function(event){
                alert(event.data.name);
            });  //绑定ul的click事件，并传递一个参数（参数类型为一个对象）。bind方法可以多次调用。
简写方式如下：
$ul.click({name:"zy",age:22},function(event){
                alert(event.data.name);
            });
2）一次绑定多个事件：
1
2
3
$("#divMain").bind("mouseenter mouseleave",function(){
                $(this).append($("<b>div append</b>"));
            });
 
3）添加事件命名空间：
1
2
3
4
5
6
7
8
9
10
11
$("#divMain").bind("mouseenter.divevent",function(){
                $(this).append($("<b>div mouseenter</b><br/>"));
            }).bind("click.divevent",function(){
                $(this).append($("<b>div click</b><br/>"));
            }).bind("dblclick.divevent",function(){
                $(this).append($("<b>div dblclick</b><br/>"));
            });
  
            $("#btnSubmit").bind("click",function(){
                $("#divMain").unbind(".divevent");  //解除命名空间即可
            });
 
4）相同事件名，不通命名空间：
1
2
3
4
5
6
7
8
9
10
$("#divMain").bind("click",function(){
                $(this).append($("<b>div click</b><br/>"));
            }).bind("click.divevent",function(){
                $(this).append($("<b>div click.divevent</b><br/>"));
            });
  
            $("#btnSubmit").bind("click",function(){
                $("#divMain").trigger("click!"); //感叹号表示仅触发没有命名空间的事件，这里仅会触发click事件，注意：1.9及以后版本移除了该功能！
                $("#divMain").trigger("click");  //触发所有click事件，这里会触发click和click.divevent事件。
            });
 
3，合成事件：
即绑定了2个事件：
1）hover事件：模拟光标移入移出事件，它是用来替代mouseenter, mouseleave事件的，而非mouseover, mouseout事件。
1
2
3
4
5
6
var $ul=$("#ulMain");
            $ul.hover(function(){
                $(this).css({backgroundColor:"red"});//光标移入该元素时修改背景色为红色
            },function(){
                $(this).css({backgroundColor:"white"});//光标移入该元素时修改背景色为白色
            });
 
2）toggle事件：有两个功能：
2.1） 鼠标连续单击同一元素依次执行相应的处理函数：toggle(fn1, fn2, fn3, ... fnN); 但是该功能在1.9及以后版本移除了，请注意。
1
2
3
4
5
6
7
$("#btnMain").toggle(function(){
                $ul.css("color","red");
            },function(){
                $ul.css("color","yellow");
            },function(){
                $ul.css("color","blue");
            });  //依次单击按钮触发的事件。
 
2.2)     控制相应元素的显示和隐藏：
1
2
3
4
var $ul=$("#ulMain");
            $("#btnMain").click(function(){
                $ul.toggle();
            });  //   单击按钮时，隐藏或显示ul
 
3，事件冒泡：例如：如果span元素注册了click事件，span的父元素div也注册了click事件，div的父元素也注册了click事件，
那么单击span会依次触发这三个事件。
3.1） 阻止事件冒泡：
1
2
3
4
$("#spanMain").click(function(event){
                $("#spanSpan").text("span click");
                event.stopPropagation();  // 阻止事件冒泡，event为事件对象
            });
 
3.2）阻止默认行为：
1
2
3
4
5
6
7
$("#btnSubmit").click(function(event){
                if($("txtName")=="")
                {
                    //todo,错误提示
                    event.preventDefault();//阻止submit的默认行为，即不提交表单。
                }
            });
 
若要同时阻止事件冒泡和默认行为，可以在事件处理函数中返回 return false。
 
5，事件对象的属性：
1）type属性：
1
2
3
$("#btnPay").click(function( event ){
    alert(event.type);  //事件的类型，此处输出 click
});
2)  event.stopPropagation(); //阻止冒泡行为
3）event.preventDefault();  //阻止默认行为
4）target属性：
1
2
3
4
5
$("a").click(function(event){
                var tg=event.target;//获取触发事件的元素，这里为<a/>，该对象是DOM对象
                alert(tg.href);
                return false;
            });
5）relatedTarget属性：
1
2
3
4
5
6
7
8
$("a").mouseover(function(event){
                var reltg=event.relatedTarget; //相当于IE中的event.fromElement，即光标是从哪个元素移入的
                alert(reltg.toString()); //
                return false;
            }); //
$("a").mouseout(function(event){
                alert(event.relatedTarget.toString()); // 针对mouseout，相当于IE中的event.toElement，即光标移出后到哪个元素上了。
            });
6)   pageX，pageY属性：获取到光标相对于页面的x坐标和y坐标。
1
2
3
4
$("a").click(function(event){
                alert(event.pageX+","+event.pageY);
                return false;
            });
7） which属性：鼠标单击事件中获取鼠标的左，中，右键对应的值，键盘事件中获取键盘的按键。
1
2
3
$("#txtMain").keyup(function(e){
                alert(e.which); // 比如按键盘上的A，则返回65
            });
8）特殊键属性：如ctrlKey, altKey, shiftKey，按了哪个键，就会返回true，否则返回false。
1
2
3
$("#txtMain").keydown(function(e){
                alert(e.ctrlKey+"，"+e.shiftKey+"，"+e.altKey);
            }); 
6，移除事件：
1) unbind方法：
unbind(); //删除所有事件
unbind(eventTypeString); //只删除指定类型的事件，比如"click"
unbind(eventTypeString, funcName); //删除指定类型事件的指定处理函数。
下面是最后一个例子：
1
2
3
4
5
6
7
8
9
10
var $ul =$("#ulMain");
            $("#btnMain").click(func1= function(e){
                $ul.append($("<li>func1</li>"));
            }).click(func2=function(){
                $ul.append($("<li>func2</li>"));
            });
  
            $("#btnDel").click(function(){
                $("#btnMain").unbind("click",func2);
            });
2）one方法：仅执行一次绑定的事件，用法同bind方法。
1
2
3
4
var $ul =$("#ulMain");
            $("#btnMain").one("click",function(){
                $ul.append($("<li>func1</li>"));
            }); //click事件仅会触发一次。
7，模拟操作：
1）trigger()方法： 该方法能触发相应事件，比如：
1
2
3
4
5
6
7
$("#btnMain").bind("click",function(e,name,age){
$(function(){
            var $ul =$("#ulMain");
            $("#btnMain").bind("click",function(e,name,age){
                alert(name+","+age);
            }).trigger("click",["zy",11]);  // 页面加载后就会执行click事件处理函数。
        });
另外还会执行浏览器默认操作：
$("#txtMain").trigger("focus");  //触发元素的focus事件，同时元素本身获得焦点。
下面的函数仅触发事件，不执行浏览器默认操作：
$("#txtMain").triggerHandler("focus");  //触发元素的focus事件，不执行默认操作。
 
二，动画
jquery动画要求在标准模式下，即文件头包含如下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1， show() ,  hide(): 原理是修改元素的display样式。
1
2
3
4
5
6
$divMain =$("#divMain");
            $("#btnSubmit").toggle(function(){
                $divMain.hide(1000);  //元素在1000毫秒内隐藏掉，不带参数会立即隐藏
            },function(){
                $divMain.show(1500); //元素在1500毫秒内显示出来
            });
 
2，fadeIn() , fadeOut(): 原理：改变元素透明度。
fadeIn:  在一段时间内增加元素的不透明度，直到元素完全显示出来。
fadeOut: 在一段时间内降低元素的不透明度，直到元素完全显示消失。
 
3，slideUp(),  slideDown(): 原理：改变元素高度。
slideUp: 元素由下到上缩短至隐藏。
slideDown: 元素由上到下延伸至显示。
1
2
3
4
5
6
$divMain =$("#divMain");
            $("#btnSubmit").toggle(function(){
                $divMain.slideUp();
            },function(){
                $divMain.slideDown();
            });
 
4，自定义动画方法animate()
语法：animate(params, speed, callback);
1) 向右移动500px
样式：
1
2
3
4
5
6
7
8
#divMain{
        position:relative;  //或者是absolute，这样才可以影响元素的top, left, bottom, right属性。
        width:300px;
        height:300px;
        border:1px solid #005000;
        background:#96E555;
        cursor:pointer;
    }
JS脚本：
1
2
3
4
5
6
$(function(){
            $divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                $divMain.animate({left:"500px"}, 2000,null);
            });
        });
2）累加，累减动画：
1
2
3
4
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                $divMain.animate({left:"+=200px"}, 2000);     //在当前位置累加200px
            });
 
3)多重动画：
1
2
3
4
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                $divMain.animate({left:"+=200px",height:"-=50px"}, 2000); // 位置变化的同时，高度也在变化
            });
 
4）顺序执行动画：
1
2
3
4
$("#btnSubmit").click(function(){
                $divMain.animate({left:"+=100px"}, 1000)
                .animate({height:"-=50px"},1000);
            });
 
5，停止动画和判断是否处于动画状态：
1）停止动画：
1
2
3
4
5
stop(clearQueue, gotoEnd); // clearQueue表示是否清空未执行完的队列， gotoEnd表示是否将正在执行的动画跳转到末状态。
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                $divMain.stop().animate({left:"+=100px"}, 1000); // 停止当前正在执行的动画，立即执行向右移动100的动画。
            });
2) 判断元素是否处在动画中：
1
2
3
4
5
6
7
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                if(!$divMain.is(":animated"))  //元素不处于动画中才执行下面的动画
                {
                    $divMain.animate({left:"+=100px"}, 1000);
                }
            });
3）延迟执行动画：delay()函数
1
2
3
4
5
6
7
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                if(!$divMain.is(":animated"))
                {
                    $divMain.delay(2000).animate({left:"+=100px"}, 1000);  //推迟2秒后才执行动画
                }
            });
6，其它动画函数：
1）slideToggle(): 改变元素高度来隐藏元素
1
2
3
4
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                $divMain.slideToggle();
            }); 
2）fadeTo() 调整元素的不透明度，不改变宽高：
1
2
3
4
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                $divMain.fadeTo(1000,0.2); //用1000毫秒时间将不透明度调整到20%
            }); 
3）fadeToggle() 切换元素的不透明度：
1
2
3
4
$divMain =$("#divMain");
            $("#btnSubmit").click(function(){
                $divMain.fadeToggle();
            });

jquery事件和动画操作集锦的更多相关文章

  1. jQuery的一些基本的函数和用jQuery做一些动画操作

    jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...

  2. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  3. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

  4. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  5. JQuery 事件与动画

    第一大部分 提纲 事件与动画 一.事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件. onclick - click ondblclick - db ...

  6. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  7. Jquery基础之动画操作

    Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...

  8. python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  9. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

随机推荐

  1. Android菜鸟的成长笔记（20）——IntentService

    前面介绍的Service在官方文档介绍中说Service存在着如下两个问题: 1.A Service is not a separate process. The Service object its ...

  2. Linode跨节点迁移：从Tokyo到Fremont

    背景 上一篇博客交代了如何在 Linode 上搭建邮件服务器,并配置好各种协议.记录来投入实际使用. 由于实践过程中,曾经尝试使用明文协议与服务器交流数据,可能泄露了账号.密码信息,造成之后被攻击发送 ...

  3. 数据批量插入MSSQL

    MSSQL数据批量插入优化详细   序言 现在有一个需求是将10w条数据插入到MSSQL数据库中,表结构如下,你会怎么做,你感觉插入10W条数据插入到MSSQL如下的表中需要多久呢? 或者你的批量数据 ...

  4. 从Client应用场景介绍IdentityServer4（五）

    原文:从Client应用场景介绍IdentityServer4(五) 本节将在第四节基础上介绍如何实现IdentityServer4从数据库获取User进行验证,并对Claim进行权限设置. 一.新建 ...

  5. CUDA流（Stream）

    CUDA流表示一个GPU操作队列,该队列中的操作将以添加到流中的先后顺序而依次执行.可以将一个流看做是GPU上的一个任务,不同任务可以并行执行.使用CUDA流,首先要选择一个支持设备重叠(Device ...

  6. 回归（regression）的理解（regressor，回归子）

    1. 基本概念 回归(regression)是监督学习(given {(xi,yi)})的一个重要分类.回归用于预测输入变量(自变量,Xi)与输出变量(因变量,Yi) 之间的关系,特定是当输入变量的值 ...

  7. Redis 宝典 | 基础、高级特性与性能调优

    转载:Redis 宝典 | 基础.高级特性与性能调优 本文由 DevOpsDays 本文由简书作者kelgon供稿,高效运维社区致力于陪伴您的职业生涯,与您一起愉快的成长.     作者:kelgon ...

  8. delphi xe 之路（14）使用FireMonkeyStyle（一共30篇）

    FireMonkey使用Style来控制控件的显示方式. 每个控件都有一个StyleLookup属性,FireMonkey就是通过控件的这个属性来在当前窗体的StyleBook控件中查找匹配的Styl ...

  9. 《TIME》时代周刊阅读

    0. 常识 tribunal 是解决民事诉讼和民事纠纷的地方,以调解为主,使用主席制.主席是受过司法培训,具有一定法律基础的,但不能像法官一样直接给你判决,也不能强制执行. Court 一般针对严重案 ...

  10. OpenGL+VS2012编译环境配置

    OpenGL库主体分为三部分,分别是 gl(OpenGL核心库) glu(Utility Library,OpenGL实用库) glut(Utility Toolkit,OpenGL实用工具库) gl ...