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在网页中所有的元素包 ...
随机推荐
- Elasticsearch 5.2.1Cluster 搭建
1.安装java cd ~ wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http%3A%2F%2Fw ...
- IDEA 用maven创建web项目编译时不能发布resources中的文件
1.在pom.xml加入 <build> <resources> <resource> <directory>${basedir}/src/main/j ...
- [POJ2954&POJ1265]皮克定理的应用两例
皮克定理: 在一个多边形中.用I表示多边形内部的点数,E来表示多边形边上的点数,S表示多边形的面积. 满足:S:=I+E/2-1; 解决这一类题可能运用到的: 求E,一条边(x1,y1,x2,y2)上 ...
- 【STSRM13】花六游鸟小
[题意]给定n个节点的树,每个节点有一个m位二进制数,数字可以随时按位取反,每个数位有一个价值,定义每个点的最大价值是从根到这个点路上的数字(可以取反)或起来的数字中,1有价值0无价值,加起来得到的最 ...
- Django【进阶】中间件
中间件 一.概念 django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 其 ...
- LeetCode 6:Excel Sheet Column Number
Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...
- RabbitMQ消息队列（二）: 工作队列
1. 工作队列: 对于资源密集型任务,我们等待其处理完成在很多情况下是不现实的,比如无法在http的短暂请求窗口中处理大量耗时任务, 为了达到主线程无需等待,任务异步执行的要求,我们可以将任务加入任务 ...
- Xcode升级到7之后 发现速度超级慢
Xcode升级到7之后 发现速度超级慢 转自:http://www.jianshu.com/p/608803eb1e12 解决方法,慢google了一下是由于插件造成饿,于是乎将Alcatraz安装的 ...
- AJAX--前后台交互
注:ajax通过async参数决定是异步还是同步,false同步,true异步; 异步执行顺序是先执行后续动作,再执行success里代码; 同步是先执行success里代码,再执行后续代码; 验证: ...
- 51nod 几道题
1001 数组中和等于K的数对 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 给出一个整数K和一个无序数组A,A的元素为N个互不相同的整数, 找出数组A中所有和等于 ...