jQuery的事件处理你知道多少
目录
- 一、jQuery的事件处理
- 1、页面载入事件
- 2、事件绑定（bind）
- 3、反绑定事件（unbind）
- 4、一次性事件绑定（one）
- 5、模拟鼠标悬停（hover）
- 总结
一、jQuery的事件处理
1、页面载入事件
$(document).ready() --- onload
2、事件绑定（bind）
bind(type,[data],fn)
type：表示事件类型(click、mouseover、mouseout...)
[data]：可选参数,表示传递给事件对象的额外数据
fn：是一个函数(事件处理函数),当事件发生时执行的程序
为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<button id="btn">确定</button>
<script>
$(function(){
$('#btn').bind('click',function(){//可以给按钮绑定其他事件
alert('事件绑定')
})
})
</script>
</body>
</html>
显示效果：点击确定按钮之后，出现弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<img src="../img/1.jpg" alt="" width="150" height="200">
<script>
$(function(){
//通过鼠标的悬停、离开事件来改变img的图像
$('img').bind('mouseover',function(){
$(this).attr({src:'../img/2.jpg'})//this表示的是img这个元素
})
$('img').bind('mouseout',function(){
$(this).attr({src:'../img/1.jpg'})
})
})
</script>
</body>
</html>
显示效果：当鼠标悬停在图片上时，显示的是一个图片。当鼠标离开这个图片时，显示的是另一张图片。反复交替，没有限制。
3、反绑定事件（unbind）
unbind([type],[data])：删除绑定的事件
（1）不带参数：删除元素上绑定的所有事件
（2）带参数：[type]表示事件类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<img src="../img/1.jpg" alt="" width="150" height="200">
<script>
$(function(){
//通过鼠标的悬停、离开事件来改变img的图像
$('img').bind('mouseover',function(){
$(this).attr({src:'../img/2.jpg'})//this表示的是img这个元素
})
$('img').bind('mouseout',function(){
$(this).attr({src:'../img/1.jpg'})
})
$('img').unbind('mouseout')//解绑
})
</script>
</body>
</html>
显示效果：鼠标离开图片之后，图片不会变成1.jpg
4、一次性事件绑定（one）
绑定的事件只能执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<img src="../img/1.jpg" alt="" width="150" height="200">
<script>
$(function(){
//通过鼠标的悬停、离开事件来改变img的图像
$('img').bind('mouseover',function(){
$(this).attr({src:'../img/2.jpg'})//this表示的是img这个元素
})
//一次性事件绑定
$('img').one('mouseout',function(){
$(this).attr({src:'../img/1.jpg'})
})
})
</script>
</body>
</html>
显示效果：鼠标离开图片后，图片会变成1.jpg，但是这种变化只会执行一次。第二次离开图片时，就不会变成1.jpg。
5、模拟鼠标悬停（hover）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../jq/jquery.js"></script></head><body> <div style="width: 200px; height: 200px; background-color: red;"></div> <script> $(function(){ $('div').hover(function(){ $(this).css('backgroundColor','pink') }) }) </script></body></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<div style="width: 200px; height: 200px; background-color: red;"></div>
<script>
$(function(){
$('div').hover(function(){
$(this).css('backgroundColor','pink')
})
})
</script>
</body>
</html>
显示效果：鼠标悬停在图片上时，图片由红色变为粉色。离开图片时并不会变回原来的红色。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
详解jQuery的核心函数和事件处理
目录 事件 页面载入 事件委派 事件切换 事件 总结 事件 页面载入 1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数 $(document).ready(function(){ // 在这里写你的代码... }); // 下面是简写 $(function($) { // 你可以在这里继续使用$作为别名... }); 2.事件处理 on(events,fn)在选择元素上绑定一个或多个事件的事件处理函数 // 给p标签添加点击事件监听 $("p").on(&qu
-
深入理解jQuery 事件处理
浏览器的事件模型 DOM第0级事件模型 1.Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息.这包括一些细节,比如在哪个元素上触发的事件.鼠标事件的坐标以及键盘事件中单击了哪个键. 2.事件冒泡 当触发 dom 树中一个元素上的事件时,事件模型会检查这个元素是否已经创建了特定的事件处理器.如果是,就会调用已创建的事件处理器.然后,事件模型会检查目标元素的父元素,看其是否已经为此事件类型创建了处理器.如果是,就调用已创建的处理器,之后检查它的父元素,以及父元素的父元素,以此类推
-
jQuery事件处理的特征(事件命名机制)
JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显然给编程带来了极大的灵活性.下面就一起学习下,jquery事件处理的一些特性. 1.JQuery中事件可以重复绑定,不会覆盖. $("#button1").bind("click",function(){ alert("func1"); }); $("#button1&qu
-
浅谈jquery事件处理
在以jQuery为基础库的前端开发体系中,经常会在一个页面上通过各种标识绑定许许多多的事件.就算简单的使用了事件代理,也还是造成了事件的分散,不好维护和管理. 那么,如何解决这个问题呢?而我,想到了backbone中的events.如下: 复制代码 代码如下: events: { "click .icon": "open", "click .button.edit": "openEditDialog
-
jQuery使用bind动态绑定事件无效的处理方法
最近在进行页面开发,在做页面特效的时候,需要给一个动态加载的按钮赋予一个事件 于是不假思索的 用$(obj).bind(); 来绑定事件 . 但是这样存在一个问题: bind确实能绑定事件,但是那是相对于固定的html标签来说 当页面内容属于动态加载的时候,bind事件就存在一个bug, 只能bind一次,当你第二次触发事件的时候就没用了 例如: 我给<a>标签赋予一个click , <a>标签包括内容都是从后台数据读取然后动态加载的.当我使用bind来绑定click事件,这时
-
jQuery的事件处理你知道多少
目录 一.jQuery的事件处理 1.页面载入事件 2.事件绑定(bind) 3.反绑定事件(unbind) 4.一次性事件绑定(one) 5.模拟鼠标悬停(hover) 总结 一.jQuery的事件处理 1.页面载入事件 $(document).ready() --- onload 2.事件绑定(bind) bind(type,[data],fn) type:表示事件类型(click.mouseover.mouseout...) [data]:可选参数,表示传递给事件对象的额外数据 fn:是一
-
初窥JQuery(二) 事件机制(1)
当然它的优点并不只在于这点,使用JQuery事件处理机制比直接使用Javascript本身内置的一些事件相应方式更加的灵活,更加不容易暴露在外,而且有更加优雅的语法,大大减少了我们工作的量度. JQuery的事件处理机制包括:页面加载.事件绑定.事件委派.事件切换四种机制.我们先从$(document).ready()事件开始. 一.页面加载$(document).ready()相当与Javascript中的onLoad()事件,都是在页面加载的时候执行该方法,但是两者又有着微妙的差别,read
-
针对初学者的jQuery入门指南
jQuery 是什么,它能为我们做什么?如果你是一名 Web 开发人员,写过 JavaScript 程序,那么你很可能正在使用 jQuery,即使没有试用过,至少也听说过,事实上 jQuery 可以说是现阶段最流行的 JavaScript 库.据有关部门统计,全球网站上面,约有 28% 的网站在使用 jQuery,这个数字可能有些夸张,但足见 jQuery 受欢迎的程度.本文仅对 jQuery 的使用方法作简单介绍,且作为一个入门教程吧. 下载 jQuery 代码,并在页面中载入 首先需要从jQ
-
初窥JQuery(二)事件机制(2)
简单的说Jquery的事件处理机制就相当与在HTML标签中指定各种事件,比如onclick(),keydown()等,在标签中指定事件对应到Javascript的函数,便于我们实现我要求.而JQuery的事件处理则是将这些事件绑定到脚本内部,使我们无须将函数暴露在标签中,而且使用起来非常方便. 在介绍方法之前,我觉得有必要描述一下响应事件的两种策略,一种是事件捕获(Event capturing),一种是事件冒泡(Event bubble),这两种策略是相对立的,它们是在浏览器大战中分别由Net
-
不同的jQuery API来处理不同的浏览器事件
在今天的网络浏览器处理事件是有点困难的一部分,不同的浏览器以不同的方式处理事件.因此,要克服这些跨浏览器的问题,人们可以利用jQuery的事件处理API. jQuery是一个小的JavaScript库,提供了广大的API来处理不同的浏览器事件和效果和更大量.阅读更多有关处理使用JavaScript浏览器的用户界面效果.在本教程中,我们将探讨不同的API jQuery来处理不同的浏览器事件. Page Load事件 就绪(FN), 这是所有类型的事件,jQuery的支持的基础上.你可能想设置形式的
-
深入分析jQuery.one() 函数
one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需的数据. 通过one()函数绑定的事件处理函数都是一次性的,只有首次触发事件时会执行该事件处理函数.触发之后,jQuery就会移除当前事件绑定. 此外,你可以为同一元素.同一事件类型绑定多个一次性的事件处理函数.触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数. 要删除通过one()绑定的事件,请使用unbind()或off()函数. 该函数属于jQuery
-
AngularJS报错$apply already in progress的解决方法分析
本文实例分析了AngularJS报错$apply already in progress的解决方法.分享给大家供大家参考,具体如下: 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和解决的问题,否则就没有必要出现在日志中了. Error: [$rootScope:inprog] $apply already
-
JQ获取动态加载的图片大小的正确方法分享
有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.错误的代码是:(错误)在添加了HTML之后立即调用代码获取尺寸 复制代码 代码如下: var html = ''; $('#my_div').html(html); var width = $('#my_div img').width(); //
-
供参考的 php 学习提高路线分享
第一阶段 第一讲,WEB基础 1.1 网站基本知识: 1.2 网络协议介绍: 1.3 B/S与C/S结构的区别: 1.4 WEB编程.网站开发技术介绍. 第二讲,网页设计 2.1 Dreamweaver介绍及使用: 2.2 静态网页HTML语言: 2.3 标题与段落,换行与分割线: 2.4 表格.表单: 2.5 框架.超链接.图片. 实例:1,使用表格进行网页布局设计: 2,使用表单.表格.框架进行系统后台界面设计. 第三讲,DIV+CSS 3.1 CSS的概念及基本语法: 3.2 用CSS设置
-
jquery中的事件处理详细介绍
1.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了. ①jQuery中的$(doucument).ready()事件 ready(fn)是jQuery事件模块中最重要的一个函数.这个方法可以看作是对window.onload注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行. ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Functio