new_restart

浏览: 332755 次
性别:
来自: 北京

最近访客更多访客>>

yuanfen2014

james1110

毅毅Joey

xueyikang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQUERY事件集合

博客分类：

JS
JQUERY

js JavaScript jquery 事件

JQUERY事件集合：

方法描述

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()	触发、或将函数绑定到指定元素的 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 事件

页面载入

} ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

window.load事件只能执行一次，后面的window.load事件会覆盖前面的window.load事件

返回值：jQuery

参数：fn (Function) : 要在DOM就绪时执行的函数

示例

在DOM加载完成时运行的代码，可以这样写：

jQuery 代码:

$(document).ready(function(){
// 在这里写你的代码...
});

使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

jQuery 代码:

jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});

事件处理

} bind(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。没用on关键字

这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。多数情况下，可以把事件处理器函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理器函数则作为第三个参数），见示例二。

返回值:jQuery

参数:type (String) : 事件类型

data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象

fn ( Function，回调函数) : 绑定到每个匹配元素的事件上面的处理函数

在funciton中，可以用event.data属性值传递给事件对象的额外数据对象

示例：当每个段落被点击的时候，弹出其文本。

jQuery 代码:

$("p").bind("click", function(){
alert( $(this).text() ); //获取段落文本
});

你可以在事件处理之前传递一些附加的数据。

jQuery 代码:

function handler(event) {
alert(event.data.foo); //在funciton中，可以用event.data属性值传递给事件对象的额外数据对象
}
$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind("submit", function() { return false; })

通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind("submit", function(event){
event.preventDefault();
});

$(document).ready(function() {

$("p").one("click", { name: "zhang" }, function(event) {

// alert($(this).text());

//var oEvent = window.event; 效果是一样的，不过只有ie有用

var msg = event.data.name;

alert(msg);

});

})

通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind("submit", function() { return false; }) //阻止提交

通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind("submit", function(event){
event.preventDefault();
});

one(type,[data],fn)，为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只绑定一次

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数），见示例二。

返回值：jQuery

参数：type (String) : 事件类型

data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象

fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

示例

当所有段落被第一次点击的时候，显示所有其文本。

jQuery 代码:

$("p").one("click", function(){
alert( $(this).text() );
});

trigger(type,[data])在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

你也可以触发由bind()注册的自定义事件

返回值：jQuery

参数type (String) : 要触发的事件类型

data (Array) : (可选)传递给事件处理函数的附加参数

示例

提交第一个表单，但不用submit()

jQuery 代码:

$("form:first").trigger("submit") //触发submit事件

给一个事件传递参数

jQuery 代码:

$("p").click( function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

下面的代码可以显示一个"Hello World"

jQuery 代码:

$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

$(document).ready(function() {

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

alert($(this).text());})

//.trigger("click"); 一旦绑定后立即触发

$("#btn1").bind("click", function() {

$("p").trigger("click "); //button绑定其他元素事件

});

})

传参

$(document).ready(function() {

$("p").bind("mytest", function(event, a, b) {

alert(a);

alert(b);

})

//.trigger("click");

$("#btn1").bind("click", function() {

$("p").trigger("mytest", ["aaa", "bbb"]);

//触发段落P的 mytest事件

});

})

结果，弹出 “aaa”“bbb”“aaa”“bbb”，因为有两个段落P

移除事件unbind([type],[data])

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

I如果提供了事件类型作为参数，则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

返回值：jQuery

参数

type (String) : (可选) 事件类型

data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例

把所有段落的所有事件取消绑定

jQuery 代码:

$("p").unbind() 将段落的click事件取消绑定

jQuery 代码:

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入

jQuery 代码:

var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo

例子

$(document).ready(funciton(){

var fn1 = function() {

alert("click");

};

var fn2 = function() {

alert("click again");

}

$("p").bind("click", fn1)

$("p").bind("mouseover", function() { $(this).css("background-color", "red") })

.bind("mouseout", function() { $(this).css("background-color", "white") });

$("#btn1").bind("click", function() {

$("p").unbind("click", fn1);

// $("p").unbind(); 移除全部事件

});

})

注意，事件的移除，移除的事件必须以变量，或事件名的形式

如 $(“p”).unbind(“click”,funciton(){alert(“click again”)}) 这样移除是不行的

必须 $(“p”).unbind(“click”,fn2)

交互处理 hover(over,out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

返回值:jQuery

参数

over (Function) : 鼠标移到元素上要触发的函数

out (Function) : 鼠标移出元素要触发的函数

示例

鼠标悬停的表格加上特定的类

jQuery 代码:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

toggle(fn,fn)

每次点击后依次调用函数。

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

可以使用unbind("click")来删除。

返回值:jQuery

参数

fn (Function) : 第一数次点击时要执行的函数。

fn2 (Function) : 第二数次点击时要执行的函数。

fn3,fn4,... (Function) : 更多次点击时要执行的函数。

示例

对表格的切换一个类

jQuery 代码:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

对列表的切换样式

HTML 代码:

  <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>

$("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

事件

blur() 触发每一个匹配元素的blur事件。失去焦点的时候触发

这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

返回值：jQuery

blur(fn)

在每一个匹配元素的blur事件中绑定一个处理函数。

blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

返回值：jQuery

参数

fn (Function) : 在每一个匹配元素的blur事件中绑定的处理函数。

示例

任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。

jQuery 代码:

$("p").blur( function () { alert("Hello World!"); } );

同类用法的事件有：

change().change(fn)

click(), click(fn)

dblclick() , dblclick(fn)

error() , error(fn)

focus() , focus(fn)

keydown() , keydown(fn)

keypress() , keypress(fn)

keyup() , keyup(fn)

load(fn)

mousedown(fn)

mousemove(fn)

mouseout(fn)

mouseover(fn)

mouseup(fn)

resize(fn)

scroll(fn)

select() , select(fn)

submit() , submit(fn)

unload(fn)

模拟操作

1， 常用模拟

以上的例子都是用户必须通过单击按钮，才能触发click事件，但是有时，需要模拟用户来操作，以达到点击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动点击。

在jquery中，可以使用trigger()方法来模拟操作，例如可以使用下面的代码触发id为btn的按钮的click事件

$(‘#btn’).trigger(“click”);

也可以使用简化写法click(),来达到同样效果

$(‘#btn’).click();

触发自定义事件

Trigger（）方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

例如为元素绑定一个“myclick”事件，代码如下

$(‘#btn’).bind(“myclick”,funciton(){

$(“#test”).append(“<p>我的自定义事件</p>”);

})

想要触发这个事件

$(‘#btn’).trigger(“myclick”);

传递数据

Trigger(type[,data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数据形式传递，通常可以传递一个参数给回调函数来区别这次事件是代码触发还是用户触发的

$(“#btn”).bind(“myclick”,function(even,message1,message2){

$(‘#test’).append.(“<p>”message1”+”message2”</p>”);

})

$(‘#btn’).trigger(“myclick”,[“我的自定义”,”事件”])；

执行默认操作

Trigger（）方法触发后会执行浏览器默认操作：如

$(“input”).trigger(“focus”);

以上代码不仅会触发input元素绑定的focus事件，也会使input元素得到焦点

如果只想触发绑定的fcous事件，而不想执行浏览器默认操作，可以用另一个方法triggerHandler()方法

$(“input”).triggerHandler(“focus”);

该方法会触发input绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点

给事件添加命名空间，便于管理

$(function(){

$(“div”).bind(“click.plugin”,function(){

//xxxxxx

})

$(“div”).bind(“click”,function(){

//xxxxxx

})

$(“div”).bind(“mouseover.plugin”,function(){

//xxxxxx

})

$(“div”).bind(“dbclick”,function(){

})

$(“btn”).click(funciton{

$(“div”).unbind(“.plugin”);

})

})在绑定事件后面添加命名空间。这样直接事件时，只需要指定命名空间即可、如$(“div”).unbind(“.plugin”);

否则

$(“div”).unbind(“click”) .unbind(“mouseover”);

$(“div”).bind(“click.plugin”,function(){

//xxxxxx

})

$(“div”).bind(“click”,function(){

//xxxxxx

})

$(“button”).click(funciton(){

$(div).trigger(“click!”);

})

点击div元素后，会同时触发click.plugin事件和click事件，单击button只触发click事件

Click后面的感叹号的作用是匹配所有不包含在命名空间中的click方法

分享到：

PS命令详解 | vim编辑器之删除

2012-01-05 19:05
浏览 1975
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQUERY事件集合

JQUERY事件集合：

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQUERY事件集合

JQUERY事件集合：

评论

发表评论

相关推荐

Java代码转换成json代码

js nodetype

js的 function、内置对象、this概念

JS保留字

GWT

js 特殊字符处理

javascript的console.log()用法

jquery 之extend

jQuery中的.bind()、.live()和.delegate()

JQuery hover

jQuery源码解读---执行过程分析

Query源码解读---总体架构

Jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关

Query extend()详解

jQuery.extend 函数详解

setTimeout():useless setTimeout call (missing quotes around argument?)解决方案

JSONP

jquery get方式提交中文乱码

JS操作页面的一些小技巧

最近访客更多访客>>