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 代码如下: < ...
随机推荐
- c++位运算符介绍
下面是C/C++位操作运算符列表,其中运算符优先级为从上到下递减,但<<,>>优先级相同. C/C++位操作运算符 操作符 功能 用法 ~ 位求反 ~expr << ...
- es6 -- set 数据结构
ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3 ...
- 网络流最大流dinic的板子
void add(int u,int v,int w){ e[tot].v=v; e[tot].w=w; e[tot].nt=pre[u]; pre[u]=tot++; e[tot].v=u; e[t ...
- CSDN的个人主页如何添加微信二维码
-–零-– 对于CSDN,这里是技术的交流的地方,有些大神,隐于此.各有各的技能,各有各的魅力. 在这里,如果有自己的能力,你想推广你个人.我想,你将你的微信二维码或者你的微信公众号的二维码放在这里, ...
- 漫话C++之string字符串类的使用（有汇编分析）
C++中并不提倡继续使用C风格的字符串,而是为字符串定义了专门的类,名为string. 使用前的准备工作 在使用string类型时,需要包含string头文件,且string位于std命名空间内: # ...
- thinkphp多层volist实现多表查询
thinkphp多层volist实现多表查询 一.总结 二.截图 三.代码 1.控制器 2.视图
- jQuery post 传递 iframe
//使用POST链接iframe function doOpenPostIfrm(url, args, iframe) { //创建一个隐藏表单 var _form = $("<for ...
- 1.19 Python基础知识 - 软件目录开发规范及不同模块之间的调用
一个软件项目的开发,除了需要很厉害的开发能力,同时在软件开发项目时,也需要对项目结构有良好的组织能力,将功能进行拆分,不同的功能放在不同的目录或文件中,方便日后的维护,升级等操作.比如核心代码的目录, ...
- Android手机间使用socket进行文件互传实例
这是一个Android手机间文件传输的例子,两个手机同时装上此app,然后输入接收端的ip,选择文件,可以多选,点确定,就发送到另一个手机,一个简单快捷文件快传实例.可以直接运用到项目中. 下面是文件 ...
- socket 笔记（一）
#include "stdafx.h" #include "WINSOCK2.H" #pragma comment(lib,"WS2_32.lib&q ...