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 )
可以把元素的透明度以渐进的方式调整到指定值
jquery学习笔记-----事件和动画的更多相关文章
- jquery学习笔记(四):动画
内容来自[汇智网]jquery学习课程 4.1 显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).h ...
- jQuery学习笔记——事件
何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
随机推荐
- [BZOJ3991][SDOI2015]寻宝游戏
[BZOJ3991][SDOI2015]寻宝游戏 试题描述 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择 ...
- Android 数据存储之 文件存储
-------------------------------------------文件存储----------------------------------------------- 文件存储是 ...
- Asp.net MVC网站的基本结构
Asp.net MVC网站的基本结构:Controller->IBLL(定义业务接口)->BLL->DA(调用Utility)->数据库 ,其中A->B表示A调用B 1. ...
- oracle:安装笔记
- Google Code Jam 2015 R1C B
题意:给出一个键盘,按键都是大写字母.给出一个目标单词和一个长度L.最大值或者最大长度都是100.现在随机按键盘,每个按键的概率相同. 敲击出一个长度为L的序列.求该序列中目标单词最多可能出现几次,期 ...
- iOS 动画结束后 view的位置 待完善
默认的动画属性,动画结束后,view会回到原始位置.但是如果设定了 CAAnimation的 removedOnCompletion 属性,那么view会保持这个位置!但是真实的接收 点击的frame ...
- 关于TxQBService报的错,腾讯你真牛B啊
腾讯你真牛B啊,浏览器都7了,还特么的报这么低级的错误,还每10秒写一条windows日志,让人有什么心情用你的浏览器,滚.
- Effective C++ -----条款03:尽可能使用const
如果关键字const出现在星号左边,表示被指物是常量:如果出现在星号右边,表示指针自身是常量:如果出现在星号两边,表示被指物和指针两者都是常量. char greeting[] = " he ...
- eclipse修改jdk后版本冲突问题
将安装的jdk1.8改为1.7之后出现了很淡疼的问题 修改工程下.setting/ org.eclipse.jdt.core.prefs eclipse.preferences.version=1or ...
- 【leetcode】Remove Duplicates from Sorted Array I & II(middle)
Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...