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 代码如下: < ...
随机推荐
- Linux Unix shell 编程指南学习笔记（第二部分）
第七章 正則表達式介绍 匹配行首与行尾 匹配数据集 职匹配字母和数字 句点 "." 匹配随意单字符. ^,在行首 匹配字符串或字符序列,如查询当前文件夹下的全部文件夹: ls - ...
- JAVA基础针对自己薄弱环节总结02(循环)
循环 A:水仙花. classShuiXianHua { public static void main(String[] args) { for(int i=101;i<1000;i++) { ...
- Razor数组数据
控制器层 public ActionResult DemoArray() { Product[] array = { new Product {Name = "Kayak", Pr ...
- a标签中的javascript:;是什么
a标签中的javascript:;是什么 一.问题 <a>标签中href="javascript:;"表示什么意思?? <a id="jsPswEdit ...
- POJ 2459 模拟
题意: 思路: 按照题意模拟即可 //By SiriusRen #include <cstdio> using namespace std; int c,f1,f2,d,xx,yy,vis ...
- ES6第二节：新的声明方式
通过上一节的环境搭建完成,接下来我们就可以愉快的探索ES6的新世界了!下面我们从新的声明方式开始: 在ES6里新加了两种声明方式:let 和 const,以前我们都是用var去作声明,接下来我们一一比 ...
- 新版mysql修改root密码
- 【2017 Multi-University Training Contest - Team 3】RXD and math
[Link]: [Description] [Solution] 发现1010mod(109+7)=999999937; 猜测答案是nk 写个快速幂; 注意对底数先取模; [NumberOf WA] ...
- vim-大小写装换
以下内容参考自 http://blog.csdn.net/yangzhongxuan/article/details/8484167 自己验证了效果 命令一:单个字符转换(光标所在位置的字母进行转换) ...
- [LuoguU41039]PION后缀自动机 树链剖分+动态开点线段树
链接 刚开始看出题人题解都吓蒙掉了,还以为是什么难题,结果就一板子题 思路:对每一个文件名开一棵线段树,然后树剖即可 #include<bits/stdc++.h> #define REP ...