jQuery 事件和动画以及Ajax

.on(events[,selector],handle(eventObject))

例如，给button绑定事件将输入框内的内容（非空），添加到 ul 里面，然后点击 li 元素会打印相应的元素的text。

  // HTML
  <ul class="ulist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>  
  <input type="text">
  <input type="button" value="Add to list">
  <div id="show"></div>
  <script>
  // button click event
  $("input[type=button]").on("click", function(){
    if($("input[type=text]")) {
      $("<li>"+ $("input[type=text]").val() + "</li>").appendTo(".ulist");
    }
  });

  // li click event
  $(".ulist").on("click","li",function(e){
    $("#show").text($(this).text());
  })
  </script>

.off(events[,selector],handle(eventObject))

对事件进行解绑，例如对上文的li列表的click事件进行解绑。

$(".ulist").off("click");

.trigger(evnets)

对事件进行自动触发，而无需进行真实点击。例如上例设定 2 秒对第三个li元素进行点击：

setTimeout(function(){
  $(".ulist").eq(2).trigger("click");
}, 2000)

源码地址

jQuery 常用动画

.hide() / .show() / .fadeOut() / .fadeIn() / .slideDown() / .slideUp()

jQuery 常用的动画函数都遵循一样的参数以及函数格式，handle([duration][,easing][,complete func])

  <div class="anima"></div>
  <div class="wrap">
    <button class="hide">hide</button>
    <button class="show">show</button>
    <button class="fade-out">fade-out</button>
    <button class="fade-in">fade-in</button>
    <button class="slide-down">slide-down</button>
    <button class="slide-up">slide-up</button>      
    <button class="callback">callback</button>

   </div>
  <script>
    var duration = 550;
    $(".hide").on("click", function() {
      $(".anima").hide(duration);
    })
    $(".show").on("click", function() {
      $(".anima").show(duration);
    })
    $(".fade-out").on("click", function() {
      $(".anima").fadeOut(duration);
    })
    $(".fade-in").on("click", function() {
      $(".anima").fadeIn(duration);
    })
    $(".slide-down").on("click", function() {
      $(".anima").slideDown(duration);
    })
    $(".slide-up").on("click", function() {
      $(".anima").slideUp(duration);
    })

jQuery 还允许像调用对象的方法那样连续地对同一个对象调用动画函数而不用写成“回调地狱”的样子：

    $(".callback").on("click", function() {
      $(".anima").hide(duration)
                 .show(duration)
                 .fadeOut(duration)
                 .fadeIn(duration)
                 .slideUp(duration)
                 .slideDown(duration);
    });

上述源码地址

自定义动画

.animate(properties[,duration][,easing][,complete])

  <div class="wrap">  
  <div class="anima"></div>
  </div>
    <button class="step">step50</button>
    <button class="back">back50</button>
    <button class="down">down50</button>
    <button class="up">up50</button>
    <button class="toMiddle">to middle</button>
    <button class="stop">stop</button>      
    <button class="toEnd">toEnd</button> 
    <button class="reset">reset</button>
  <script>
    var duration = 500;
    $(".step").click(function() {
      $(".anima").animate({
        left:"+=50px"
      },duration);
    });
    $(".back").click(function() {
      $(".anima").animate({
        left:"-=50px"
      },duration);
    });  
    $(".down").click(function() {
      $(".anima").animate({
        top:"+=50px"
      },duration);
    }); 
    $(".up").click(function() {
      $(".anima").animate({
        top:"-=50px"
      },duration);
    }); 
    $(".toMiddle").click(function() {
      $(".anima").animate({
        left:"200px",
        top:"200px"
      },3000);
    }); 

    $(".auto").click(function(){
      $(".anima").animate({
        left:"300px"
      },duration)
      .animate({
        top: "200px"
      },duration)
      .animate({
        left:"-=300px"
      },duration)
      .animate({
        top:"+=200"
      },duration)
    });
  </script>

.clearQueue()

清除动画队列中未执行的动画，不影响现在正在执行的动画。当执行上文auto 函数，执行到某一个阶段，点击clear，会将未执行的动画清除，进将当前动画执行完毕就结束。

    $(".clear").click(function(){
      $(".anima").clearQueue();
    });

.stop([clearqueue][,jumptoend])

停止当前动画，根据参数是否清除动画队列，或者跳到最终执行状态，默认都是false。当使用默认写法时，点击stop即停止当前动画，执行队列的接下来一系列动画。

    $(".stop").click(function() {
      $(".anima").stop();
    });

.finish()

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。

    $(".toEnd").click(function() {
      $(".anima").finish();
    });