JQuery中DOM事件合成用法实例分析


Posted in Javascript onJune 13, 2015

本文实例讲述了JQuery中DOM事件合成用法。分享给大家供大家参考。具体分析如下:

jQuery有两个合成事件——hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法。

hover()方法

hover()方法的语法结构为:
hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第1个函数(enter);当光标移出这个元素时,会触发指定的第2个函数(leave)。

代码为:

$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide(); 
 })
})

代码运行后的效果与下面代码运行后的效果是一样的。当光标滑过“标题”链接时,相应的“内容”将被显示;当光标滑出“标题”链接后,相应的“内容”则被隐藏。

$(function(){ 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").show(); 
 }); 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").hide(); 
 }) 
});

注意:

1. CSS中有伪类选择符,例如“:hover",当用户光标悬停在元素上时,会改变元素的外观。在大多数符合规范的浏览器中,伪类选择符可以用于任何元素。然而在IE 6浏览器中,伪类选择符仅可用于超链接元素。对于其他元素,可以使用jQuery的hover()方法。

2. hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover")和bind("mouseout")。因此当需要触发hover()方法的第2个函数时,需要用trigger("mouseleave")来触发,而不是trigger("mouseout")。

toggle()方法

toggle()方法的语法结构为:
toggle(fnl, fn2, ...fnN);

toggle()方法用于模拟鼠标连续单击事件。第1次单击元素,触发指定的第1个函数(fn1);当再次单击同一元素时,则触发指定的第2个函数(fh2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

在前面的加强效果的例子中,使用了以下jQuery代码:

$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide();
 })
})

通过使用toggle()方法不仅实现了同样的效果,同时也简化了代码。

toggle()方法在jQuery中还有另外一个作用:切换元素的可见状态。如果元素是可见的,单击切换后则为隐藏;如果元素是隐藏的,单击切换后则为可见的。因此上面的代码还可以写成如下jQuery代码:

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
  $(this).next().toggle(); 
 },function(){ 
  $(this).next().toggle(); 
 }) 
})

为了能有更好的用户体验,现在需要在用户单击“标题”链接后,不仅显示“内容”,而且高亮显示“标题”。代码为:

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
   $(this).addClass("highlight"); 
  $(this).next().show(); 
 },function(){ 
  $(this).removeClass("highlight"); 
   $(this).next().hide(); 
 }); 
})

运行代码后,如果“内容”是显示的,“标题”则会高亮显示:如果“内容”是隐藏的,则不会高亮显示“新闻标题”。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 #Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 #Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 #Javascript
JavaScript中的Math.E属性使用详解
Jun 12 #Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 #Javascript
JavaScript中的parse()方法使用简介
Jun 12 #Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 #Javascript
You might like
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python中xrange和range的区别
2014/05/13 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python实现动态数组的示例代码
2019/07/15 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
工程类专业自荐信范文
2014/03/09 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript