jQuery的事件是什么?jquery事件的介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery的事件是什么?jquery事件的介绍,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3415字,纯文字阅读大概需要5分钟。
内容图文
![jQuery的事件是什么?jquery事件的介绍](/upload/InfoBanner/zyjiaocheng/285/d55337fa11a8412d8fa1479df0baddb9.jpg)
页面加载
在DOM中提供了load事件用于页面加载完毕之后执行机制,jQuery提供了ready()方法实现相似的功能,但是存在以下的区别。
1.DOM中的load事件没有任何的简写形式,但是在jQuery的ready()方法中提供了简写形式。
2.在HTML页面加载完成以后,load事件才会被触发;而在DOM节点树加载完毕以后,ready()方法就会被调用。
3.一个HTML页面中只能存在一个load事件,但是可以存在多个ready()方法。
ready()方法的语法结构:
1.$(document).ready(function(){}); 2.$().ready(function(){});//简写 3.$(function(){});//简写
事件绑定
单事件绑定与单事件解绑
单事件绑定
jQuery中提供了bind()方法完成绑定事件,语法如下
$element.bind(type,data,callback);
type:表示绑定事件的名称,是字符串类型,没有‘on’。
data:作为element.data属性值传递给事件对象的额外数据对象(可选项)。
callback:表示绑定事件的处理函数。
示例代码如下:
<body> <button id='btn'>按钮</button> <script> function click1(){ console .log('this is button,'); } $('#btn').bind('click',click1);
单事件解绑
jQuery中提供了unbind()方法来解绑事件。具体方法如下:
$element.unbind(type[,data,callback]);
$('#btn').unbind('click');//只传递事件名称,解绑定该事件的所有处理函数。 $('#btn').undind('click'click1);//传递时间名称和指定的处理函数,解绑定该事件的指定处理函数。
多事件绑定与解绑
<style> #title { width: 100px; height: 20px; border: 1px solid black; } ul { list-style: none; padding: 0; display: none; } li { width: 100px; height: 20px; border: 1px solid black; } </style> </head> <body> <p id="title">菜单</p> <ul> <li>北京</li> <li>南京</li> <li>天津</li> </ul> <script> // mouseover表示鼠标悬停在指定元素之上 mouseout表示鼠标从指定元素上移开 //jQuery支持链式操作,多事件绑定时,事件名称之间使用空格分离。 $('#title').bind('mouseover mouseout', function(){ if ($('ul').is(':hidden')) { $('ul').css('display','block'); } else { $('ul').css('display','none'); } }); /* unbind()方法 1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定 2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定 3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定 */ $('#title').unbind('mouseover mouseout');
事件绑定方法的对比
jQuery中提供多组事件绑定与解绑定的方法
1.bind()与unbind() - jQuery 3.0版本后删除方法
2.on()与off()方法 - jQuery 1.7版本后新增方法
其实bind()与unbind()的底层方法就是on()和off()
3.live()与die() - jQuery 1.7版本后删除方法
作用 - 实现事件委托
4.delegate()与undelegate() - jQuery 1.6版本后新增方法,jQuery
3.0版本后删除方法
作用 - 实现事件委托
5.one() - 为事件绑定一次性的函数
事件切换
hover()方法
jQuery中提供了hover()方法模拟鼠标悬停事件效果。
$element.hover(over,out);
示例代码如下:
<style> #title { width: 100px; height: 20px; border: 1px solid black; } ul { list-style: none; padding: 0; display: none; } li { width: 100px; height: 20px; border: 1px solid black; } </style> </head> <body> <p id="title">菜单</p> <ul> <li>北京</li> <li>南京</li> <li>天津</li> </ul> <script> $('#title').hover(function(){ $('ul').css('display','block'); },function(){ $('ul').css('display','none'); }); </script> </body>
事件模拟
jQuery中提供了trigger()方法用于模拟除法匹配元素绑定的事件
$element.trigger(type[,dat]);
<body> <button id="btn">按钮</button> <script> // 绑定事件 - 由用户行为进行触发,调用处理函数 $('#btn').bind('click',function(){ console.log('this is button.'); }); // 模拟用户触发事件 $('#btn').trigger('click'); </script> </body>
相关推荐:
事件冒泡是什么如何用jquery阻止事件冒泡_jquery
javascript/jquery键盘事件介绍
以上就是jQuery的事件是什么?jquery事件的介绍的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的jQuery的事件是什么?jquery事件的介绍全部内容,希望文章能够帮你解决jQuery的事件是什么?jquery事件的介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。