例子1

ready() DOM加载完毕

load() 元素加载完毕

resize() 浏览器窗口的大小发生变化

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		/*原生写法

		window.onload = function(){

		}

		*/

		/*jquery写法

		上面等同于下面的写法

		$(window).load(function() {

		});

		*/

		/*

		ready的写法：

		$(document).ready(function(){

		})

		*/

		/* ready的简写：

		$(function(){

		})

 		*/

 		// 窗口改变尺寸的时候，会触发事件；比如多次手动拉动浏览器窗口大小，就会触发多次2

 		$(window).resize(function() {

 			console.log('2');

 		});

	</script>

</head>

<body>

	<div id="div1"></div>

</body>

</html>

　　

二，bind()

使用bind()可以绑定多个事件，比如bind('click' mouseover', function(){...}，其中有2个参数，第一个参数表示事件，多个事件用空格隔开，比如这里点击和鼠标经过都会触发事件；后面的参数是一个匿名函数，写入触发的事件。

绑定和解绑方法如下

$(function(){

    $('#div1').bind('mouseover click', function(event) {

        alert($(this).html());

        // $(this).unbind();

        $(this).unbind('mouseover');

    });

});

　　

三. 自定义事件

主动触发：可使用jquery对象上的trigger方法来触发对象上绑定的事件。

自定义事件：除了系统事件外，可通过bind方法自定义事件，然后用trigger方法来触发这写事件

如下例子

再第一个按钮上绑定了2个事件，一个是自定义的hello事件，一个是系统事件click；在第二个按钮上点击后，分别触发这两个事件。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>自定义事件</title>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		$(function(){

			$('#btn').bind('hello',function(){

				alert('hello!');

			});

			$('#btn').bind('click',function(){

				alert('click');

			});

			$('#btn2').click(function() {

				$('#btn').trigger('hello');

				$('#btn').trigger('click');

			});

		})

	</script>

</head>

<body>

	<input type="button" name="" value="按钮" id="btn">

	<input type="button" name="" value="按钮2" id="btn2">

</body>

</html>

　　

jquery事件三 -- load(), ready(), resize()以及bind()事件的更多相关文章

  1. jQuery document window load ready 区别详解

    用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件,小菜当然也知道,而且自认为很了解,直到最近出了问题,才知道事情并不是那么简单. ...

  2. JQuery 在$(window).load() 事件中 不运行 $(window).resize()

    本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题   :J ...

  3. jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下   今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...

  4. 原 jQuery中document的ready和load事件的区别？

    概述: 大家在工作中用jQuery的时候一定会在使用之前这样:   1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...

  5. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  6. 【学习笔记】锋利的jQuery（三）事件和动画

    一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...

  7. JQuery 的Bind()事件

    刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...

  8. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

随机推荐

  1. css垂直居中方案

    先介绍几种常见的垂直布局方式: 已知盒子具体宽度(宽度可以为百分比)(适用于居中浮动元素) 第一种: 给父元素相对定位,给子元素绝对定位 父布局 { position: relative; } 子布局 ...

  2. iOS调试程序的方法

    IOS各种调试技巧豪华套餐 普通操作 如图3 基本的断点操作如下 图4 点击那个黑列列就创建了一个断点,再次点击就临时取消这个断点(但是不删除),长按那个断点拖出去就删除了(mac os的系统工程师就 ...

  3. cannot import name '_validate_lengths' from 'numpy.lib.arraypad'

    在Anaconda下新配置了tensorflow环境,结果在引入skimage 包时报错,错误提示from numpy.lib.arraypad import _validate_lengths,找不 ...

  4. 移动端flexbox的小tips

    我也是看了腾讯isux的博客,解答了我关于flexbox一个很长时间的疑惑,就是flex布局在安卓手机会出现内容长短不同导致不均分的现象. 具体的内容可以去看腾讯isux的博客,地址在这:https: ...

  5. java基础知识汇总（持续更新中....）

    1.java四大特性:抽象.继承.封装,多态 构造函数: http://blog.csdn.net/qq_33642117/article/details/51909346 2.java数据基本类型: ...

  6. linux环境下搭建osm_web服务器二(Mapnik及apache2mod_tile配置)：

    Mapnik及apache2mod_tile配置 上一篇,我们配置好了PostgreSQL服务器,导入了测试数据.今天,我们来配置 mapnik2 + apache2 + mod_tile 的WMS服 ...

  7. HUST软件测试数媒1501班: 第0周作业成绩

    说明 本次公布的成绩包含三次作业的结果: 毕博平台课前测试题 第0周作业1:开设博客 第0周作业2:博客阅读和思考 如果同学对作业结果存在异议,可以: 在线平台的第一周在线答疑中创建话题申诉. 或直接 ...

  8. [GO]并行和并发的区别

    并行:指在同一时刻,有多条指令在多个处理器上同时执行 并发:指在同一时刻只能有一条指令执行,但多个进程指令被快速的轮换执行,使得在宏观上具有多个进程同时执行的效果,但在微观上并不是同时执行的,只有把时 ...

  9. 【转载】Jedis对管道、事务以及Watch的操作详细解析

    转载地址:http://blog.csdn.net/liyantianmin/article/details/51613772 1.Pipeline 利用pipeline的方式从client打包多条命 ...

  10. Android学习笔记——文件路径、内容Uri学习笔记[转]

    一.URI 通用资源标志符(Universal Resource Identifier, 简称"URI"). Uri代表要操作的数据,Android上可用的每种资源 - 图像.视频 ...