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在网页中所有的元素包 ...
随机推荐
- 迅雷Bolt的ClipSubBindBitmap函数特别说明
因为在工作中基于迅雷Bolt开发的是IM产品,需要实现自定义用户头像的功能. 但Bolt中对图像的默认拉伸锯齿效果非常明显,所以自己实现了图像拉伸函数,代码已共享,具体可查看:<迅雷Bolt图像 ...
- springboot部署多个vue项目
在springboot下部署多个vue项目,只需要将vue打包成静态文件后,将其放在resources的静态文件夹下即可. 如下图:static目录下有三个vue的静态文件夹,分别为运营后台(admi ...
- UVa10288概率
题意: 每张彩票上印有一张图案,要集齐n个不同的图案才能获奖.输入n,求要获奖购买彩票张数的期望(假设获得每个图案的概率相同). 分析: 假设现在已经有k种图案,令s = k/n,得到一个新图案需要t ...
- bzoj2683/4066 简单题
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2683 http://www.lydsy.com/JudgeOnline/problem.ph ...
- unity中绘制战争迷雾
接上一篇中说的游戏,我们已经实现了client.host上的一个物体可见不可见的行为.之后我们可以加入类似检查两个单位之间的距离.或是两个单位之间有无阻挡物来进一步实现游戏机制. 在这篇随笔中我会首先 ...
- 【MySQL优化】使用show status查看MySQL服务器状态信息
在网站开发过程中,有些时候我们需要了解MySQL的服务器状态信息,譬如当前MySQL启动后的运行时间,当前MySQL的客户端会话连接数,当前MySQL服务器执行的慢查询数,当前MySQL执行了多少SE ...
- [Leetcode Week2]Sort List
Sort List题解 题目来源:https://leetcode.com/problems/sort-list/description/ Description Sort a linked list ...
- Android的简单应用（一）——PreferenceFragment实现应用的设置
今天主要讲解怎么使用PreferenceFragment.PreferenceFragment它与默认的SharedPreferences文件相连接,不需要你再自己写代码去操作SharedPrefer ...
- hdu 5190(水题)
Go to movies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- codeforces 739D
这题码量好大…… 首先思考如何构造,不难找到一下两个条件 1. 在长度为i的环上的点一定是i的倍数个 2. 到达长度i的环的点集距离一定是连续的 第一个条件是很好搞的,关键是第二个条件. 因为存在着x ...