<!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学习-鼠标事件的更多相关文章

  1. jQuery的鼠标事件总结

    jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...

  2. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  3. jquery学习笔记-----事件和动画

    一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} )  jquery的read ...

  4. Python+Selenium学习--鼠标事件

    场景 前景讲解了鼠标的click()事件,而我们在实际的web产品测试中,有关鼠标的操作,不仅仅只有单击,有时候还包括右击,双击,拖动等操作,这些操作包含在ActionChains类中. Action ...

  5. jQuery学习笔记——事件

    何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...

  6. jquery 的鼠标事件/淡入淡出/绑定

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. jQuery学习三——事件

    代码如下: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </head& ...

  8. JQuery学习:事件绑定&入口函数&样式控制

    1.基础语法学习: 1.事件绑定 2.入口函数 3.样式控制 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. jQuery学习-键盘事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. HAproxy simple

    下载地址 start install: wget     http://www.haproxy.org/download/1.7/src/haproxy-1.7.5.tar.gz tar   -xf  ...

  2. Oracle EBS 获取说明性弹性域全局数据元

    SELECT b.flex_value_set_id, t.application_column_name, t.form_left_prompt FROM fnd_descriptive_flexs ...

  3. Python爬虫实战---抓取图书馆借阅信息

    Python爬虫实战---抓取图书馆借阅信息 原创作品,引用请表明出处:Python爬虫实战---抓取图书馆借阅信息 前段时间在图书馆借了很多书,借得多了就容易忘记每本书的应还日期,老是担心自己会违约 ...

  4. 基于JVM(内存)和Tomcat性能调优

    一.总结前一天的学习 从“第三天”的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü   吞吐量 ü   Responsetime ü   Cpuload ü   MemoryUsa ...

  5. Entity Framework对同一张表配置一对多关系

    在实际的项目开发中,可能会遇到同一张表同时保存自身和上级(或下级)的信息(一般是通过设置一个上级主键[ParentId]的列与主键[Id]关系) 例如:城市库,有国家.省.市...,省的ParentI ...

  6. [控件] TranformFadeView

    TranformFadeView 效果图: 源码地址: https://github.com/YouXianMing/UI-Component-Collection 注意: maskView是iOS8 ...

  7. Windows批量修改文件夹及子文件夹下文件的扩展名

    实例:将 D:/backup 目录下所有后缀名为 “.zip” 的文件替换为 “.exe” 后缀 bat批处理: @echo off rem 不显示执行过程 D: rem 切换至指定盘符 cd D:/ ...

  8. 铁乐学python_day13_迭代器生成器

    一.[可迭代对象Iterable] 粗略判断的话,我们可以说能被for循环进行遍历的对象就是可迭代对象,如str,list,tuple,dict(key),set,range. (open file ...

  9. APUE 4.8 umask函数

  10. 【洛谷】【归并排序】P1908 逆序对

    [题目描述:] 猫猫TOM和小老鼠JERRY最近又较量上了,但是毕竟都是成年人,他们已经不喜欢再玩那种你追我赶的游戏,现在他们喜欢玩统计.最近,TOM老猫查阅到一个人类称之为“逆序对”的东西,这东西是 ...