jQuery学习（三）事件

来源：互联网发布：魔兽单机数据库修改编辑：程序博客网时间：2024/05/16 13:45

3.1：在页面加载完成后执行任务

3.1.1代码执行的时机选择

$(document).ready()是jQuery中响应javaScript内置的onload事件，并执行任务的一种典型方式。虽然$(document).ready()和onload具有类似的效果，但是在出发操作的时间上存在着微妙的差异的。

当一个文档完全下载到浏览器中时，会触发window.onload事件。这就意味着页面上的全部元素对javaScript而言都是可以操作的，这种情况对编写功能代码非常有利。

通过$(document).ready()注册的事件处理程序，则会在DOM完全就绪并可以使用时调用。虽然这意味着所有元素对脚本而言都是可以访问的，但是却并不意味着所有关键的文件已经下载完毕。当HTML下载完成并解析为DOM树之后，代码就可以运行。

为了保证JavaScript代码执行以前已经应用了样式，最好是在<head>元素中把<link>放在<script>前面

3.1.2基于一个页面执行多个脚本

通过javaScript(而不是在HTML中添加处理程序属性)注册时间处理程序的传统机制是，把一个函数指定给DOM元素的对应属性。

function doStuff(){

执行某任务；

}

我们可以在html中指定这个函数

也可以在javaScript页面中进行处理；

window.onload = doStuff;

但是如果我们定义了另外一个方法，去执行另外的任务，

function doOtherStuff(){

//执行另外一种任务

}

window.onload = doOtherStuff

那么这个函数就会取代刚刚指定的第一个函数。因为.onload属性一次只能保存对一个函数的引用，所以不能在现有的行为基础上在增加行为。

在这种情况下，$(document).ready()机制能够很好的指定第一个函数。每次调用这个方法都会向内部的行为队列中添加一个新函数，在页面加载完成后，所有函数都将得到执行。而且是按照注册他们的

(注：window.onload虽然也可以注册多个函数，但不能保证按顺序执行);

3.1.3:代码简写方式

(1).

$(document).ready(function(){

//代码

}

);

(2).

$().ready(function(){

//代码

});

(3)

$(function(){

//代码

});

3.1.4:与其他库共存

在同一个页面中使用多个javaScript库。由于多个库都使用$标识符，因此就需要一种方式来避免冲突。

<scripttype="text/javascript"src="/JQueryTest/js/jquery-1.6.2.js"></script>

<scripttype="text/javascript"src="exporting.js"></script>

<scripttype="text/javascript">

jQuery.noConflict();

</script>

这里调用noConflict()方法让出$,这样就可以引用2个库了，但是在需要使用jQuery方法时，必须记住要用jQuery而不是$来调用。

在ready()方法中使用$的技巧。我们传递给它的回调函数中可以接受一个参数，就是jQuery本身。利用这个参数，我们可以重命名jQuery为$,而不必担心造成冲突：

jQuery(document).ready(function($){

//在这里，可以正常使用$!

}

);

jQuery(function($){

//正常使用$

});

3.2:简单的事件

除了页面加载之外,我们也想在其他很多时候完成某个任务。

3.2.1简单隐藏效果

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

<title>Insert titlehere</title>

<scripttype="text/javascript"src="../js/jquery-1.6.2.js"></script>

<scripttype="text/javascript"src="../js/jquery.url.js"></script>

<scripttype="text/javascript">

$(document).ready

(

function()

{

$("button").click

(

function()

{

$("p").hide();

}

);

}

);

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is aparagraph.</p>

<p>This is anotherparagraph.</p>

<button>Click me</button>

</body>

</html>

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

3.2.2.jQuery事件

下面是 jQuery 中事件方法的一些例子：

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

3.2.3.常用的jQuery事件方法

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

触发实例：

$("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

绑定实例：

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。

方法

描述

bind()（被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数）

向匹配元素附加一个或更多事件处理器

blur()（当元素失去焦点时发生 blur 事件）

触发、或将函数绑定到指定元素的 blur 事件

change()(当元素的值发生改变时，会发生 change 事件)

触发、或将函数绑定到指定元素的 change 事件

click()(单击元素事，会发生dblclock事件)

触发、或将函数绑定到指定元素的 click 事件

dblclick()(当双击元素时，会发生 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()(当鼠标指针穿过元素时，会发生 mouseenter 事件)

触发、或将函数绑定到指定元素的 mouse enter 事件

mouseleave()(当鼠标指针离开元素时，会发生 mouseleave 事件)

触发、或将函数绑定到指定元素的 mouse leave 事件

mousemove()(当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件)

触发、或将函数绑定到指定元素的 mouse move 事件

mouseout()(当鼠标指针从元素上移开时，发生 mouseout 事件)

触发、或将函数绑定到指定元素的 mouse out 事件

mouseover()(当鼠标指针位于元素上方时，会发生 mouseover 事件)

触发、或将函数绑定到指定元素的 mouse over 事件

mouseup()(当在元素上放松鼠标按钮时，会发生 mouseup 事件)

触发、或将函数绑定到指定元素的 mouse up 事件

one()

向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

ready()

文档就绪事件（当 HTML 文档就绪可用时）

resize()(当调整浏览器窗口的大小时，发生 resize 事件。)

触发、或将函数绑定到指定元素的 resize 事件

scroll()

触发、或将函数绑定到指定元素的 scroll 事件

select()

触发、或将函数绑定到指定元素的 select 事件

submit()

触发、或将函数绑定到指定元素的 submit 事件

toggle()(oggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。)

绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

trigger()

所有匹配元素的指定事件

triggerHandler()

第一个被匹配元素的指定事件

unbind()

从匹配元素移除一个被添加的事件处理器

undelegate()

从匹配元素移除一个被添加的事件处理器，现在或将来

unload()

触发、或将函数绑定到指定元素的 unload 事件

3.2常用事件方法举例

3.2.1.bind()方法

当点击鼠标时，隐藏或显示 p 元素：

$("button").bind("click",function(){

$("p").slideToggle();

});

定义和用法

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

将事件和函数绑定到元素

规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。

语法

$(selector).bind(event,data,function)

参数

描述

Event

必需。规定添加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。

Data

可选。规定传递到函数的额外数据。

Function

必需。规定当事件发生时运行的函数。

替代语法

$(selector).bind({event:function,event:function, ...})

参数

描述

{event:function, event:function, ...}

必需。规定事件映射，其中包含一个或多个添加到元素的事件，以及当事件发生时运行的函数。

3.2.2.blur方法。

实例

当输入域失去焦点 (blur) 时改变其颜色：

<html>

<head>

$(document).ready(function(){

$("input").focus(function(){

$("input").css("background-color","#FFFFCC");

});

$("input").blur(function(){

$("input").css("background-color","#D6D6FF");

});

</script>

</head>

<body>

Enter your name: <inputtype="text" />

<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>

</body>

</html>

定义和用法

当元素失去焦点时发生 blur 事件。

blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。

提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。

触发 blur 事件

触发被选元素的 blur 事件。

语法

$(selector).blur()

将函数绑定到 blur 事件

规定当被选元素的 blur 事件发生时运行的函数。

语法

$(selector).blur(function)

参数

描述

function

可选。规定当 blur 事件发生时运行的函数。

3.2.3delegate()

实例

当点击鼠标时，隐藏或显示 p 元素：

<html>

<head>

<title>Insert title here</title>

$(document).ready(function()

{

$("div").delegate("button","click",function(){

$("p").slideToggle();

});

//向这个按钮后面添加一个段落

$("button").click(function(){

$("<p>这是一个新段落。</p>").insertAfter("button");

});

</script>

</head>

<body>

<divstyle="background:blue;">

<p>这是一个段落</p>

<button>请点击这里</button>

</div>

</body>

</html>

定义和用法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

$(selector).delegate(childSelector,event,data,function)

参数

描述

childSelector

必需。规定要附加事件处理程序的一个或多个子元素。

Event

必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件值。必须是有效的事件。

Data

可选。规定传递到函数的额外数据。

Function

必需。规定当事件发生时运行的函数。

3.2.4error方法

实例：如果图像不存在，则用一段预定义的文本取代它：

<html>

<head>

<scripttype="text/javascript">

$(document).ready(function(){

$("img").error(function(){

$("img").replaceWith("<p><b>图片未加载！</b></p>");

});

</script>

</head>

<body>

<p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>

</body>

</html>

3.2.5.which 属性

实例：显示按了哪个键：

<html>

<head>

<scripttype="text/javascript">

$(document).ready(function(){

$("input").keydown(function(event){

$("div").html("Key: " + event.which);

});

</script>

</head>

<body>

请随意键入一些字符：<inputtype="text" />

<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>

<div />

</body>

</html>

定义和用法

which 属性指示按了哪个键或按钮。

语法

event.which

参数

描述

event

必需。规定要检查的事件。这个 event 参数来自事件绑定函数。

3.2.6,target 属性

<html>

<head>

<scripttype="text/javascript">

$(document).ready(function(){

$("p, button, h1, h2").click(function(event){

$("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");

});

</script>

</head>

<body>

<h1>这是一个标题</h1>

<h2>这是另一个标题</h2>

<p>这是一个段落</p>

<button>这是一个按钮</button>

<p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件，下面的 div 会显示出哪个元素触发了该事件。</p>

</body>

</html>

3.2.7 mouseup()方法 mouseover方法

<html>

<head>

$(document).ready(function(){

$("button").mouseup(function(){

$("div").slideToggle();

});

$("#mousePara").mouseover(function(){

$("button").mouseup();

});

</script>

</head>

<body>

<div>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</div>

<p id="mousePara">如果您把鼠标移动本段落上，会激活上面这个按钮的 mouseup 事件。</p>

</body>

</html>

3.2.8resize()方法

<html>

<head>

<title>Insert title here</title>

$(document).ready(function()

{

$(window).resize(function(){

while(true){

alert("傻X别动我的浏览器！");

}

});

</script>

</head>

<body>

<p>请您改变浏览器的窗口</p>

</div>

</body>

</html>

（注：以上内容是通过http://www.w3school.com.cn学习，很多内容粘帖下来是为了方便学习）