一，事件
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. 【18.40%】【codeforces 631D】Messenger

    time limit per test 2 seconds memory limit per test 512 megabytes input standard input output standa ...

  2. Android 对.properties文件的读取

    /** * * @param filepath .properties文件的位置 */ public void checkFileExists(String filepath){ File file ...

  3. quartz结合多线程处理后台业务

    最近项目中有播放视频的需求,技术选型采用UMS播放器,免费版只能播放FLV格式的视频文件,因此需要对用户上传的视频进行格式转换,转换工具为FormatFactory,功能还是比较强大的.但是面临的一个 ...

  4. Windows远程连接Ubuntu (远程桌面和XDMCP)

    从RHEL/CentOS转过来,几乎所有的编码都在windows下,不习惯原生linux开发.总结了远程连接的两种方式,一种用Windows自带的rdp协议,另外一种用xdmcp协议 XRDP 就是用 ...

  5. Cocos2d-X中国象棋的发展《五岁以下儿童》摆棋

    在博客上,以实现创建的游戏场景.而一些button,因为button落实到事件作出详细答复,需要使用一些功能摆棋.为此我特意button上的背面的具体实施, 在摆棋前先理清一下摆棋的思路: 1.创建一 ...

  6. 系统性能指标之 vmstat

    系统性能指标 top top - 19:59:04 up 219 days, 21:51, 2 users, load average: 0.06, 0.06, 0.05 Tasks: 84 tota ...

  7. TCP 三次握手（相当于寄信需要回执，第一次握手：我寄给你一封信。第二次握手：你回我一封信。第三次握手：我再给你一个回执，这样你才能确认我收到信了）

    TCP 连接是通过三次握手进行初始化的.三次握手的目的是同步连接双方的序列号和确认号并交换 TCP 窗口大小信息.以下步骤概述了通常情况下客户端计算机联系服务器计算机的过程: 1. 客户端向服务器发送 ...

  8. 【转载】FusionSphere架构详解

    FusionSphere底层使用Xen架构: 1.单台物理机上建立hypervisor系统. 2.将所有单个hypervisor系统整合起来管理使用. 安装CNA节点,所有的物理服务器都会先成为CNA ...

  9. js 动态生成button 并设置click事件

    <div id="MyDiv"></div> <script> function AddButton() { var MyDiv =docume ...

  10. WCF服务的IIS托管（网站托管）

    基本思路 1.新建WCF应用程序2.注册路由(可省略,则用/….svc/….访问)配置文件 <appSettings> <add key="aspnet:UseTaskFr ...