jQuery----鼠标移动、点击案例
单击隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击按钮隐藏</title>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<!-- 点击按钮之后，按钮隐藏 -->
<body>
<button>点我</button>
</body>
</html>
双击隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双击点击消隐藏</title>
<script>
$(document).ready(function(){
$("button").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button>双击点我隐藏</button>
<!-- 双击按钮之后将隐藏 -->
</body>
</html>
鼠标移进事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移进事件</title>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
<!-- 鼠标移进标签，弹出对话框 -->
</body>
</html>
鼠标移出案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移出案例</title>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
<!-- 移出弹出对话框-->
</body>
</html>
在段落按下案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落按下</title>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
});
</script>
</head>
<body> <p id="p1">这是一个段落</p>
<!-- 在段落按下弹出对话框-->
</body>
</html>
鼠标在段落松开：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在段落松开</title>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
鼠标进入和离开案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
)
});
</script>
</head>
<body> <p id="p1">这是一个段落。</p> </body>
</html>
jQuery----鼠标移动、点击案例的更多相关文章
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- jQuery鼠标事件
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click ...
- jquery 鼠标事件汇总
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法 鼠标事件是在用户移动鼠标 ...
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- jquery鼠标点击穿透的解决方法
jquery鼠标点击穿透的解决方法 <pre><div class="showcontainer" style="background:#000;dis ...
- 深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
随机推荐
- python-excel操作之xlrd
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++操作excel文件+++++++++++++++++ ...
- C#接口，类，集成
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Python 面向对象 —— 多重继承
多重继承(一个子类同时继承多个父类),容易造成混乱,即如果两个父类又相同的方法名和变量名时,无法确定继承哪一个. 正因如此,Java 等语言中并不支持多重继承(Java 是单继承多接口).Python ...
- 突破极限 解决大硬盘上安装Unix新思路
一.问题提出 硬盘越做越大,然我喜欢让我忧.10年前就遇到过在586电脑BIOS不认识超过8.4G容量硬盘的问题,以及Windows Nt操作系统不认大硬盘(容量超过8.4G)的问题,对于Linux ...
- 戏说Linux商用数据库
戏说Linux商用数据库 上一篇文章(http://chenguang.blog.51cto.com/350944/277533)我介绍了Linux下几款开源数据库Mysql,MaxDB.Postgr ...
- Android 通过OnScrollListener来监听RecyclerView的位置
最近做一个漫画app,在阅读漫画界面需要通过获取recyclerView的位置来实时更新界面上的图片进度(比如1/9), 查阅资料得知了可以通过LayoutManager来获取recyclerView ...
- 分享js寄生组合模式继承
function person(){ this.name = 'taobao'; this.showMess = function(){ return this.name; } } person.pr ...
- cksum---检验文件CRC是否正确
- Flask框架简介
Flask框架诞生于2010年,是Armin ronacher 用python语言基于Werkzeug工具箱编写的轻量级Web开发框架! Flask本身相当于一个内核,其他几乎所有的功能都要用到扩展. ...
- code -结合实例总结代码下拉流程
1.查看手机需要的版本 1)如果手机本来就可以正常工作,可以使用指令 zhangshuli@zhangshuli-MS-:~/Desktop/day_note/plan$ adb shell getr ...