一,事件
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,这样才可以影响元素的topleftbottomright属性。
        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. js精确判断数据类型为何用Object.prototype.toString.call()而不是Object.prototype.toString()

    有何区别,为何一定要通过call. 我们知道call是用来改变函数作用域的,Object.prototype.toString.call在这儿也是用来改变作用域的. Object.prototype. ...

  2. TabHost两种实现方式

    第一种:继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost.只要定义具体Tab内容布局就行了. <?xml version="1.0 ...

  3. Java--垃圾收集算法及内存分配策略

    本篇博客,主要介绍GC的收集算法以及根据算法要求所得的内存分配策略! 一.收集算法 收集算法,主要包括四种,分别是:Mark-Sweep(标记-清除).Copying(复制).Mark-Compact ...

  4. quick-cocos2d-x游戏开发【8】——动画与动作

    动画与动作,在quick中都有对其封装,所以我们还是来看一下吧. 总的来说,对于帧动画,quick封装的方法我们能够常常使用,这是很方便的,以下直接上代码来直观感受下, 比方,14张帧图片,採用coc ...

  5. 简明Python3教程 首页

    A Byte of Python 'A Byte of Python' is a free book on programming using the Python language. It serv ...

  6. BIOS 选项设置的含义

    SATA Mode Section: ADHI: Advanced Host Controller Interface - this is a hardware mechanism that allo ...

  7. IOS开发之把 Array 和 Dictionaries 序列化成 JSON 对象

    1 前言通过 NSJSONSerialization 这个类的 dataWithJSONObject:options:error:方法来实现,Array 和 dictionary 序列化成 JSON ...

  8. ELK日志系统:Elasticsearch + Logstash + Kibana 搭建教程 good

    环境:OS X 10.10.5 + JDK 1.8 步骤: 一.下载ELK的三大组件 Elasticsearch下载地址: https://www.elastic.co/downloads/elast ...

  9. delphi 线程教学第一节:初识多线程(讲的比较浅显),还有三个例子

    http://www.cnblogs.com/lackey/p/6297115.html 几个例子: http://www.cnblogs.com/lackey/p/5371544.html

  10. ReportViewer,RDLC 报表开发之个性化样式

    原文:ReportViewer,RDLC 报表开发之个性化样式 报表开发中,客户对样式提出了要求: 1.工具栏上显示每页条数 2.只导出Excel,不需要下拉菜单. 3.报表上显示的图表,分页时,每页 ...