jQuery学习-鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<script src="js/jquery.js"></script> <style>
.me{ border: 1px solid red;
margin-top: 75px;
width: 400px;
height: 150px;
background-color: #ccc;
overflow: auto;
}
</style> <script type="text/javascript">
//页面加载完成简写形式
$(function(){
$("button").on("click",function(){ $("input").css("background-color","lightblue");
}); //移动进入的时候触发mouseover,移出时触发mouseout
//在jQuery中提供了个hover() 带两个参数 是 鼠标移动进入时执行的函数和鼠标移动出执行的函数
$(".me").hover(function(){
//移入执行的函数
$(this).css("background-color","red");
},function(){
//移出执行的函数
$(this).css("background-color","#ccc");
}) //给整个文档绑定鼠标移动事件
//在事件处理函数中有一个默认参数 事件对象event 它包含了事件产生的信息
$(document).on("mousemove",function(event){ var x=event.pageX//鼠标在文档X坐标
var y=event.pageY//鼠标Y坐标
$("#div1").text("X:"+x+"Y:"+y); }); //双击放大DIV
$(".me").on("dblclick",function(){ $(this).width();
$(this).height();
}); //停止双击事件向父层传播
$("button").dblclick(function(event){ event.stopPropagation();
}); }) </script>
</head>
<body>
<div>
<div id="div1">在这里显示坐标</div>
<div class="me">事件测试案例
<input type="text" /><br>
<button>提交</button>
</div>
</div>
</body>
</html>
jQuery学习-鼠标事件的更多相关文章
- jQuery的鼠标事件总结
jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...
- js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
- jquery学习笔记-----事件和动画
一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} ) jquery的read ...
- Python+Selenium学习--鼠标事件
场景 前景讲解了鼠标的click()事件,而我们在实际的web产品测试中,有关鼠标的操作,不仅仅只有单击,有时候还包括右击,双击,拖动等操作,这些操作包含在ActionChains类中. Action ...
- jQuery学习笔记——事件
何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...
- jquery 的鼠标事件/淡入淡出/绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery学习三——事件
代码如下: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </head& ...
- JQuery学习:事件绑定&入口函数&样式控制
1.基础语法学习: 1.事件绑定 2.入口函数 3.样式控制 <!DOCTYPE html> <html lang="en"> <head> & ...
- jQuery学习-键盘事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- ARM CPU 架构
1978年12月5日,物理学家赫尔曼·豪泽(Hermann Hauser)和工程师Chris Curry,在英国剑桥创办了CPU公司(Cambridge Processing Unit),主要业务是为 ...
- MySQL Flashback 工具介绍
MySQL Flashback 工具介绍 DML Flashback 独立工具,通过伪装成slave拉取binlog来进行处理 MyFlash 「大众点点评」 binlog2sql 「大众点评(上海) ...
- CentOS针对磁盘IO[jdb2进程]的优化
CentOS的jdb2进程总是沾满io,查了一些资料后才知道,这个问题源自系统bug,在此记录一下解决办法: 将高IO的磁盘,用以下参数remount即可 mount -t ext4 -o remou ...
- Linux 系统的/目录
根目录下的重要目录 目录 应放置档案内容 /bin 系统有很多放置执行档的目录,但/bin比较特殊.因为/bin放置的是在单人维护模式下还能够被操作的指令.在/bin底下的指令可以被root与一般帐号 ...
- Skype for Business Server-呼叫质量仪表板(一)安装与配置
第一篇:安装与配置 很多公司在运行过程中都遇到了难以追踪客服人员绩效的情况,公司没有有效的方法追踪员工在通过电话等远程方式解决客户问题.销售产品.客户关怀的情况.Skype for Business提 ...
- ZT Android 4.2蓝牙介绍
Android 4.2蓝牙介绍 分类: Android开发系列 2013-06-27 14:16 7110人阅读 评论(22) 收藏 举报 目录(?)[-] Android 42蓝牙介绍 一 蓝牙规 ...
- js 获取后缀参数
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...
- jQuery复制table header到表格的最下面
为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现: 1 2 3 4 5 var $tfoot = $(''); $($('t ...
- linux_bc命令
bc 命令: bc 命令是用于命令行计算器. 它类似基本的计算器. 使用这个计算器可以做基本的数学运算. 语法: 语法是 bc [命令开关]命令开关: -c 仅通过编译. ...
- ansible--02
一.目录结构: 二.配置文件解析 1. Inventory:主机列表配置文档 2.ansible.cfg:可存放多地 2.1 ansible读取此conf的顺序:当前命令执行目录-- >用户家目 ...