jQuery jQuery速成 - 鼠标事件与交互

[复制链接]
攻城狮 发表于 2015-9-12 15:16:00 [jQuery] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
今天为大家带来的主要是jQuery与鼠标有关的事件讲解,由于jQuery交互处理方面与鼠标交互处理事件多多少少牵扯到点儿关系,因此这2个元素与本节合并为一节。

交互处理:

$("Element").hover(over,out)
模拟鼠标悬停的事件,当鼠标移入移出选定元素的时候分别触发over和out事件。
参数:over:function
        out:function

$("Element").toggle(function,function)
与上面的方法雷同,当鼠标第一次点击的时候触发前者,当鼠标第二次点击的时候触发后者。

鼠标单击:

$("Element").click()
$("Element").click(function)
当鼠标点击的时候触发,具体的应用方法我想不用具体讲解了。因为大家看了我过去的所写的案例就已经有数了。

鼠标双击:
$("Element").dblclick()
$("Element").dblclick(function)
与鼠标单击一样,只不过这个是鼠标双击事件。也就是说只有鼠标在选定的元素上双击才会触发此事件。dbl是Double的缩写。


鼠标点击前后:
$("Element").mousedown(function)
当鼠标点击后触发,从表面上看类似click事件,其实有本质上的区别。

$("Element").mouseup(function)
当鼠标点击释放的时候触发。就是鼠标点击了元素当你松开鼠标按键的时候触发。

鼠标的移动:

$("Element").mousemove(function)
当鼠标在选定的元素上来回移动的时候触发。

$("Element").mouseover(function)
当鼠标在移入选定的元素范围的时候触发。

$("Element").mouseenter(function)
当鼠标在移入选定的元素范围的时候触发。与mouseover有很大的区别就是它不冒泡的事件,点击子元素的时候不会触发父级元素

$("Element").mouseout(function)
当鼠标移出选定的元素范围的时候触发。

$("Element").mouseleave(function)
当鼠标移出选定的元素范围的时候触发。与mouseenter一样,不是冒泡事件

本节作业:

      1、将以上所有的事件均做一个例子发上来。
      2、作业发布在回帖中即可,编辑的时候使用代码功能发布,并且复制后可以直接执行。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>第二十二节jQuery作业-站帮网zb7.com</title>
  6.         <script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
  7.         <script language="javascript" charset="GB2312">
  8.          此处编写jQuery代码
  9.         </script>
  10.         <style>
  11.          如有需要,此处编写CSS代码
  12.         </style>
  13.     </head>
  14.     <body>
  15.      如有需要,此处编写HTML代码
  16.     </body>
  17. </html>
复制代码








上一篇:jQuery速成 - 页面的载入事件与事件处理
下一篇:jQuery速成 - 焦点事件

大神点评2

邦妮儿 发表于 2015-9-24 12:36:47 [jQuery] 显示全部楼层
{:3_42:畸交付给收到了感觉但是,
去课工场学习一下吧,http://www.kgc.cn哪样你会更棒哦。
台品部落水玲珑店     一家专业做台湾特产的微店。
zb7ang 发表于 2019-6-10 15:26:09 [jQuery] 显示全部楼层
不错,谢谢分享!
大家足球 -> www.dajiazuqiu.com
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

攻城狮

站帮资深版主

  • 356 积分
  • 71 帖数
  • 0 日志
广告招商 QQ: 5620010
快速回复 返回顶部 返回列表