位置: 编程技术 - 正文
推荐整理分享jQuery中事件与动画的总结分享(jquerybind事件),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:jqueryon事件,jquery中的事件和事件处理有哪些,jquery中的事件,jquery的事件处理机制包括,jquery的事件处理机制包括,jqueryon事件,jquery中的事件和事件处理有哪些,jquery中的事件与动画,内容如对您有帮助,希望把文章链接给更多的朋友!
1.加载DOM
1.1.window事件
window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行
$(function(){}) ……:只是等待标签完毕,即可执行
区别:前者在HTML页面中只能解析最后一个,二后者是N个
第一部分--事件
2.鼠标事件
2.1 常用鼠标事件的方法
click() :单击事件、触发或将函数绑定到指定元素的click事件
mouseover(): 触发或将函数绑定到指定元素的mouseover事件
mouseout() :触发或将函数绑定到指定元素的mouseout的事件
经典的光棒效果:
3.键盘事件
3.1 常用键盘事件的方法
keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件
keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件
keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件
4.表单事件
4.1 常用表单事件的方法
focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件
blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件
5.绑定事件与移除事件
5.1 绑定事件
语法:
bind(type,[data],fn),其中data不是必需的
type:事件类型、主要包括blur、focus、click、mouseout等基础事件,此外也还可以是自定义事件
fn :用来绑定的处理函数
5.2 同时绑定多个事件
5.3 移除事件与同时移除多个事件
unbind([type],[fn]) 与绑定事件刚好相反,如果方法没有参数则表示移除全部的事件
unbind如果要移除多个只需在两两之间添加一个空格即可
5.4 一些其他的绑定与移除的方法
1.live() unbind()
2.on() jQuery1.7版本之后才有的方法 off()
3.delegate() undelegate()
6. 复合事件
6.1 hover()方法
语法:
hover(enter,leave); 该方法相当于mouseover与mouseout事件的组合
6.2 toggle()方法
语法:
toggle(fn1,fn2,……,fnN); 该方法用于模拟鼠标连续click事件,单鼠标单击一次就执行一个fn,从头开始按顺序执行,tolgge()使用的隐藏域属于
display,它在浏览器中是不占用位置的,与它相同的visibility是占用的
接下来再看看第二部分--动画
1. 控制元素显示与隐藏
语法:
$(select).show([speed],[callback]);
与show()方法相对的是hide()方法,该方法可以控制元素隐藏。
语法:
$(select).hide([speed],[callback]); 除了可以控制元素的隐藏外,还能定义隐藏元素时的效果,如隐藏速度
注意:绝大多数情况下,hide()方法与show()方法总是在一起使用
2. 控制元素透明度
2.1 控制元素淡入
语法:
$(select).fadeIn([speed],[callback]);
与show()方法相对的是fadeOut()方法,该方法可以控制元素淡出。
3. 改变元素高度
3.1 方法 slideUp()和slideDown()
slideDown()会将元素从上向下延伸显示,slideUp()方法正好相反,元素会从下到上缩短直至隐藏。
4.animate()方法是用来自定义动画的
当我们需要对动画有更多的控制时,使用animate()方法能够更具有灵活性,因为它可以替换其他所有的方法
4.1 animate()方法替换一些其他的方法
这些动画就是animate()方法的一种内置了特定样式的简写形式,这些特定的样式值可以为"show"、"hide"、"toggle",也可以自定义数值
$("div").click(function() { $(this).next().toggle(); $(this).next().fadeTo(,0.2); $(this).next().fadeToggle(); $(this).next().slideToggle(); });
以上这篇jQuery中事件与动画的总结分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。
jQuery+php实时获取及响应文本框输入内容的方法 本文实例讲述了jQuery+php实时获取及响应文本框输入内容的方法。分享给大家供大家参考,具体如下:该程序能够查出可用余额:HTML部分:inputtype="text"na
jQuery获取及设置表单input各种类型值的方法小结 本文实例讲述了jQuery获取及设置input各种类型值的方法。分享给大家供大家参考,具体如下:获取一组radio被选中项的值varitem=$("input[@name=items]:checked").v
jquery简单插件制作(fn.extend)完整实例 本文实例讲述了jquery简单插件制作方法。分享给大家供大家参考,具体如下:!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
标签: jquerybind事件
本文链接地址:https://www.jiuchutong.com/biancheng/387253.html 转载请保留说明!友情链接: 武汉网站建设