jQuery mouseover和mouseout事件
2023-06-13 09:12:02 时间
当用户将鼠标指针移到某个元素上时,就会触发 mouseover 事件。当用户将鼠标指针移出某个元素时,就会触发 mouseout 事件。mouseover 和 mouseout 平常都是形影不离的。
图 1:鼠标指针移入和移出
图 2::链式调用
mouseover 和 mouseout 分别用于控制鼠标指针 移入 和 移出 这两种状态。例如,在下拉菜单导航中,鼠标指针移入会显示二级导航,鼠标指针移出则会收起二级导航。
举例:移入和移出
!DOCTYPE html html head meta charset= utf-8 / title /title script src= js/jquery-1.12.4.min.js /script script $(function () { $( div ).mouseover(function(){ $(this).css( color , red $( div ).mouseout(function () { $(this).css( color , black /script /head body div C语言中文网 /div /body /html
预览效果如图 1 所示。
图 1:鼠标指针移入和移出
这里的$(this) 指的其实就是触发当前事件的元素,也就是 div 元素。在这个例子中,$(this)等价于$( div )。$(this)的使用是非常复杂的,这里我们只是让初学者熟悉一下,后面再给小伙伴们详细讲解。
上面这个例子虽然简单,但是方法已经教给大家了。大家可以尝试使用 mouseover 和 mouseout 这两个事件来设计下拉菜单效果。
举例:链式调用
!DOCTYPE html html head meta charset= utf-8 / title /title script src= js/jquery-1.12.4.min.js /script script $(function () { $( div ).mouseover(function(){ $(this).css( color , red }).mouseout(function () { $(this).css( color , black /script /head body div C语言中文网 /div /body /html
预览效果如图 2 所示。
图 2::链式调用
分析:
$( div ).mouseover(function(){ $(this).css( color , red }).mouseout(function () { $(this).css( color , black })
上面的代码其实等价于:
$( div ).mouseover(function(){ $(this).css( color , red $( div ).mouseout(function () { $(this).css( color , black })
在 jQuery 中,如果对同一个对象进行多种操作,则可以使用链式调用的语法。链式调用是 jQuery 中的经典语法之一,不仅可以节省代码量,还可以提高代码的性能和效率。
23823.html
CSSC语言htmljavaJavaScript相关文章
- jQuery原理
- js怎么让指定方法先后顺序_jquery固定table表头
- 怎么设置jQuery中的事件和动画
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jquery 跑马灯抽奖详解编程语言
- jquery 失去焦点时输入框为空时自动填写默认内容详解编程语言
- JQuery Tips(4)—-一些关于提高JQuery性能的Tips详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jQuery click事件详解
- jQuery hover()鼠标移入移出事件
- jQuery温习篇强大的JQuery选择器
- $.format,jquery.format使用说明
- JQuery入门——事件切换之toggle()方法应用介绍
- jQuery模拟超链接点击效果代码
- 使用jquery实现div的tab切换实例代码
- jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- jquery滚动条事件简单实例
- Jquery读取URL参数小例子
- jQuery鼠标经过(hover)事件的延时处理示例
- jQuery学习笔记之toArray()
- Jquery之Bind方法参数传递与接收的三种方法
- jQuery实现视频作为全屏幕背景
- 分享2个jQuery插件--jquery.fileupload与artdialog
- JQuery实现表格动态增加行并对新行添加事件
- jQuery知识点整理