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 相关文章推荐
jQuery实用基础超详细介绍
Apr 11 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
js选项卡的制作方法
Jan 23 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php查看session内容的函数
2008/08/27 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
使用Python写一个量化股票提醒系统
2018/08/22 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
企业内控岗位的职责
2014/02/07 职场文书
致400米运动员广播稿
2014/02/07 职场文书
文体活动实施方案
2014/03/27 职场文书
组织鉴定材料
2014/06/02 职场文书
交通事故和解协议书
2014/09/25 职场文书
检讨书范文500字
2015/01/28 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python