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)


四:模拟操作:

 

posted @ 2016-09-16 16:55  石shi  阅读(328)  评论(0编辑  收藏  举报