jQuery-事件和应用
页面加载事件
//写法1:
$(document).ready(function(){
//代码部分
});
//写法2:(常用)
$(function(){
//代码部分
})
绑定事件
在jQuery中可以使用bind()方法进行事件的绑定。bind()功能是给每个选择元素的事件绑定处理函数。
语法:$(selector).bind(event,[data] function)
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
$(function(){ $("#btnClick").bind("click", function () {$(this).attr("disabled", "true");})
})
切换事件
在jQuery中提供了hover()和toggle()这两个方法用于事件的切换。所谓的切换事件,就是有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。
语法形式:$(selector).hover(over,out);
over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
toggle()方法toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
语法形式:$(selector).toggle(fun1(),fun2(),funN(),...)
注意:toggle()方法在1.9.0之后的版本是不支持的。
也可用于切换被选元素的 hide() 与 show() 方法。
语法形式:$(selector).toggle(speed,callback)
speed参数可选,作用是规定hide/show效果的速度;callback()参数可选,当toggle()方法完成是执行的函数。
$(function(){ // hover()方法的使用$("div").hover(function(){$(this).append("<b>:出现了</b>");},function(){$("b").remove();});
})
$(function(){//给div改变背景颜色$("#btn").toggle(function(){$("div").css("background-color","green");},function(){$("div").css("background-color","red");},function(){$("div").css("background-color","yellow");});
})
$(function(){//显示和隐藏div$("#btn").click(function(){$("div").toggle(1000);});
})
移除事件
unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
语法形式:$(selector).unbind(event,function)
其中参数event表示需要移除的事件名称,多个事件名用空格隔开,function参数为事件执行时调用的函数名称。
$(function(){$("div").click(function(){$(this).slideToggle();//给div注册隐藏事件});$("#btn").click(function(){$("div").unbind();//把div的事件移除});
})
一次性事件
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法形式:$(selector).one(event,[data],function)
其中event参数必需,当添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data参数可选,是传递到函数的额外数据。function参数必需,当事件发生时运行的函数。
$(function(){$("p").one("click",function(){$(this).animate({fontSize:"+=6px"});//字体加大,1次});
})
手动触发指定事件
trigger() 方法触发被选元素的指定事件类型。
语法形式:$(selector).trigger(event,[param1,param2,...])
其中event参数必需,是指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。后面的参数可选,是指传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
$(function(){$("div").bind("append-content",function(){$(this).append("<b>逝去的青春</b>");});$("div").trigger("append-content");
})
焦点事件
当元素获得焦点时,发生 focus 事件;当元素失去焦点时发生 blur 事件。
$(function(){ $("input").focus(function(){//获得焦点$("input").css("background-color","#FFFFCC");});$("input").blur(function(){//失去焦点$("input").css("background-color","#D6D6FF");});
})
PS:hover()
change()改变事件
语法形式:$(selector).change(function)
参数function是当change事件发生时运行的函数
$(function(){ $(".field").change(function(){//输入框,下拉菜单什么的$(this).css("background-color","#FFFFCC");});
})
jQuery-事件和应用相关推荐
- 第79天:jQuery事件总结(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件--hove ...
- 49 jQuery事件
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery事件注册 单个事件注册 语法: element.事件(function() ...
- JQuery事件绑定,bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
- jQuery事件的链式写法
<head> <title>jQuery事件的链式写法</title> <script src="jquery-1.9.1.js&q ...
- 2017-6-3 jQuery 事件 DOM操作
1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一//$("#div1").hover(function ()//{/ ...
- jQuery事件之鼠标事件
jQuery事件之鼠标事件 鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. ...
- jQuery 事件用法详解
目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jque ...
- jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
- JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 什么是 jQuery 事件
jQuery事件是DOM事件的封装,同时支持自定义的扩展.在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离. 不谈jQuery,DOM本身就提供了一系 ...
最新文章
- 我自己写的3D图形数学库。。。有点乱!
- Jquery中怎样判断是否有网络
- 学会Python正则表达式,就看这20个例子~
- Windows10电脑系统时间校准
- java导出excel文件名_怎么解决java导出excel时文件名乱码
- Another app is currently holding the yum lock; waiting for it to exit...
- iphone core animation教程
- 用户启动计算机并登录win7,win7电脑设置开机登录界面的方法?
- QQ消息自动发送器(自动发广告、聊天,支持群,支持最新的QQ2008II Beta1) C# 版...
- iptables drop与reject 的区别
- C语言中fgetc()、fgets()之间的区别
- 用计算机演奏的生日快乐歌,51单片机演奏音乐“祝你生日快乐”
- 通过ajax记录打印信息
- 2021年中国互联网网民规模及互联网普及率情况:网民总体规模持续增长,城乡地区互联网普及率差异减小[图]
- STC12C5A60S2单片机WIFI信号扫描报警监视系统信号增强信号过低报警
- PTA题目——奇偶分家
- python的网络编程用途_python---网络编程
- 计算机课程教学项目申报,关于申报校级质量工程项目的通知
- 全版本Genymotion模拟器创建过程所需的.ova文件下载地址说明
- 全国计算机软件考试用书目录