jQuery学习(三)
事件
on方法可以将一个事件绑定在jQuery对象上，当你的操作触发了这些事件时，便会调用你所绑定的函数。
例如，给某个超链接绑定点击事件。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/jquery-1.12.0.js"></script>
<script>
$(document).ready(function(){
var a = $('a');
a.on('click', function(){
alert('Hello Word');
});
});
</script>
<title>Event</title>
</head>
<body>
<a href="#0">Click</a>
</body>
除了用on()以外，还可以直接用click来绑定点击事件。
<script>
$(document).ready(function(){
var a = $('a');
a.click(function(){
alert('Hello');
});
});
</script>
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
其中，ready仅作用于document对象上，在页面DOM树构建完成后触发。
正如上述代码所示，除了能够用on绑定ready事件外，ready事件也可以像click一样被简写。甚至能被更简单的写为：
<script>
$(function(){
var a = $('a');
a.click(function(){
alert('Hello');
});
});
</script>
而且这种写法更为常见。
如果想获得事件的其他内容，可以在function传入变量e来获取。
取消绑定：
和on()相反的是，off()可以帮我们取消jQuery对象上的事件绑定，
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/jquery-1.12.0.js"></script>
<script>
$(function(){
var a = $('a');
a.click(function(){
alert('Hello');
});
var bt = $('button');
bt.click(function(){
a.off('click');
alert('event_off');
});
});
</script>
<title>Event</title>
</head>
<body>
<a href="#0">Click</a>
<button>event_off</button>
</body>
点击Button时取消了链接的点击事件，再点击链接不会出现提示框。
实际上，这里我们将a链接上的点击事件绑定函数全部取消了，如果只想取消某一个函数，那么我们在绑定时，就不能够采用匿名函数。并且在取消时，将函数对象也作为参数传入。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/jquery-1.12.0.js"></script>
<script>
$(function(){
var click_f2 = function(){
alert('hello 2');
};
var a = $('a');
a.click(function(){
alert('Hello');
});
a.click(click_f2); var bt = $('button');
bt.click(function(){
a.off('click',click_f2);
alert('click_f2 off');
});
});
</script>
<title>Event</title>
</head>
<body>
<a href="#0">Click</a>
<button>event_off</button>
</body>
这段代码中，我们只取消绑定了click_f2，而Hello仍然正常提示。同时我们可以发现绑定事件响应的先后顺序是根据绑定的先后来的。
事件通常是由用户操作触发，如果我们希望代码可以直接触发事件，则可用trigger()，这样能够避免我们写很多重复的代码。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/jquery-1.12.0.js"></script>
<script>
$(function(){
var a = $('a');
a.click(function(){
alert('Hello');
}); var bt = $('button');
bt.click(function(){
a.trigger('click');
});
});
</script>
<title>Event</title>
</head>
<body>
<a href="#0">Click</a>
<button>event_off</button>
</body>
当我们点击按钮时，我们在代码内部触发了a的点击事件，因此也能弹出Hello。
动画：
我们已经知道了通过show()和hide()方法，可以让一个jQuery对象消失或者隐藏。但是当我们给方法传入一个参数时，页面就能呈现渐变的效果，一般传入的参数是毫秒数，但是'slow'和'fast'也能作为参数传入。
show()和hide()是对象由左上角逐渐收起或是展开，而slideUp()和slideDown()则是垂直方向的收起和展开。
fadeIn()和fadeOut()表示渐入渐出的效果。
同时，jQuery还通过animate()支持自定义动画效果。给animate传入最终的CSS样式和变化的时间，则可以在指定时间内渐变成最后的样式。同时，animate还能够传入回调函数，在动画结束后被调用。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Animate</title>
<script src='./js/jquery-1.12.0.js'></script>
<script>
$(function(){
var bt = $('button');
var div = $('#test-animate');
bt.click(function(){
div.animate({
width: '256px',
height: '256px'
},3000,function(){
alert('animate done');
});
});
});
</script>
</head>
<body>
<div id='test-animate'></div>
<button>change CSS</button>
</body>
jQuery学习(三)的更多相关文章
- Jquery 学习三
一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...
- JQuery学习三(隐式迭代和节点遍历)
在JQuery中根据id获取控件,如果输入id错误是不报错的. 必要时可以通过写判断语句进行判断是否id写错 <!DOCTYPE html> <html xmlns="ht ...
- jQuery学习三——事件
代码如下: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </head& ...
- jquery 学习(三) - 遍历操作
HTML代码 <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p&g ...
- jQuery学习(三)——选择器总结
1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery学习-事件之绑定事件（三）
在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...
- jquery学习笔记(三)：事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
随机推荐
- VS2019中QT连接及使用
23:27:43 2019-08-09 qt连接VS 连接前提是在下载qt的时候将 MSVC 2017装上 点击扩展 选择管理扩展 搜索qt 选择下载 之后下载结束并重新打开后 会弹出一个 QT o ...
- PTA | 1020. 月饼 (25)
月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...
- 在Android Studio中导入jar包
#1 下载jar包文件, #2 拷贝到libs目录下 #3 打开你的build.gradle,在dependencies加入如下代码 dependencies {compile files('libs ...
- Python爬虫系列（五）：分析HTML结构
今晚,被烦死了.9点多才下班,就想回来看书学习,结果被唠叨唠叨个小时,我不断喊不要和我聊天了,还反复说.我只想安安静静看看书,学习学习,全世界都不要打扰我 接着上一个讨论,我们今晚要分析HTML结构了 ...
- 【半监督学习】MixMatch、UDA、ReMixMatch、FixMatch
半监督学习(Semi-Supervised Learning,SSL)的 SOTA 一次次被 Google 刷新,从 MixMatch 开始,到同期的 UDA.ReMixMatch,再到 2020 年 ...
- Camunda 流程引擎的一种 Adapter 层实现
上一篇说明了选择 Camunda 的理由.这一篇说明如何实现适配层. 当前还没有专门写一篇对 Camunda 各个功能的详细介绍.如果要获得比较直观的感受,可以下载 Modeler 或者使用在线版的 ...
- 负载均衡服务之HAProxy基础入门
首先我们来了解下haproxy是干嘛的?haproxy是一个法国人名叫Willy Tarreau开发的一个开源软件:这款软件主要用于解决客户端10000以上的同时连接的高性能的TCP和HTTP负载均衡 ...
- MDC是什么鬼？用法、源码一锅端
近期用到阿里的一款开源的数据同步工具 Canal,不经意之中看到了 MDC 的用法,而且平时项目中也多次用到 MDC,趁机科普一把. 通过今天的分享,能让你轻松 get 如下几点,绝对收获满满. a) ...
- HTML+CSS教程（六）浮动-float+定位-position+居中问题
一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置 ...
- 移植seetafaceengine-master、opencv到ARM板
0.前言 在要移植opecv和SeetaFaceEngine-master到ARM板子上运行的所有步骤之前,有几点需要注意的: 查看板子运行的Kernel版本 交叉编译工具链的gcc版本,关键就是工具 ...