zoukankan      html  css  js  c++  java
  • jQuery入门[3]-事件

    jQuery入门[1]-构造函数
    jQuery入门[2]-选择器
    jQuery入门[3]-事件
    jQuery入门[4]-链式代码
    jQuery入门[5]-AJAX
    jQuery入门[6]-动画

    jQuery对事件的支持主要包括:
    • bind()--为事件绑定处理程序,如:
          $("p").bind("mouseenter mouseleave", function(e){
      $(this).toggleClass("over");
      });
    • unbind()--注销绑定在事件上的处理程序,如:$(document).unbind('ready');,如不给参数,则清除所有事件处理程序。
      $("#unbind").click(function () {
      $("#theone").unbind('click', aClick);
      });
    • trigger()--触发某类事件。
      $("button:first").trigger('click');
    • triggerHandler()--触发某类事件,但不触发默认的事件处理逻辑,比如a的定向。
      $("input").triggerHandler("focus");
    • one()--为事件绑定只能被触发一次的处理程序。
          $("div").one("click", function(){
      });
    • ready()/click()/change()/toggle(fn,fn)/dblclick()……各种常规事件的快捷方式,xxx(fn)为绑定处理程序,xxx()为触发事件

    jQuery 1.2的事件支持命名空间,
      $("div").bind("click", function(){ alert("hello"); });
    $("div").bind("click.plugin", function(){ alert("goodbye"); });
    $("div").trigger("click!"); // alert("hello") only

    DEMO:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title>Events</title>
        
    <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
        
    <style type="text/css">
            textarea
            
    {
                height
    : 118px;
                width
    : 280px;
            
    }
        
    </style>
        
    <script type="text/javascript">
            $(
    function(){
                $(
    'textarea').bind('propertychange',function(){
                    $(
    '#result').html($('textarea').val())
                }
                ).bind(
    'change',function(){
                    alert($(
    'textarea').val());
                });
            });
        
        
    </script>
    </head>
    <body>
        
    <textarea></textarea>
        
    <div id='result'></div>
    </body>
    </html>
    运行效果如下:


    Reference:http://docs.jquery.com/Events

    --未完待续--
  • 相关阅读:
    Android 目前最稳定和高效的UI适配方案
    很值得收藏的安卓开源控件库
    django-初始配置(纯手写)
    面向对象 继承
    wsgiref手写一个web服务端
    socket手写一个简单的web服务端
    vue指令
    vue入门
    python中and,or
    面向对象三大特性-继承
  • 原文地址:https://www.cnblogs.com/think/p/1092011.html
Copyright © 2011-2022 走看看