jQuery(二)事件
2024-06-11 04:30:57
鼠标事件:clickdblclickmouseenter:鼠标进入mouseleave:鼠标离开hover:鼠标悬停
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("p").mouseenter(function(){$("p").css("background-color","yellow");});$("p").mouseleave(function(){$("p").css("background-color","lightgray");});$("#eilin").click(function(){$("p").css("background-color","red");});$(".eiling").dblclick(function(){$("p").css("background-color","black");});$("p").hover(function(){$("p").css("background-color","blue");});
});
</script>
</head>
<body><p>鼠标移动到该段落。</p>
<button id='eilin'>单击</button>
<button class='eiling'>双击</button>
</body>
</html>键盘事件keypress:键被按下keydown:键被按下的过程keyup:键盘被松开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
i= 0;
$(document).ready(function(){$("input").keydown(function(){$("input").css("background-color","yellow");});$("input").keyup(function(){$("input").css("background-color","pink");});$("input").keypress(function(){$("span").text(i+1);});
});
</script>
</head>
<body>输入你的名字: <input type="text">
<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
<p>键盘按下的次数:<span>0</span></p>
</body>
</html>表单事件submit:当提交表单时，会发生 submit 事件。该事件只适用于 <form> 元素。blur:当失去焦点时发生 blur 事件focus:获得焦点时发生 focus 事件change:字段改变时警报文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("form").submit(function(){alert("提交");});$("input[name='FirstName']").change(function(){alert("文本已被修改");});$("input[name='LastName']").focus(function(){$("span").css("display","inline").fadeOut(2000);});$("input").blur(function(){alert("输入框失去了焦点");});
});
</script>
</head>
<body><form action="">
First name:
<input type="text" name="FirstName" value="Mickey"><br>
Last name:
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
<p><span>12</span></p>
</form> </body>
</html>文档/窗口事件load:当指定的元素已加载时，会发生 load 事件(适用于任何带有 URL的元素（比如图像、脚本、框架、内联框架）以及 window 对象)resize:当调整浏览器窗口大小时，发生 resize 事件scroll:当用户滚动指定的元素时，会发生 scroll 事件(所有可滚动的元素和 window 对象（浏览器窗口）)unload:当离开页面时，显示提示消息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x=0;
y=0;
$(document).ready(function(){$("div").scroll(function(){$("span").text(x+=1);});$(window).unload(function(){alert('unload');});$(window).resize(function(){$('span').text(y+=1);});$('image').load(function(){alert('load successful');});
});
</script>
</head>
<body><p>尝试滚动 div 中的滚动条</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！
<br><br>
菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！</div>
<p>滚动了 <span>0</span> 次。</p>
<p>当你点击 <a href="//www.runoob.com">这个链接</a>, 或者关闭窗口，alert 窗口会弹出。</p>
<image src="//www.runoob.com/wp-content/uploads/2015/11/rock600x400.jpg" alt="图片文字描述" width="304" height="236"/>
</body>
</html>转载于:https://www.cnblogs.com/eilinge/p/10043623.html
jQuery(二)事件相关推荐
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 深入学习jQuery鼠标事件
前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件 类型 鼠标事件共10类,包括click.contextmenu.dblclic ...
- jquery键盘事件全记录
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
- 跟我学jQuery(二) 初识jQuery
跟我学jQuery教程目录: 跟我学jQuery(一) 前言 跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- jQuery的事件change
人生还在继续,只有不断补充以前所不懂的知识,今天练习一个jQuery的事件change.这个事件是在对象失去focus并且原本值有所变化时就产生此事件. 如select时,用户所选择的选项有变时,或是 ...
最新文章
- 表单之input标签
- 开发出高性能的网站系列文章
- Linux软件安装的补充
- C++中OpenCV应用
- java使用jdbc的查询_如何在Java中使用多个查询使用JDBC
- mysql小写转大写UPPER() 和大写转小写LOWER()
- soapui 测试soap_使用SoapUI调用不同的安全WCF SOAP服务-基本身份验证，第二部分
- Spring Boot 实用开发技巧————Eclipse 远程调试
- 数字频率计的verilog实现
- spring boot整合cxf发布和调用webservice
- Python使用---面向对象OOP（类和对象）--完善中
- 设计模式（三）： FACTORY工厂模式 -- 创建型模式
- Python_pycharm调试模式+使用pycharm给python传递参数
- 用谷歌浏览器如何下载哔哩哔哩中的视频
- java 切图_分布式切图服务——切图篇
- [转载] 科学家开发的新AI因过于危险而不敢发布
- ivx中字体显示_【初阶篇】iVX成语填字游戏制作
- 王刚日记：写文章和赚钱之间的关系
- MYS-6ULX-IOT 开发板测评——Yocto 创建嵌入式 Linux 发行版
- 六足机器人的步态分析与实现——1