jQuery当中的事件（第六章ppt）
bink绑定事件
hover合成事件
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<style type="text/css">
#panel{
width:300px;
height:300px;
border:1px solid;
}
#head{
background:red;
}
#content{
width:100px;
height:100px;
border:1px solid;
}
</style>
<script type="text/javascript">
$(function(){
//hover合成事件
/* $("#head").hover(function(){
$(this).next().show();
},function(){
$("#content").hide();
}); */ //绑定事件b
$("#head").bind("click",function(){
$("#content").show();
});
}); </script>
</head> <body>
<div id="panel">
<h5 id="head">什么是jquery</h5>
<div id="content" style="display:none">jquery是一门前端的语言</div>
</div>
</body>
</html>
模拟操作：trigger(触发自定义的事件)
<!DOCTYPE html>
<html>
<head>
<title>test5.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//自定义事件
/* $("#btn").bind("myclick",function(){
$("#div1").append("<p>never</p>");
}); */
//自定义带参数的事件
/* $("#btn").bind("myclick",function(event,mes1,mes2){
$("#div1").append("<p>never"+mes1+mes2+"</p>");
}); */
$("input").bind("focus",function(){
$("#div1").append("<p>never</p>");
}); //触发自定义事件
/* $("#btn").trigger("myclick"); */
//触发带参数的自定义事件：注意参数是以数组的形式传送
/* $("#btn").trigger("myclick",["111","222"]); */ //不仅触发为input元素绑定的focus事件，也会使得input元素本身得到焦点。
//$("input").trigger("focus");
//只会触发为input元素绑定的focus事件，不会使得input元素本身得到焦点。
$("input").triggerHandler("focus"); });
</script>
</head> <body>
<button id="btn">button</button>
<div id="div1" style="width:100px;height:100px;border:1px solid;"></div>
input:<input type="text" value="hello world">
</body>
</html>
事件对象的属性：event.type , event.preventDefault 等
<!DOCTYPE html>
<html>
<head>
<title>test3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
/* $("#sub").click(function(event){
//event.type事件的类型
alert(event.type);
}); */ //event.preventDefault() 阻止默认事件的行为********
$("#sub").click(function(event){
var name = $("#username").val();
if(name==null||name==""){ event.preventDefault();
} ;
}); //event.target获取到触发事件的元素
/* $("#a1").click(function(event){
alert(event.target);
return false; // 阻止链接跳转
}); */ //event.pageX和event.pageY获取相当于光标对于页面的x坐标和y坐标
/* $("body").click(function(event){
alert("x:"+event.pageX+" y:"+event.pageY);
}); */ //event.which在鼠标点击事件中获取鼠标的左（1），中（2），右（3）键
/* $("#username").mousedown(function(event){
alert(event.which);
}); */
//获得键盘的按键
/* $("#username").keyup(function(event){
alert(event.which);
}); */ //event.metaKey*********
/* $("#username").click(function(event){
alert(event.metaKey);
}) */;
});
</script>
</head> <body>
<a href="test1.html">超链接</a>
<form action="test1.html">
用户名：<input type="text" id="username"/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg" style="border:1px solid;width:100px;height:100px"></div>
<a id="a1" href="http://baidu.com">百度</a>
<div id="div1" style="width:100px;height:100px;border:1px solid"></div>
<span>span元素</span>
<input id="inp1" type="text">
</body>
</html>
jQuery当中的事件（第六章ppt）的更多相关文章
- 锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用
1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpR ...
- jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- 第一百六十九节，jQuery，基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...
- 第六章-jQuery
jQuery的理念是: 写更少的代码, 完成更多的工作 jQuery有两个版本1.x和2.x, 版本2.x不再支持IE678 jQuery最明显的标志就是$, jQuery把所有的功能都封装在了jQu ...
- 第3章 jquery中的事件和动画
一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...
随机推荐
- Eclipse中的Web项目自动部署到Tomcat的webapp目录下
Eclipse中的Web项目自动部署到Tomcat 原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写 ...
- MDIO/MDC(SMI)接口-leonwang202
ChinaUnix博客 http://blog.chinaunix.net/uid-24148050-id-132863.html
- NYOJ 42 一笔画问题 （并查集+欧拉回路 ）
题目链接 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下来. 规定,所有的边都只能画一次,不能重复画. 输入 第一行只有一个正整数 ...
- 关于vscode的个人配置
vs code官方下载地址 : https://code.visualstudio.com/Download 下载好的vs code相当是一款纯文本编辑器,接下来开始进行对其配置: 页面设 ...
- 干货：MySQL数据库优化参考
本文整理了一些MySQL的通用优化方法,做个简单的总结分享,旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作,至于具体的SQL优化,大部分通过加适当的索引即可达到效果,更复杂的就需要具体 ...
- Windows 的GUID
GUID(全称:Globally Unique Identifier),是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中.在理想情况下,任何 ...
- 常见的makefile写法【转】
转自:http://blog.csdn.net/ghostyu/article/details/7755177 版权声明:本文为博主原创文章,未经博主允许不得转载. .目标名称,摆脱手动设置目标名称 ...
- Oracle基础 09 概要文件 profile
--创建 profile 概要文件create profile profile123 limit failed_login_attempts 2; --修改用户的 profile 文件alter u ...
- HTML5初学---坦克大战基础
让小球动起来,根据键盘的W(上),D(右),S(下),A(左):键的点击移动小球 <!DOCTYPE html> <html> <head> <meta ch ...
- Centos7/RHEL 7 配置静态路由
如图: 业务地址:192.168.10.0/24 192.168.20.0/24管理地址:172.168.10.0/24 172.168.20.0/24 需求:每台主机配置两张网卡,分别连 ...