jquery学习笔记(三):事件和应用
内容来自【汇智网】jquery学习课程
3.1 页面加载事件
在jQuery中页面加载事件是ready()。ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。
ready()方法的几种写法:
//写法一:
$(document).ready(function(){
//代码部分
}); //写法二: $(function(){
//代码部分
})
写法二简洁明了,使用是最广泛的
3.2 绑定事件
在jQuery中可以使用bind()方法进行事件的绑定。bind()功能是给每个选择元素的事件绑定处理函数。
语法:$(selector).bind(event,[data] function)
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
示例如下:
<script type="text/javascript">
$(function(){ //绑定按钮点击事件
$("#btnClick").bind("click", function () {
$(this).attr("disabled", "true");
}) //实时监测输入变化(不是失去焦点),适用于input、textare
$('#advice').bind('input propertychange', function() {
//代码
}); }) </script>
...省略代码 <h3> bind()方法绑定事件</h3> <input id="btnClick" type="button" value="点击之后按钮不可用">
3.3 切换事件
在jQuery中提供了hover()和toggle()这两个方法用于事件的切换。所谓的切换事件,就是有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。
hover()方法:
hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切换效果。
语法形式:$(selector).hover(over,out);
over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
toggle()方法:
toggle()方法toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
语法形式:$(selector).toggle(fun1(),fun2(),funN(),...)
注意:toggle()方法在1.9.0之后的版本是不支持的。
也可用于切换被选元素的 hide() 与 show() 方法。
语法形式:$(selector).toggle(speed,callback)
speed参数可选,作用是规定hide/show效果的速度;callback()参数可选,当toggle()方法完成是执行的函数。
示例如下:
<script type="text/javascript">
$(function(){ // hover()方法的使用
$("div").hover(
function(){
$(this).append("**:爆装备**");
},
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);
});
})
</script>
...省略代码 <h3> 切换事件</h3> <div id="bindTest">打土豪</div>鼠标移上去看看
<input type="button" id="btn" value="toggle()方法改变div背景色">
3.4 移除事件
unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
语法形式:$(selector).unbind(event,function)
其中参数event表示需要移除的事件名称,多个事件名用空格隔开,function参数为事件执行时调用的函数名称。
示例如下:
...省略代码<p></p>
<p><script type="text/javascript">
$(function(){
$("div").click(function(){
$(this).slideToggle();//给div注册隐藏事件
});
$("#btn").click(function(){
$("div").unbind();//把div的事件移除
});
})
</script>
...省略代码</p>
<h3> 移除事件</h3> <div>帽子,点击之后消失</div>
<div>上衣,点击之后消失</div>
<div>裤子,点击之后消失</div>
<div>内裤,点击之后消失</div>
<div>鞋子,点击之后消失</div>
<input type="button" id="btn" value="点击之后隐藏事件被移除了">
...省略代码
3.5 一次性事件
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法形式:$(selector).one(event,[data],function)
其中event参数必需,当添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data参数可选,是传递到函数的额外数据。function参数必需,当事件发生时运行的函数。
示例如下:
<script type="text/javascript">
$(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
})
</script>
...省略代码
<h3>one()方法的使用</h3>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
3.6 手动触发指定事件
trigger() 方法触发被选元素的指定事件类型。
语法形式:$(selector).trigger(event,[param1,param2,...])
其中event参数必需,是指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。后面的参数可选,是指传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
示例如下:
<script type="text/javascript">
$(function(){
$("div").bind("append-content",function(){
$(this).append("**,那是我逝去的青春**");
});
$("div").trigger("append-content");
})
</script>
...省略代码
<h3>trigger()手动触发事件</h3>
<div>在夕阳下奔跑,</div>
<div>在夕阳下奔跑</div>
3.7 焦点事件
当元素获得焦点时,发生 focus 事件;当元素失去焦点时发生 blur 事件。
示例如下:
<script type="text/javascript">
$(function(){
$("input").focus(function(){//获得焦点
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){//失去焦点
$("input").css("background-color","#D6D6FF");
});
})
</script>
...省略代码
<h3>焦点事件</h3>
输入名字: <input type="text">
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
3.8 change()改变事件
当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
语法形式:$(selector).change(function)
参数function是当change事件发生时运行的函数
示例如下:
<script type="text/javascript">
$(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
})
</script>
...省略代码 <p>在某个域被使用或改变时,它会改变颜色。</p>
名 称: <input class="field" type="text">
<p>性别:
<select class="field" name="male">
<option value="volvo">男</option>
<option value="saab">女</option>
<option value="audi">保密</option>
</select>
</p>
备注:当控件失去焦点时,change()才会执行,如果想实时监测文本框输入改变,请参考bind()事件
$(selector).bind('input propertychange',function(){
//your code
});
jquery学习笔记(三):事件和应用的更多相关文章
- Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>
Caliburn.Micro学习笔记目录 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现 ...
- jQuery学习笔记(事件)
1. 加载DOM jQuery用$(document).ready()方法来代替传统JavaScrpt的window.onload方法.但它们执行时机有所不同,window.onload在网页所有元素 ...
- jQuery学习笔记(5)-事件与事件对象
一.前言 主要讲解事件的绑定与触发 二.jQuery中添加事件 1.使用bind()方法绑定事件 <input id="btn" type="button" ...
- jQuery学习笔记三
使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...
- 初步学习jquery学习笔记(三)
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
随机推荐
- linux crontab 计划任务编写
在linux中启动crontab服务: /etc/init.d/crond start crontab的命令格式 crontab -l 显示当前的crontab 文件(默认编写的crontab文件会保 ...
- MySQL日期格式化 利用Mysql的DATE_FORMAT()进行日期格式转换
碰到一个MYSQL的问题,表logstatb中moment字段的内容是"年-月-日 时:分:秒",需要查询匹配“年月日”或“时:分:秒”即可的数据条目,这个时候就可以通过下面的SQ ...
- LoadRunner模拟REST接口的json请求
LoadRunner模拟REST接口的json请求 现在很多手机应用的性能测试,REST接口调用通过json格式,在用loadrunner模拟这些json请求时,需要开发提供 1.供接口地址 2.提交 ...
- quartz的使用(一)
1.quartz是什么? Quartz 是一个完全由 Java 编写的开源作业调度框架,支持各种灵活的应用方式,并同时支持分布式和集群能力.2.quartz的基本要素 2.quartz的基本要素 Sc ...
- Dart编程变量
变量是"存储器中的命名空间",用于存储值.换句话说,它作为程序中值的容器.变量名称称为标识符.以下是标识符的命名规则 - 标识符不能是关键字. 标识符可以包含字母和数字. 标识符不 ...
- thinkphp 防止XSS(跨站脚本攻击)
XSS(跨站脚本攻击)可以用于窃取其他用户的Cookie信息,要避免此类问题,可以采用如下解决方案: 直接过滤所有的JavaScript脚本: 转义Html元字符,使用htmlentities.htm ...
- MFC进度条
一.成员函数简介 1.create()针对不是通过资源文件上拖拉进度条控件生成的进度条,需要用此函数创建一个. 2.SetRange()设置进度条的起始值和终止值. 3.SetPos()设置进度条的当 ...
- Spring-Security (学习记录六)--采用ehcache缓存UserDetails
目录 1. spring-security提供了缓存UserDetails的UserDetailsService实现类. 2. 通过配置来完成缓存 UserDetails (使用ehcache) 3. ...
- (转)linux下装tomcat
转载于:http://www.linuxidc.com/Linux/2016-11/136959.htm (linux社区) 1 tomcat介绍 Tomcat 是由 Apache Foundatio ...
- Devstack配置负载均衡,负载均衡版本V2
本文为minxihou的翻译文章,转载请注明出处Bob Hou: http://blog.csdn.net/minxihou JmilkFan:minxihou的技术博文方向是 算法&Open ...