jquery学习笔记(三)事件和动画

一、ready机制

$(document).ready( function(){} )

$().ready( function(){} )

$( function(){} )

 jquery的ready函数会在dom准备完毕后执行,并且可以多次使用

$(selector).load( function(){} ) 此方法相当于js自身的onload方法

如 $(window).load(function(){})    相当于  window.onload=function(){}

-----------------------------------------------------------------------------------

二、事件绑定

$(selector).bind( type[,date],fn )

事件绑定函数,type不用带on前缀,而且还可以是多个事件,用空格隔开,date会作为event.date的值传给事件对象,fn是监听函数

一些简化的事件绑定函数:

$(selector).click( function(){} )

支持这种写法的时间还有 mouseover、mouseout  等

juqery的自定义事件:

$(selector).hover( enterFun,leaveFun )

enterFun为鼠标移入元素时执行的函数,leaveFun为鼠标离开元素时执行的函数

$(selector).toggle( fun1,fun2,…,funn )

当每一次单击selector时,会按顺序轮番调用toggle里的函数

如果toggle方法不带参数,则调用toggle方法的元素会在可见与不可见之间进行切换

如:$(selector).toggle()   //假设初始是可见的,则这时会隐藏    $(selector).toggle()   //再次调用,元素变为可见

三、事件对象的属性

event.type()   获取事件类型

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

event.stopPropagation()  阻止事件继续向上冒泡

event.target()  获取事件元素

event.pageX/Y()  获取鼠标相对于页面的x/y坐标,如果有滚动条,则还要加上滚动条的距离

event.which()  鼠标事件中获取鼠标的左、中、右键,左、中、右键分别返回1、2、3 ;键盘事件中获取键盘按键

四、 移除事件

$(selector).unbind( [type][,date] )

第一个参数是事件类型,第二个参数是要移除的监听函数,如果没有参数则删除所有类型的所有事件,如果只有type参数,则只删除该类型事件

$(selector).one( type,[date],fn )

用来触发一次事件的函数,即该事件只能触发一次,以后便无效了

五、自动触发事件

$(selector).trigger( type[,date])

用来自动触发某类事件,对触发自定义事件尤其有用

$(selector).triggerHandler( type[,date])

上面的函数触发的事件会执行浏览器的默认动作,而该函数触发的事件则不会

六、Jquery中的动画

hide()、show()

hide方法把元素的display属性改为none

show方法把元素的display属性改为block或inline(视hide之前元素的diaplay属性而定)

hide()和show()方法还可以带一个表示时间的参数,这样便可实现渐隐和渐显效果,参数可以是一个数字,单位为毫秒,也可以是“slow”、“normal”、“ fast”三个常量

hide()和show()方法会同时减少元素的高度、宽度和透明度

fadeIn()、fadeOut()

这两个函数与hide()、show()方法用法类似,只不过这两个函数改变的只是元素的透明度

slideUp()、slideDown()

与hide()、show()方法用法类似,只不过改变的是元素的高度

注:Jquery中的任何动画,都可以指定3中速度参数,即"slow"、"normal"、"fast",时间长度分别是0.4,0.6,0.2秒,使用速度关键字时要加引号,也可以直接使用数字,单位为毫秒,这时不用加引号

animate( params[,speed][,callback] )

自定义动画函数,参数说明如下:

params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2",…},如果value前出现了+=或-=,比如{width:"+=400px"},则表示是在原来值的基础上作动画

speed:速度参数,可选

callback:动画执行完毕时的回调函数,可选

对同一个元素运用多个animate时(或其他动画函数),则会产生动画队列,即每个animate会按先后顺序执行

stop( [queue] [,gotoEnd] )

queue:布尔类型,为true时表示清空后面的动画队列

gotoEnd:布尔类型,为true时表示跳转到正在执行动画的末状态

当使用stop()方法时,会立即停止正在执行的动画

toggle()

toggle()方法用来切换元素的可见状态,如果元素时可见的则切为隐藏的,如果元素时隐藏的则切为可见的

fadeTO( speed,opacity )

可以把元素的透明度以渐进的方式调整到指定值

时间: 2024-12-10 21:42:12

jquery学习笔记(三)事件和动画的相关文章

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T> 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现和源码 下一篇用它们做一个多语言的demo 这两个是事件的订阅和广播,很强大,但用的时候要小心发生不必要的冲突. 先看一下它的实现思想 在Caliburn.Micro里EventAggregator要以单例的形式出现这样可以

jQuery学习笔记(三)jQuery中的动画

1 show() 方法和hide() 方法  (显示和隐藏) show() 方法和hide() 方法是jQuery中基本的动画方法.在HTML文档里,为一个元素调用hide() 方法,会将该元素的display样式改为“none”. $("element").hide(); //通过hide()方法将element元素隐藏 $("element").css("display","none"); //通过css()方法将elem

jQuery学习笔记之过滤器三(向上查找兄弟元素、向下查找兄弟元素)

向上查找兄弟元素的方法:prev方法.prevAll方法.prevUntil方法 向下查找兄弟元素:next方法.nextAll方法.nextUntil方法 向上查找兄弟元素 1.prev方法 2.prevAll方法 3.prevUntil方法 向下查找兄弟元素 1.next方法 2.nextAll方法 3.nextUntil方法 jQuery学习笔记之过滤器三(向上查找兄弟元素.向下查找兄弟元素)

jQuery学习笔记(2014年8月3日)事件委派

jQuery中的事件委托是通过 closest() 来完成的. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 参考资料: jQuery 遍历 - closest() 方法http://www.w3school.com.cn/jquery/traversing_closest.asp jQuery学习笔记(2014年8月3日)事件委派

Silverlight动画学习笔记(三):缓动函数

(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果,但可能需要执行大量的工作,并且与使用算术公式相比动画的精确性将降低. (三)实例讲解: 1 <UserControl x:Class="AnimationStudy.EasingFunctionAnimation" 2 xmlns="http://schemas.mic

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,