当前位置:首页 > 日记 > 正文

jQuery中DOM事件合成的实例分析

jQuery中DOM事件合成的实例分析
本文演示了在jQuery中使用DOM事件合成,供大家参考,具体分析如下:

jQuery有两个合成事件——悬停()方法和切换()方法,与前面提到的现成()方法类似,悬停()方法和切换()方法属于jQuery自定义方法。

悬停()方法

悬停()方法的语法结构如下所示:

盘旋(进入,离开);

悬停()方法用于模拟光标的悬停事件。当光标移动到元素时,它触发指定的第一个函数(Enter);当光标移出元素时,它触发指定的第二个函数(离开)。

代码是:
$(函数(){())
$(#面板H5。头)。Hover(function(){)
$(这个);
}函数(){()
$(这个);
})
})

代码运行的效果与下面的代码相同,当光标在标题链接上滑动时,相应的内容就会显示出来;当光标退出标题链接时,相应的内容就会隐藏起来。
$(函数(){())
$(#面板H5。头)。Mouseover(function(){)
$(这)。下(div.content )显示();
});
$(#面板H5。头)。Mouseover(function(){)
$(这)。下(div.content )藏();
})
});

小心 uff1a

1中有伪类选择器。CSS,如:在大多数规范的浏览器中,伪类选择器可以用于任何元素。然而,IE浏览器中的伪类选择器只能用于超链接元素。对于其他元素,您可以使用jQuery的()悬停()方法(6)。

2。悬停()方法是完全绑定的替代(MouseEnter)和绑定(MouseLeave )在jQuery代替绑定(问号)和绑定(怪),所以当你需要触发悬停第二功能()方法,你需要使用触发器(MouseLeave )来触发,触发(怪)。

切换()方法

切换()方法的语法结构如下所示:

切换(FNL、FN2,…FNN);

toggle()方法被用来模拟鼠标连续点击事件。第一次点击元素触发指定的第一个函数(FN1);当同一元素再次单击,它触发指定的第二功能(FH2);如果有更多的功能,它会触发转直到最后一个,每个的随后点击重复功能的旋转。

在前面的增强效果示例中,使用了以下jQuery代码:
$(函数(){())
$(#面板H5。头)。Toggle(function(){)
$(这个);
}函数(){()
$(这个);
})
})

切换()方法的使用不仅达到了同样的效果,而且简化了代码。

切换()方法在jQuery中有另一个角色:切换元素的可见状态。如果元素可见,开关后单击被隐藏;如果元素隐藏,开关后可以单击,因此上述代码也可以编写成以下jQuery代码:
$(函数(){())
$(#面板H5。头)。Toggle(function(){)
$(这个)。下一步。(Toggle);
}函数(){()
$(这个)。下一步。(Toggle);
})
})

为了获得更好的用户体验,现在不仅需要显示内容,还要在用户点击标题链接后突出标题:
$(函数(){())
$(#面板H5。头)。Toggle(function(){)
$(这)。AddClass(亮点);
$(这个);
}函数(){()
$(这)。RemoveClass(亮点);
$(这个);
});
})

运行代码后,如果显示内容,标题将高亮显示:如果内容被隐藏,则不会突出新闻标题。

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

相关文章

CDR制作美丽的绿色立体春季英语字

CDR制作美丽的绿色立体春季英语字

教程,字体,英语,春季,美丽,本教程是介绍给朋友们的,用CDR制作漂亮的绿色三维春天英文字体方法。教程产生的效果真的很漂亮,难度也不是很大。建议像你这样的朋友可以跟着教程一起学习,希望大家喜欢。 本教程由CDR学习者讲授,用CDR制作漂亮的绿…

的getday()方法在Javascript中使用详解

的getday()方法在Javascript中使用详解

方法,详解,电脑软件,getday,Javascript,Javascript date.getday()方法是在当地时间每周一天指定日期。getday返回的值对应的整数:0周的星期日、1星期一、2星期二,等等。 语法 Date.getDay() 下面是参数的详细信息: Na 返回值: 按当地时间按指定日期返…

PS图象处理软件指出国际樊小卿新效

PS图象处理软件指出国际樊小卿新效

图象,处理软件,效果,美女照片,国际,本文主要介绍了PS图象处理软件的设计方法,以适应新的影响新的美女照片的国际樊小卿。 本教程使用PS图象处理软件描绘美丽的小清新,教程如何创建一系列国际村小清新,前后对比效果很明显,爱… art_adbox开始 a…

如何利用WPS制作一个美观的WPS文本

如何利用WPS制作一个美观的WPS文本

教程,文本,美观,电脑软件,WPS,如何用WPS制作美观的艺术字 美丽的艺术字人人求,但如何用WPS做一个小汇编给你回答。 1、在菜单命令视图工具栏上单击;mdash;mdash;图形显示图形工具栏。 2,单击工具栏上的单行文本工具。当你在编辑窗口中单击时,你会…

PHP动态规划求解0-1背包问题的实例

PHP动态规划求解0-1背包问题的实例

动态规划,实例分析,背包问题,电脑软件,PHP,本文分析了PHP动态规划求解0-1背包问题,供大家参考,具体分析如下: 背包问题描述:背包的最大重量为W,现在有n项,每项重量t,每一个项目值得v。 背包的重量是最大的(但不超过W),而背包的价值是最大的。 想法…

ps合成制作强壮的公鸡头武士

ps合成制作强壮的公鸡头武士

公鸡,强壮,武士,电脑软件,ps,要想搞好综合,就必须勤奋学习,积累材料。事实上,所有的合成思想都是相似的。它们是以合理的视角来创造统一的色彩和整体画面的质感,不断增加装饰以丰富画面。 要想搞好综合,就必须勤奋学习,积累材料。事实上,所有的合…

你如何在单词中画一条十字线词中常

你如何在单词中画一条十字线词中常

常见问题,词中,画一,如何在,电脑软件,当我们用文字来做一些论文或书籍时,最重要的是横线和下划线。虽然这是一个不起眼的小操作,但对一些不常用词的朋友来说是很困难的。 词画一个十字线第一式:使用U加下划线的方法: 点击Word界面的U然后按你需…

50ps常用快捷键ps实用技巧

50ps常用快捷键ps实用技巧

常用快捷键,实用技巧,电脑软件,ps,欢迎您的到来,欢迎阅读这篇文章,希望能对您有所帮助。 1。快速打开文件 双击PS图象处理软件的背景空白(默认为灰色显示区域)打开选择文件的浏览窗口。 2。随意改变画布的颜色 选择油漆桶工具,按住Shift键点击画…

PS图象处理软件草美与温暖的光

PS图象处理软件草美与温暖的光

图象,处理软件,温暖,电脑软件,PS,图片不是背光,需要渲染后期。过程:首先,给图片添加暖色,增加角落的黑暗角度,然后渲染背景的暖色和高亮。然后,根据高亮处的位置突出高亮区域,使整个过程自然化。 图片不是背光,需要渲染后期。过程:首先,给图片添加暖…

2015中非主流签名非主流签名

2015中非主流签名非主流签名

中非,非主流,主流,电脑软件,许多人喜欢读一些文章,尤其是一些漂亮的套装和hellip;例如,悲伤的句子,优美的诗歌等!下面是萧边的签名2015非主流个性签名,悲伤和心痛,欢迎阅读。 知道你在附近,自然会产生一种特殊的感觉,即使我看不到你。 我把我的空梦…

方法jQuery页面百叶窗彩灯滚动显示

方法jQuery页面百叶窗彩灯滚动显示

方法,百叶窗,彩灯,显示效果,页面,本文介绍的例子是jQuery页面滚动显示彩灯的滚动显示效果。供大家分享,供大家参考: 1。这里的代码需要超过jquery1.3的支持,如下图所示: 复制代码代码如下:jquery.fn.extend( 函数($){ var = 4,滚动行号 T = 500…

新浪微博无法上传文件的简单解决方

新浪微博无法上传文件的简单解决方

上传文件,解决方案,新浪微博,简单,电脑软件,今天,在网站上添加了将文件上传到后台的功能。结果是错误,表明文件没有上传。 下面是代码部分。 确定 检查代码半天没有问题。与努力的态度,名称=attafile改变名称=attafile 在这个问题上浪费了…