jquery1.3API的Events部分

来源：互联网发布：linux wifi渗透工具编辑：程序博客网时间：2024/04/30 12:31

首先是Event Handling部分:

1.bind(type,data,fn):

这个就是绑定一个或者多个事件到匹配的控件。也可以绑定客户自己的事件。

目前支持的绑定事件主要有:blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"                     "http://www.w3.org/TR/html4/loose.dtd"><html><head>  <script src="http://code.jquery.com/jquery-latest.js"></script>    <script>  $(document).ready(function(){        $("p").bind("click", function(e){      var str = "( " + e.pageX + ", " + e.pageY + " )";      $("span").text("Click happened! " + str);    });    $("p").bind("dblclick", function(){      $("span").text("Double-click happened in " + this.tagName);    });    $("p").bind("mouseenter mouseleave", function(e){        $(this).toggleClass("over");    });  });  </script>  <style>  p { background:yellow; font-weight:bold; cursor:pointer;       padding:5px; }  p.over { background: #ccc; }  span { color:red; }  </style></head><body>  <p>Click or double click here.</p>  <span></span></body></html>主要是为p绑定了click和double click事件,然后为它绑定了mouseenter和nouseleave事件,后面还用到了toggleclass函数。

2.one(type, [data], fn): 为匹配的控件绑定只执行一次的事件。可以绑定的事件是:blur, focus, load, resize,

 scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover,

 mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

 <html><head>  <script src="http://code.jquery.com/jquery-latest.js"></script>    <script>  $(document).ready(function(){        var n = 0;    $("div").one("click", function(){      var index = $("div").index(this);      $(this).css({ borderStyle:"inset",                    cursor:"auto" });      $("p").text("Div at index #" + index + " clicked." +                  "  That's " + ++n + " total clicks.");    });  });  </script>  <style>  div { width:60px; height:60px; margin:5px; float:left;        background:green; border:10px outset;         cursor:pointer; }  p { color:red; margin:0; clear:left; }  </style></head><body>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <p>Click a green square...</p></body></html>3.trigger(event,[data]):

顾名思义,触发器。每次点击或者是用其它动作对匹配的控件操作时都会执行一次function里的代码一次。

在1.3版本中trigger有了新的改变,可以在一个trigger下面执行另外一个trigger。

下面这个例子就说明这个新的功能:

<html><head>  <script src="http://code.jquery.com/jquery-latest.js"></script>    <script>  $(document).ready(function(){        $("button:first").click(function () {      update($("span:first"));    });    $("button:last").click(function () {      $("button:first").trigger('click');      update($("span:last"));    });    function update(j) {      var n = parseInt(j.text(), 10);      j.text(n + 1);    }  });  </script>  <style>  button { margin:10px; }  div { color:blue; font-weight:bold; }  span { color:red; }  </style></head><body>  <button>Button #1</button>  <button>Button #2</button>  <div><span>0</span> button #1 clicks.</div>  <div><span>0</span> button #2 clicks.</div></body></html>

第二部分是interaction Helpler:

1.hover(over, out): 当鼠标放到某个控件和离开某个控件时都发生的事情。

<html><head>  <script src="http://code.jquery.com/jquery-latest.js"></script>    <script>  $(document).ready(function(){        $("li").hover(      function () {        $(this).append($("<span> ***</span>"));      },       function () {        $(this).find("span:last").remove();      }    );     //li with fade class   $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});  });  </script>  <style>  ul { margin-left:20px; color:blue; }  li { cursor:default; }  span { color:red; }  </style></head><body>  <ul>    <li>Milk</li>    <li>Bread</li>    <li class='fade'>Chips</li>    <li class='fade'>Socks</li>  </ul></body></html>

2.toggle(fn,fn2,[fn3,fan4,...]);某个事件发生时,在几个功能之间来回切换。

当匹配的控件找到时,首先第一个功能被fired,然后第二个,第三个。。。。

如果一个click使用toggle功能，俺么使用unbind("click")来取消toggle事件。

<html><head>  <script src="http://code.jquery.com/jquery-latest.js"></script>    <script>  $(document).ready(function(){        $("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":""});      }    );  });  </script>  <style>  ul { margin:10px; list-style:inside circle; font-weight:bold; }  li { cursor:pointer; }  </style></head><body>  <ul>    <li>Go to the store</li>    <li>Pick up dinner</li>    <li>Debug crash</li>    <li>Take a jog</li>  </ul></body></html>

第三部分是Event Helpers:

1.blur() : 为每个匹配的控件触发一个blur事件。blur事件我的理解是某个控件失去焦点。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

    $("input").blur(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });

});
</script>
<style>span {display:none;}</style>
</head>
<body>
<p><input type="text" /> <span>blur fire</span></p>
<p><input type="password" /> <span>blur fire</span></p>
</body>
</html>