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 代码如下: < ...
随机推荐
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- 67.nodejs取参四种方法req.body,req.params,req.param,req.body
转自:http://www.cnblogs.com/jkingdom/p/8065202.html 摘要: nodejs取参四种方法req.body,req.params,req.param,req. ...
- java判断编码格式
package com.sssjd.storm; import java.io.UnsupportedEncodingException; /** * Created by jorda on 2017 ...
- bash命令集---文件的操作
git bash命令集: clear:清除窗口中的内容 ls touch cat more head tail mv cp rm diff chmod gzip gunzip gzcat lpr lp ...
- node搭建服务器
创建简单的服务器,可以简单连接 var http = require("http"); var server = http.createServer(); server.on(&q ...
- ArcGIS中数据之间的转换接口IFeatureDataConverter2
之前我写过一篇文章关于ArcGIS各种空间数据格式之间转换的通用方法:ArcGIS中sde,mdb,shp数据之间的转换.这里使用的主要接口方法就是用到了IFeatureDataConverter接口 ...
- 洛谷 P2679 子串
题目背景 无 题目描述 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新 ...
- golang 方法内部定义子方法及调用
package main import ( "fmt" "reflect" ) func out(ch chan int) { <-ch fmt.Prin ...
- 关于Webpack详述系列文章 （第四篇）
1. webpack基本概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入.Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.We ...
- BZOJ1444: [Jsoi2009]有趣的游戏（Trie图，矩乘）
Description Input 注意 是0<=P, n , l, m≤ 10. Output Sample Input input 1 3 2 2 1 2 1 2 AB BA AA inpu ...