一，事件
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四个基本组件（2）之Service 服务与Content Provider内容提供商

    一.Service 维修: 一Service 这是一个长期的生命周期,没有真正的用户界面程序,它可以被用于开发如监视类别节目. 表中播放歌曲的媒体播放器.在一个媒体播放器的应用中.应该会有多个acti ...

  2. hexo从零配置next全纪录

    1.按照官网按照hexo: 2.下载next(目前使用的是最新发布版本6.4.1),解压后重命名为next,放在hexo工程themes目录下: 3.网站配置文件_config.yml中,改成them ...

  3. React Native中的DeviceEventEmitter.addListener与DeviceEventEmitter.emit

    官方文档没有对这两个方法做很好的解释,需要自己找资料研究.看了几篇文章,总结是和订阅发布模式差不多,用来事件监听发送的. React Native学习之DeviceEventEmitter传值   R ...

  4. DELPHI高性能大容量SOCKET并发（四）：粘包、分包、解包

    粘包 使用TCP长连接就会引入粘包的问题,粘包是指发送方发送的若干包数据到接收方接收时粘成一包,从接收缓冲区看,后一包数据的头紧接着前一包数据的尾.粘包可能由发送方造成,也可能由接收方造成.TCP为提 ...

  5. WPF中的3D Wireframe

    原文:WPF中的3D Wireframe WPF不支持画三维线,但开发人员提供了ScreenSpaceLines3D 类用于实现这个功能.我已经在程序中实现并成功显示3D Wireframe,并能够进 ...

  6. Expression.Blend.4 Chapter 接口设计

    原文:Expression.Blend.4 Chapter 接口设计 发现网上关于silverlight,WPF美工系列的书籍一直很少,而且很多都是英文的.在公司无聊,开始进行翻译. 翻译的地方可能有 ...

  7. 《Planet Earth II》观看笔记

    carrion:n. 腐肉:臭尸:不洁之物 cub:n. 幼兽:不懂规矩的年轻人:chick; n. 小鸡:小鸟:少妇 herd:兽群: 1. 高频单词 terrain:n. [地理] 地形,地势:领 ...

  8. 机器学习 vs. 深度学习

    1. bias/vairance Trend # 1:Scale driving Deep Learning process. 2. feature learning 的方式 A common com ...

  9. B&#233;zier curve

    Applications in computer graphics and computer-aided design (CAD) require the rapid generation of sm ...

  10. git 命令修改commit时的用户名和邮箱地址

    1.介绍 在git的用户名和邮箱是有一个仓库和全局之分的,在利用vs插件是也有显示: