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在网页中所有的元素包 ...
随机推荐
- AngularJs学习——模拟用户登录的简单操作
效果截图:
- 慕课网javascript 进阶篇 第九章 编程练习
把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...
- 知问前端——日历UI(一)
日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...
- 01-modal
Demo示例程序源代码
源代码下载链接:01-modal.zip37.8 KB // MJAppDelegate.h // // MJAppDelegate.h // 01-modal // // Created by ...
- usaco 2000 contest 滑雪
2013-09-11 10:22 [题目大意]给定N个点的高度和M条相连的路线(单向),从最高点向下走, 到无法走时为一条路径,求不同的路径数,(一节点不同就叫不同) [输入样例] 4 5 (N, ...
- html——零散知识点
1.form表单中的button form表单中,正常应该提交数据的是type="submit" 2. html5的文件读取方法FileReader() 3.inpu ...
- xcode／Interface Build（IB）／iPhone模拟器／mac／组合键常用的命令集
1.Xcode常用快捷键: win+N:新建文件 win+shift+N:新建工程 win+O:打开工程或文件 win+S:保存 win+shift+S:另存为 win+Z:撤销一步 win+W:关闭 ...
- Selenium2+python自动化60-异常后截图（screenshot）【转载】
前言 在执行用例过程中由于是无人值守的,用例运行报错的时候,我们希望能对当前屏幕截图,留下证据. 在写用例的时候,最后一步是断言,可以把截图的动作放在断言这里,那么如何在断言失败后截图呢? 一.截图方 ...
- Selenium2+python自动化34-获取百度输入联想词【转载】
前言 最近有小伙伴问百度输入后,输入框下方的联想词如何定位到,这个其实难度不大,用前面所讲的元素定位完全可以定位到的. 本篇以百度输入框输入关键字匹配后,打印出联想词汇. 一.定位输入框联想词 1.首 ...
- Iphone安装Pinterest
由于Pinterest在中国的app store下架了,也就搜索不到该应用.所以只能上美国的app store下载. 1,下载itunes,登录vpn,注册新的apple id: 2,手机连接vpn, ...