jQuery----鼠标移动、点击案例
2024-10-01 21:33:32
单击隐藏：
<!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>
最新文章
- iOS面试题
- iOS语音
- PHP中文名文件下载实现
- aChartEngine图表显示（一页显示多张图表）
- Map/Reduce 工作机制分析 --- 错误处理机制
- JS - Object and Property的删除用法
- C#调用C dll，结构体传参
- 文件上传ajaxfileupload.js插件
- python计算两个日期时间差
- Unable to open log device '/dev/log/main': No such file or directory
- BCB/Delphi中常用的VCL函数说明（文件函数）
- 人工智能搜索算法（深度优先、迭代加深、一致代价、A*搜索）
- Spring IOC（四）总结
- day36 GIL锁与线程池
- Use Slim to overview model in Tensorflow like model.summary() in Keras
- 维护贴--验证可用--mysql给root开启远程访问权限，修改root密码（转）
- SVG 学习<三>渐变
- C语言和go语言之间的交互 - C语言中使用go语言，使用的go语言又使用了c语言
- ubuntu-15.04-desktop-i386.iso：ubuntu-15.04-desktop-i386：安装Oracle11gR2
- C++的可移植性和跨平台开发