文档章节

jQuery(三)jQuery事件执行/简单事件/复合事件

年少爱追梦
 年少爱追梦
发布于 2016/06/05 21:10
字数 1389
阅读 133
收藏 0

                                                  jQuery事件执行

    写在前面,jquery代码执行时机对比:$(docuemnt).ready(function(){xxx 代码}); 与window.onload()=function(){xxx 代码}的区别。

    window.onload()程序是等所有文件都下载完成,而$(docuemnt).ready()是dom元素都可以操作时就执行,不必等所有的关联文件都下载成功。所以如果要对关联文件的高度和宽度下载时,用$(docuemnt).ready()就可能出错,因为该文件还没有成功下载,实际的高度和宽度是无法拿到的。所以css文件的引用最好卸载js文件之前,这样肯定会先下载。

    两者之间的区别:window.onload()只能指定其中一个函数,$(docuemnt).ready()可以重复定义,而且都会执行。按照位置的顺序进行执行。

$(document).ready(function(){
	alert("chen");
});

$(document).ready(function(){
	alert("de");
});

$(document).ready(function(){
	alert("kai");
});

jquery的一些简单的使用技巧:入口函数,作用都是一致的。

$(document).ready(function(){

});

$().ready(function(){

});

$(function(){

});

正片开始,简单的事件(bind()函数的用法)

$(document).ready(function(){
	$('#pBtn').bind('click',function(){
		$('p').css("background-color","#CCCCCC");
	});
	
	$('#hBtn').bind('click',function(){
		$('h1').css("background-color","#F0F8FF");
	});
	
});
//html页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/event.js" ></script>
	</head>
	<body>
		<p>this is a button event!</p>
		<h1>this is a button event!</h1>
		
		<input type="button" id="pBtn"  value="change_p"/>
		
		<input type="button" id="hBtn"  value="change_h"/>
	</body>
</html>

有一部分事件简写方法,不用为每一个事件进行绑定。

$(document).ready(function(){

	
	sampleEvent();
	$('#hBtn').bind('click',function(){
		$('h1').css("background-color","#F0F8FF");
	});
	
});

function sampleEvent(){
	
	$('#pBtn').click(function(){
		$('p').css("background-color","#CCCCCC");
	});
    /*$('#pBtn').bind('click',function(){
		$('p').css("background-color","#CCCCCC");
	});
	*/确实少写了一些单词,但对称性来讲注释掉的代码其实更加优雅,简写事件的所有方法在下面的表格中。

}
方法 描述
bind() 向匹配元素附加一个或更多事件处理器
blur() 触发、或将函数绑定到指定元素的 blur 事件
change() 触发、或将函数绑定到指定元素的 change 事件
click() 触发、或将函数绑定到指定元素的 click 事件
dblclick() 触发、或将函数绑定到指定元素的 double click 事件
delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die() 移除所有通过 live() 函数添加的事件处理程序。
error() 触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.pageX 相对于文档左边缘的鼠标位置。
event.pageY 相对于文档上边缘的鼠标位置。
event.preventDefault() 阻止事件的默认动作。
event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
event.target 触发该事件的 DOM 元素。
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type 描述事件的类型。
event.which 指示按了哪个键或按钮。
focus() 触发、或将函数绑定到指定元素的 focus 事件
keydown() 触发、或将函数绑定到指定元素的 key down 事件
keypress() 触发、或将函数绑定到指定元素的 key press 事件
keyup() 触发、或将函数绑定到指定元素的 key up 事件
live() 为当前或未来的匹配元素添加一个或多个事件处理器
load() 触发、或将函数绑定到指定元素的 load 事件
mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready() 文档就绪事件(当 HTML 文档就绪可用时)
resize() 触发、或将函数绑定到指定元素的 resize 事件
scroll() 触发、或将函数绑定到指定元素的 scroll 事件
select() 触发、或将函数绑定到指定元素的 select 事件
submit() 触发、或将函数绑定到指定元素的 submit 事件
toggle() 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger() 所有匹配元素的指定事件
triggerHandler() 第一个被匹配元素的指定事件
unbind() 从匹配元素移除一个被添加的事件处理器
undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来
unload() 触发、或将函数绑定到指定元素的 unload 事件

复合事件:对于一个事件想要交替执行多个function的复合事件,可以使用jquery .toggle()和.hover()这两个自定义事件处理程序。

   toggle()是对点击事件的自定义; .hover()是对鼠标在上或在下事件进行自定义。

//css内容
.hide {
	display: none;
}

.heighlight {
	background-color: chartreuse;
	
}
//jquery
$(document).ready(function(){
	sampleEvent();
	sampleEvent1();
	
});

function sampleEvent(){
	
	$('#pBtn').toggle(function(){
		$('p').addClass('hide');
	},function(){
		$('p').removeClass('hide');
	});
}

function sampleEvent1(){
	
	$('#hBtn').hover(function(){
		$('h1').addClass('heighlight');
	},function(){
		$('h1').removeClass('heighlight');
	});
	
}
//html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/event.css" />
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/event.js" ></script>
	</head>
	<body>
		<p>this is a button event!</p>
		<h1>this is a button event!</h1>
		<input type="button" id="pBtn"  value="change_p"/>
		<input type="button" id="hBtn"  value="change_h"/>
	</body>
</html>


 

© 著作权归作者所有

年少爱追梦
粉丝 35
博文 193
码字总数 120092
作品 0
杭州
程序员
私信 提问
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0
jquery合集--从零开始学习jQuery系列- 转载

从零开始学习jQuery系列 作者: ziqiu.zhang 来源: 博客园 发布时间: 2009-12-22 11:37 阅读: 3452 次 [收藏] 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二...

nkbai
2010/04/06
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
20
0
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
2018/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
2
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
10
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部