事件:

1、//方法1

$(window).load(function(){

})

window.onload=function(){

}

//方法2

function one(){

alert("one");

}

function two(){

alert("two");

}

//这样的执行结果应该是two,因为onload事件只会保存对一个函数的引用

window.onload = one;

window.onload = two;

修改为以下格式:

window.onlaod=function(){

one();

two();

}

在jQuery中,还可以这样,jQuery的onlaod事件是可以执行多个函数的

function one(){

alert("one");

}

function two(){

alert("two");

}

$(document).ready(function(){

one();

})

$(document).ready(function(){

two();

})

2、

$(document).ready(function(){

two();

})

可以简写成:

$(function(){

})

$().ready(function(){

})

//$()的默认情况下就是document

3、事件绑定:bind(事件类型 ,可选参数(作为event.data属性值传递给事件对象的额外数据对象,处理函数fn)

bind()方法可以多次调用,this引用的是携带相应行为的DOM元素$(this)

方法1:

$(function(){

$("#panel h5.head").bind("click",function(){

if($(this).next().is(":visible")){

$(this).next().hide();

}else{

$(this).next().show();

}

})

})

方法2:

$(function(){

$("#panel h5 .head").bind("mouseover",function(){

$(this).next().show();

}).bind("mouseout",function(){

$(this).next().hide();

})

})

方法3:

$(function(){

$("#panel h5 .head").mouseover(function(){

$(this).next().show();

}).mouseout(function(){

$(this).next().hide();

})

})

4、jQuery有两个合成事件:hover()以及toggle()方法

hover(enter,laeve)

$(function(){

$("#panel h5 .head").hover(function(){

$(this).next().show();

}.function(){

$(this).next().hide();

})

})

5、toggle()方法

方法1:

$(function(){

$("#panel h5 .head").toggle(function(){

$(this).next().show();

},function(){

$(this).next().hide();

})

})

方法2:

//toggle()还有一个作用是切换元素的可见性,如果元素可见,切换后则为隐藏,隐藏切换后则是可见的

$(function(){

$("#panel h5 .head").toggle(function(){

$(this).next().toggle();

},function(){

$(this).next().toggle();

})

})

6、事件冒泡:

停止事件冒泡:event.stopPropagation()

阻止事件默认行为:event.preventDefault()

如果想对事件对象停止冒泡以及默认行为,在可以事件处理函数中返回false:

event.stopPropagation()改成  return false

event.preventDefault() 改成 return false

7、在jQuery中不支持事件捕获,如果需要事件捕获,使用原生的js代码

8、event.type 事件类型

event.target    获取触发事件的元素

event.pageY以及event.pageX 是获取到光标相对于页面的y坐标以及x坐标,如果页面有滚动条还要加上滚动条的宽度以及高度

event.which   是在鼠标事件中获取到鼠标的左右中键,分别返回1,2,3,

9、移除事件:unbind(“click”)

$(function(){

$("#btn").bind("click",myFun1 = function(){

$("#test").append("<p>wwwww</p>");

}).bind("click",myFun2 = function(){

$("#test").append("<p>wwwwssw</p>");

}).bind("click",myFun3 = function(){

$("#test").append("<p>wwwwqw</p>");

})

})

//单独删除某一事件

$("#delTwo").click(function(){

$("#btn").unbind("click",myFun2);

})

10、one()方法是对于只需要触发一次的,触发一次后就会解除绑定,也就是说只要在用户第一次点击的时候,处理函数才会生效

11、trigger(”click”)   -----eg:用户在进入页面后就会触发click事件,不需要用户去主动点击

$(“#btn”).trigger(“click”) 等价于$(“#btn”).click()

另外还可以通过传递数据参数:

$("#btn").bind("myClick",function(event,message1,message2){

$("#test").append("<p>"+message1+message2+"</p>");

});

$("#btn").trigger("myClick",["我的自定义","事件"]);

trigger()方法执行事件后会执行浏览器的默认事件,如果不想执行默认事件,需要使用以下方法:

$("input").triggerHandler("focus")---取消聚焦事件

12、还可以一次性为元素绑定多个事件

$(function(){

$("div").bind("mouseover mouseout",function(){

$(this).toggleClass("over");

})

})

13、为事件添加命名空间

$(function(){

$("div").bind("click .plugin",function(){

$("body").append("<p>click</p>");

});

$("div").bind("mouseover .plugin",function(){

$("body").append("<p>click</p>");

});

$("div").bind("dbclick",function(){

$("body").append("<p>click</p>");

});

$("button").click(function(){

$("div").unbind(".plugin");

//会删除含有命名空间.plugin的事件,不会删除dbclick事件

})

})

14、

$(function(){

$("div").bind("click .plugin",function(){

$("body").append("<p>click</p>");

});

$("div").bind("click",function(){

$("body").append("<p>click</p>");

});

$("button").click(function(){

$("div").trigger("click!");

//点击button按钮只会触发click事件,click后面的感叹号是用来匹配所有不包含在命名空间的click方法

//当将感叹号去了之后会触发两个click事件,包含在命名空间中的click事件

})

})

jQuery中的动画:

1、show()以及hide()方法

相当于display = none /block/inline-block

在两个方法中添加参数,slow,fast,normal,获取是一个数值

2、fadeIn()以及fadeOut()方法:只改变元素的透明度

3、slideUp()以及slideDown()方法:只改变元素的高宽,slideUp是由下到上缩短隐藏,slideDown是由上到下显示

4、animate()方法:

animation(params(样式属性),speed,callback)

$("#myImg").click(function(){

$(this).animate({left:"500px",height:"200px"},300);

})

5、停止元素的动画:stop([clearQuere],[gotoEnd]),两个参数都是一个布尔值

6、判断元素是否处于动画状态:

if(! $(element).is(":animated")){

}

7、延迟动画:delay(10000)

8、toggle(speed,[callBack])

slideToggle(speed,[easing],[callback])—通过高度变化切换匹配元素的可见性

fadeTo(speed,opacity,[callBack])---将元素的不透明度以渐进方式调整到指定值

fadeToggle(speed,[easing],[callBack])---通过透明度变化切换匹配元素的可见性

jQuery-事件以及动画的更多相关文章

  1. jQuery事件以及动画

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

  2. jQuery事件与动画

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

  3. JQuery 事件与动画

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

  4. 第三章 jQuery事件和动画

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

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

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

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

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

  7. JQuery事件与动画总结

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...

  8. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

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

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

  10. jQuery事件和动画

    1.toggle事件 <!DOCTYPE html>   <html>   <head lang="en">   <meta charse ...

随机推荐

  1. IOS searchBar去掉背景

    修改UISearchBar的背景颜色 UISearchBar是由两个subView组成的,一个是UISearchBarBackGround,另一个是UITextField. 要IB中没有直接操作背景的 ...

  2. IOS开发中与设计沟通之字体大小转换

    px:相对长度单位.像素(Pixel).pt:绝对长度单位.点(Point).1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Ems ...

  3. 128. Longest Consecutive Sequence(leetcode)

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  4. Good Bye 2015B(模拟或者二进制枚举)

    B. New Year and Old Property time limit per test 2 seconds memory limit per test 256 megabytes input ...

  5. hdu 1860统计字符

    本来是想用map写的,但是map里面会自动按字典序升序排序导致wa了一把,供 #include<time.h> #include <cstdio> #include <i ...

  6. jQuery 操作复选框(checkbox) attr checked不起作用

    参考资料 http://www.paobuke.com/develop/javascript/pbk849.html   这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...

  7. Redis笔记(七)Java实现Redis消息队列

    这里我使用Redis的发布.订阅功能实现简单的消息队列,基本的命令有publish.subscribe等. 在Jedis中,有对应的java方法,但是只能发布字符串消息.为了传输对象,需要将对象进行序 ...

  8. Python win32api提取exe图标icon

    转载地址: http://blog.csdn.net/gumanren/article/details/6129416 代码如下: # -*- coding: utf-8 -*- import sys ...

  9. Web框架之Tornado

    概述 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了 ...

  10. 【数据结构】建立和平衡AVL二叉树

    一步一步写平衡二叉树(AVL树) 原文地址:http://www.cppblog.com/cxiaojia/archive/2012/08/20/187776.html 我添加了一些内容,以充实整个算 ...