![跨平台移动APP设计及应用](https://wfqqreader-1252317822.image.myqcloud.com/cover/442/26179442/b_26179442.jpg)
上QQ阅读APP看书,第一时间看更新
3.4.2 jQuery的鼠标事件
1.jQuery中常见的鼠标事件
鼠标事件是指鼠标在网页页面进行相关操作时触发的事件,jQuery中常见的鼠标事件如表3.7所示。
表3.7 Quer中常见的鼠标事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060002.jpg?sign=1739541762-VBz1AzXLaAusg854cQxypHnRzORcrO4u-0-c35a1a920dc46696b1fe8ef9de3f7696)
2.鼠标事件示例
(1)click事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060003.jpg?sign=1739541762-wdOKpIgryRJq35PfMdUuCdAXWgjbj4xh-0-b1c68aa0ea16933f01b8e0816332bb74)
(2)dbclick事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060004.jpg?sign=1739541762-1oFNbvalOB5JRin4xjIZCjXssOWr5O5X-0-0c4744ea9c2378477f000256c43ca391)
(3)mous edown事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060005.jpg?sign=1739541762-v57MzrkmiTzyEa8sfwUsViHGZXBkPVa4-0-0e757d172161ff6f6bda47350a3ee26a)
(4)mous eup事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00060006.jpg?sign=1739541762-5eCqzprFmdHxeAniMSaykrxwkBCoUj0U-0-ccb55a3dff894264f15f4e95f2097356)
(5)mouseover事件和mouseout事件
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061001.jpg?sign=1739541762-3tErIIKEOFcYK5od2tgpZXypqoEo0n9u-0-4c326e62d8e7811436971716f85162a8)
3.hover()方法
hover()是一个处理多个不同事件的方法,使用该方法时需要2个处理函数作参数。当鼠标进入所选元素时,就执行第1个参数的函数;当鼠标离开所选元素时,则执行第2个参数的函数。
【例3-12】 实现表格的隔行变色,当鼠标悬停时突出显示某行。其效果如图3.12所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061002.jpg?sign=1739541762-9OrpeHekAb2Tr6Hg0ZsPviEDS4GRVPtC-0-0c6a258e9dc37a8d54faf3813dfa1b6e)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061003.jpg?sign=1739541762-RTp8zBxLO4reQc6QKFmhbpfYLHSWaOMX-0-26af11fb7ddbf6505594d56bf9dc72ef)
图3.12 鼠标悬停时突出显示某行
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00061004.jpg?sign=1739541762-qNqvfmN3tBGx47zICuWXkzUMVRpHHF2f-0-317e1904c4da5a08e9c10386092ed1c1)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00062001.jpg?sign=1739541762-Tg7l3wZLAB6hsfbb9ZRrKlz3nTYY7Jej-0-466666af207bb60cec632485d2d3924c)
在本例中,使用了jQuery的addClass()方法和removeClass()方法,addClass()方法是向被选元素添加一个类,removeClass()方法则是向被选元素删除一个类。