zoukankan      html  css  js  c++  java
  • jquery 学习(六)

    HTML

      <!--绑定事件-->
        <div class="a1">
            <button class="bt">按钮</button>
        </div>
        <!--绑定事件结束-->
    
        <!--事件委托-->
        <div>
            <ul class="u1">
                <li class="l1">1111</li>
                <li>2222</li>
                <li>3333</li>
                <li>4444</li>
            </ul>
            <button class="bt2">+</button>
            <div class="d1"></div>
        </div>
        <!--事件委托结束-->

    事件绑定

        // 绑定事件
            $('.bt').bind('click',function f() {
                 alert("OK")
            });
    
            // 解除绑定
            $('.a1').unbind('click');
    
            //简写方式
                $('.bt').click(function f() {
                    alert("OK")
                });

    事件委托

        //事件委托
            // $('父标签代理').on(事件,函数)
    
            //示例:
            //为每一个li添加一个弹出框
            $('ul').on('click',function () {
                alert("OK!!!");
            });
            //新添加一个li标签
              $('.bt2').click(function f() {
                  var $a1 = $("<li>").html("5555");
                  $(this).parent().children("ul").append($a1)
              })
    
            // //data 参数:
            //  function ff2(event) {
            //      alert(event.data.foo);
            //      $('ul').on('click',{foo:'bar'},ff2)
            //  }

    事件加载

    等同于DOM 中的aload,在页面加载完成后,再加载代码(防止找不到标签)

         // //事件加载  ready === aload
        // //.ready 页面加载完成后再运行代码
        // $(document).read(function () {
        //     alert("OK")
        // });
        //
        // $(function f3() {
        //     alert('ok')
        // })
  • 相关阅读:
    pat1038. Recover the Smallest Number (30)
    pat1037. Magic Coupon (25)
    pat1036. Boys vs Girls (25)
    pat1031. Hello World for U (20)
    pat1030. Travel Plan (30)
    pat1028. List Sorting (25)
    pat1027. Colors in Mars (20)
    pat1017. Queueing at Bank (25)
    pat1025. PAT Ranking (25)
    Reverse Linked List II
  • 原文地址:https://www.cnblogs.com/Anec/p/9870792.html
Copyright © 2011-2022 走看看