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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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图片验证码代码
2008/03/27 PHP
php获取淘宝分类id示例
2014/01/16 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
jQuery 1.0.2
2006/10/11 Javascript
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
火车的故事教学反思
2014/02/11 职场文书
中等生评语大全
2014/05/04 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
初中毕业生感言
2015/07/31 职场文书
Android实现图片九宫格
2022/06/28 Java/Android