一，事件
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. 调制：调幅（AM）与调频（FM）

    AM:amplitude modulation,幅度调制: FM:Frequency Modulation,频率调制: 1. 为什么要调制 MW:Medium Wave,中波,SW:Short Wav ...

  2. 单点登录原理与简单实现--good

    一.单系统登录机制 1.http无状态协议 web应用采用browser/server架构,http作为通信协议.http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关 ...

  3. MATLAB使用入门

    作者:朱金灿 来源:http://blog.csdn.net/clever101 初步学习了MATLAB的使用,发现MATLAB是一个很好的算法仿真工具.MATLAB也是一门语言,是否会使用这门语言编 ...

  4. DOS批处理

    DOS批处理命令-注释   注释是每个程序中不可或缺的(不是对计算机来说,而是对我们这些程序员阅读代码来说) 语法: ①rem 这是批处理的注释命令,rem后面的内容全部是注释 例:rem 这是一行注 ...

  5. HDU 1143 Tri Tiling （递推）

    Tri Tiling Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  6. 在sqlserver中，使用sql语句更新数据库:生成随机数，更新每一行中的年龄字段

    use School --指定数据库 declare @min_id int --声明整数变量@x set @min_id=(select MIN(Id) from Students) --给变量@x ...

  7. OpenCV图像修复

    在OpenCV的"photo.hpp"中定义了一个inpaint函数,可以用来实现图像的修复和复原功能,inpaint函数的原型如下: void inpaint( InputArr ...

  8. Delphi读取文件属性

    Read File Detailed Properties https://www.board4all.biz/threads/read-file-detailed-properties.655787 ...

  9. 微软输入法TSF SampleIME 代码浅说

    原文:微软输入法TSF SampleIME 代码浅说 微软提供了一个简单的TSF拼音输入法的示例SampleIME,主要的问题是:不支持数字键选候选字,不能自动上屏,没有联想功能.在笔者开发动态输入法 ...

  10. JDBC学习笔记——增删改查

    1.数据库准备  要用JDBC操作数据库,第一步当然是建立数据表: ? 1 2 3 4 5 6 CREATE TABLE `user` (   `id` int(11) NOT NULL AUTO_I ...