zoukankan      html  css  js  c++  java
  • jQuery 事件

    当点击鼠标时,隐藏或显示 p 元素:

    $("div").delegate("button","click",function(){
      $("p").slideToggle();
    });

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    向未来的元素添加事件处理程序

    如何使用 delegate() 方法向尚未创建的元素添加事件处理程序。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div").delegate("p","click",function(){
    $(this).slideToggle();
    });
    $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
    });
    });
    </script>
    </head>
    <body>
    <div style="background-color:yellow">
    <p>这是一个段落。</p>
    <p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
    <button>在本按钮后面插入一个新的 p 元素</button>
    </div>
    <p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
    </body>
    </html>

    当点击按钮时,隐藏或显示 p 元素:

    $("button").live("click",function(){
      $("p").slideToggle();
    });

    定义和用法

    live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

    语法

    $(selector).live(event,data,function)
    参数描述
    event

    必需。规定附加到元素的一个或多个事件。

    由空格分隔多个事件。必须是有效的事件。

    data 可选。规定传递到该函数的额外数据。
    function 必需。规定当事件发生时运行的函数。

    向未来的元素添加事件处理器

    如何使用 live() 方法向尚未创建的元素添加事件处理器。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("p").live("click",function(){
    $(this).slideToggle();
    });
    $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
    });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>点击任意 p 元素会令其消失。包括本段落。</p>
    <button>在本按钮后面插入新的 p 元素</button>
    <p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p>
    </body>
    </html>

  • 相关阅读:
    Chapter1-data access reloaded:Entity Framework(上)
    Part1-Redefining your data-access strategy 重新定义你的数据访问策略
    ora-12541无监听的一种场景
    GridView根据一列自动计算(转载)
    百度Fex webuploader.js上传大文件失败
    JS文件中引用另一个JS文件
    连接虚拟机的SQLServer
    Spring中Bean的生命周期
    Spring中Bean的作用范围调整
    Spring中三种创建Bean对象的方式
  • 原文地址:https://www.cnblogs.com/hr2014/p/3830000.html
Copyright © 2011-2022 走看看