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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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 cli模式学习(PHP命令行模式)
2013/06/03 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python可变参数用法实例分析
2017/04/02 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python程序如何进行保存
2020/07/03 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
联想C++笔试题
2012/06/13 面试题
骨干教师培训方案
2014/05/06 职场文书
项目建议书怎么写
2014/05/15 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
php 原生分页
2021/04/01 PHP
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python