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在网页中所有的元素包 ...
随机推荐
- vue文件使用stylus报错问题
先npm install stylus --save然后安装你少的page.json中依赖:npm install stylus-loader css-loader style-loader --sa ...
- PHP 扒一扒这些题目都考了哪些知识点
1.模除 题目: <?php echo -10%3; *结果* -1 分析:其实这道题的知识点是在考模除和正负号的关系,那么我们看一段进阶的代码 <?php echo "10%3 ...
- js获取当前url地址参数中文乱码问题
网上看了一些关于此问题的文章,都说的不清不楚,有些更是乱七八糟,完全没法看,故此找了一篇能用的,借鉴作为笔记. //首先获取到当前页面的地址栏信息 var url = window.location. ...
- NET中IL理解（转）
.NET CLR 和 Java VM 都是堆叠式虚拟机器(Stack-Based VM),也就是說,它們的指令集(Instruction Set)都是採用堆叠运算的方式:执行时的资料都是先放在堆叠中, ...
- #error#storyboard#xib#解决方案
https://www.evernote.com/shard/s227/sh/cad7d5f5-8e81-4b3b-908f-5d8eee7d11e2/928786149cf9a103a74626 ...
- 01-modal
Demo示例程序源代码
源代码下载链接:01-modal.zip37.8 KB // MJAppDelegate.h // // MJAppDelegate.h // 01-modal // // Created by ...
- Kali Linux中前十名的Wifi攻击工具
无 线网络的攻与防一直是比较热门的话题,由于无线信号可以被一定范围内的任何人接收到(包括死黑阔),这样就给WIFI带来了安全隐患:路由器生产厂商和网 络服务供应商(ISPs)的配置大多是默认开启了WP ...
- platform型设备在/dev目录下自动创建设备节点的分析【转】
转自:http://blog.csdn.net/rockrockwu/article/details/7357648 系统启动过程中platform设备.驱动注册完毕,为什么在/dev目录下就自动创建 ...
- 【反演复习计划】【bzoj2820】YY的GCD
这题跟2818一样的,只不过数据水一点,可以用多一个log的办法水过去…… 原题意思是求以下式子:$Ans=\sum\limits_{isprime(p)}\sum\limits_{i=1}^{a}\ ...
- 定义序列化器时的read_only和write_only选项
# 转载请留言联系 read_only read_only表示只能读,不能进行修改.例如定义序列化器时,id字段通常指定read_only=True.在序列化时,即对象转为字典.JSON字符串时,字典 ...