- 跨平台移动APP设计及应用
- 张思民
- 304字
- 2021-03-23 13:28:10
3.4.2 jQuery的鼠标事件
1.jQuery中常见的鼠标事件
鼠标事件是指鼠标在网页页面进行相关操作时触发的事件,jQuery中常见的鼠标事件如表3.7所示。
表3.7 Quer中常见的鼠标事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060002.jpg?sign=1739316001-sssuqwU9t28j55y8xtdT5RcovF2O33OK-0-7a769b36e38f597ee86d36045dbec4cd)
2.鼠标事件示例
(1)click事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060003.jpg?sign=1739316001-jwHDjaaXb3rcpMVBIRouvyrV8Nfd4DWy-0-f48ca4400907313e1eae561e8d76fc19)
(2)dbclick事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060004.jpg?sign=1739316001-NMgvXRKJoGY0aX49jVfYjAg9pPw3FFBY-0-07b5dfc262f72ed9d1fe4509f824f377)
(3)mous edown事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060005.jpg?sign=1739316001-cvnxEQ25uL3G1TulR5IWSQgsfnhzSXeV-0-88b524fdda0080bfe18c665f9924d2dc)
(4)mous eup事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060006.jpg?sign=1739316001-IrLSqVIUgsThj05c3q96cE2YJ6y9Wu0u-0-c947eb592a3f1df60ae59cd7d514fb2a)
(5)mouseover事件和mouseout事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061001.jpg?sign=1739316001-reEui4gUamPHXGf3zGLxdWifOcH4RCCC-0-fc3ad4bda9bdf5f540e094acbfc0fd3e)
3.hover()方法
hover()是一个处理多个不同事件的方法,使用该方法时需要2个处理函数作参数。当鼠标进入所选元素时,就执行第1个参数的函数;当鼠标离开所选元素时,则执行第2个参数的函数。
【例3-12】 实现表格的隔行变色,当鼠标悬停时突出显示某行。其效果如图3.12所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061002.jpg?sign=1739316001-FJ67jSw5XrhCdTkdtvvdjYV15OcpVd9E-0-386590e5a10351b02f6a7c39bbfd8984)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061003.jpg?sign=1739316001-e2pJRCRK7zBaCFEh8sQ4OwIZSOPlloOB-0-e5116f6bea1b2dfac4802320d4fb77af)
图3.12 鼠标悬停时突出显示某行
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061004.jpg?sign=1739316001-itSKHwtNkRZJ3ZC2SCGhjKb48rKBwaKN-0-392e35c175b2828ff397d1567f23aaaf)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00062001.jpg?sign=1739316001-HHz2U05vU4WtOLiAQdOh3TnHv59sdQBb-0-6c65d3cf54430e3f22d7def5042fa3a5)
在本例中,使用了jQuery的addClass()方法和removeClass()方法,addClass()方法是向被选元素添加一个类,removeClass()方法则是向被选元素删除一个类。