JQuery中的事件(三)

一:页面载入

ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
返回值
jQuery
参数
fn (Function) : 要在DOM就绪时执行的函数

示例
在DOM加载完成时运行的代码,可以这样写:
jQuery 代码:
$(document).ready(function(){

// 在这里写你的代码...

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

// 你可以在这里继续使用$作为别名...

});
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>巧用jQuery事件</title>
<style type="text/css">
.high{
 font-weight:bold;   /* 粗体字 */
 color : red;        /* 字体颜色设置红色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>
 <!--   引入jQuery -->
    <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>

 <script type="text/javascript">
     $(document).ready(function() {
         $("p").one("click", { name: "zhang" }, function(event) {
             // alert($(this).text());
         //var oEvent = window.event;
             var msg = event.data.name;
             alert(msg);
         });
     })

  </script>
</head>
<body >
<p>Hellow</p>
<p>World</p>
</body>
</html>

二:事件处理
bind(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。多数情况下,可以把事件处理器函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理器函数则作为第三个参数),见示例二。
返回值
jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

示例
当每个段落被点击的时候,弹出其文本。
jQuery 代码:
$("p").bind("click", function(){
  alert( $(this).text() );
});
你可以在事件处理之前传递一些附加的数据。
jQuery 代码:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

通过返回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")

给一个事件传递参数
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!"]);

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>巧用jQuery事件</title>
<style type="text/css">
.high{
 font-weight:bold;   /* 粗体字 */
 color : red;        /* 字体颜色设置红色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>
 <!--   引入jQuery -->
    <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>

 <script type="text/javascript">
     $(document).ready(function() {
                 var fn1 = function() {
                     alert("click");
                 };
                 var fn2 = function() {
                     alert("click again");
                 }
                 $("p").bind("click", fn1)
                 .bind("click",fn2)
                 .bind("mouseover", function() { $(this).css("background-color", "red") })
                 .bind("mouseout", function() { $(this).css("background-color", "white") });

                 $("#btn1").bind("click", function() {
                     $("p").unbind("click", fn2);
                 });

                 $("p").toggle(function() {
                     $(this).addClass("high");
                 }, function() {
                 $(this).removeClass("high");
                 });

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

  </script>
</head>
<body >
<p>Hellow</p>

<input id="btn1" type="button" value="Click Me" />
</body>
</html>

三: 交互处理
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":""});
      }
    );

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>巧用jQuery事件</title>
<style type="text/css">
.high{
 font-weight:bold;   /* 粗体字 */
 color : red;        /* 字体颜色设置红色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>
 <!--   引入jQuery -->
    <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>

 <script type="text/javascript">
     $(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"]);
         });
     })

  </script>
</head>
<body >
<p>Hellow</p>
<p>World</p>
<input id="btn1" type="button" value="Click Me" />
</body>
</html>

四、事件
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)

四:模拟操作:

时间: 2024-10-07 11:13:52

JQuery中的事件(三)的相关文章

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

Jquery中each的三种遍历方法

Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(data) { $.each(data, function(n,value) { });}); 1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,dom

jQuery中绑定事件的几种方法

以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

jQuery:详解jQuery中的事件(一)

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代码,但是自觉还差的好远,跟好多大神(比如阮一峰)的理解还是有很大差距.现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生

web前端之锋利的jQuery四:jQuery中的事件

web前端之锋利的jQuery四:jQuery中的事件 加载DOM: 执行时机: $(document).ready(function(){}); 详情解释 事件绑定: bind(event,data,function) 第一个参数是事件类型,类型包括:blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit

jQuery中的事件机制深入浅出

昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中

jQuery中Ajax事件beforesend及各参数含义

jQuery中Ajax事件beforesend及各参数含义 2014-01-21 22:27 1678人阅读 评论(0) 收藏 举报  分类: jquery(36)  转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the befor

【学习笔记】jquery中的事件和动画

---恢复内容开始--- jquery中的事件 jquery用$(document).ready()方法来代替传统JavaScript的window.onload方法. window.onload方法在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后执行,通过 $(document).ready()方法注册的事件处理程序的DOM完全就绪时就可以被调用.此时,网页中的所有元素对jquery都是可以访问的. load()方法会在元素的onload事件中绑定一个处理函数,若绑定给windo

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../