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')
    // })