JQuery事件(2)
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函数 |
绑定函数至 |
$(document).ready(function) |
将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
jQuery 事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
实例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!--注意引入的文件是否一致-->
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//点击会隐藏
$("p").hide();
});
$("#btn2").click(function(){
//点击背景变红
$("p").css("background-color","red");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id="btn1">Hide</button>
<button type="button" id="btn2">ChangeColor</button>
</body>
</html>
JQuery事件(2)的更多相关文章
- JQuery选择器JQuery 事件
JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
- 解密jQuery事件核心 - 委托设计(二)
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
- 解密jQuery事件核心 - 模拟事件(四)
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- jQuery事件总结
blur() 触发或绑定blur事件.$("input").blur(function(){ $("input").css("background-c ...
随机推荐
- 利用uniGUI中的TUniPageControl实现多页面
远行效果: 实现代码: procedure TfrmMain.OpenForm(Caption,FormClassName:string);var i:integer; sheet:TUniTab ...
- electron关于无边框窗口无法拖拽移动以及点击事件失效的问题
为了使窗口无边框,使得在某些时候让项目看起来更美观,所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口.但是无边框窗口会产生无法移动的问题,对于这个问题我们可以在渲染进 ...
- tensorflow分布式运行
1.知识点 """ 单机多卡:一台服务器上多台设备(GPU) 参数服务器:更新参数,保存参数 工作服务器:主要功能是去计算 更新参数的模式: 1.同步模型更新 2.异步模 ...
- OpenStack 的单元测试
目录 文章目录 目录 前言 单元测试能提高生产率 Python 单元测试工具清单 unittest Test Discover Test Fixture Test Suite Assert(断言) m ...
- 引入easyui的404问题
直接在webapp创建css文件夹添加easyui 引入: <link rel="stylesheet" type="text/css" href=&qu ...
- 【知乎】github,Empty reply from server?
http://www.zhihu.com/question/26717343 问:用hexo搭了个blog,之前一直正常,最近在deploy的时候无法连接到github了. fatal: unab ...
- Python核心编程练习题
1.输入一个数值,判断是否为正数,负数,小数,以及字符串 import re def is_number(num): pattern = re.compile(r'^[-+]?[-0-9]\d*\.\ ...
- Redis客户端信息的存取
字符串的存: set name xxx 字符串的取: get name Hashes的存: HMSET xxx xxx xxx Hashes的取: HGETALL xxx Lists的存: lpush ...
- 增加游戏受众:在英特尔核显上运行MR游戏
为了获得良好的用户体验,通常VR游戏需要稳定在每秒90帧,这意味着整个场景只有11.1毫秒的时间来进行左右眼渲染,这就是为何VR游戏需要配备高端的独立显卡.现在来看看我们如何使用最新版英特尔图形性能分 ...
- 抓包分析IP如何设置详细步骤
首先,要知道的是,我们直接改以太网(校园网)的IP地址是不行的,校园网识别不了 如下图: 我们必须通过让电脑连接个人热点才能完成IP修改. 第一步,连接上热点后打开电脑的cmd命令程序,在命令窗口中输 ...