jquery1.3API的Events部分

最新推荐文章于 2022-01-15 22:43:21 发布

dujingjing1230

最新推荐文章于 2022-01-15 22:43:21 发布

阅读量726

点赞数

分类专栏： Javascript 文章标签： jquery events api function button scroll

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4267305

版权

Javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

首先是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>

dujingjing1230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery1.3API的Events部分

首先是Event Handling部分:1.bind(type,data,fn):这个就是绑定一个或者多个事件到匹配的控件。也可以绑定客户自己的事件。目前支持的绑定事件主要有:blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, m
复制链接

扫一扫

专栏目录