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

例如，給button綁定事件將輸入框內(nèi)的內(nèi)容（非空），添加到 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)

對事件進行自動觸發(fā)，而無需進行真實點擊。例如上例設定 2 秒對第三個li元素進行點擊：

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

源碼地址

jQuery 常用動畫

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

jQuery 常用的動畫函數(shù)都遵循一樣的參數(shù)以及函數(shù)格式，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 還允許像調(diào)用對象的方法那樣連續(xù)地對同一個對象調(diào)用動畫函數(shù)而不用寫成“回調(diào)地獄”的樣子：

    $(".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()

清除動畫隊列中未執(zhí)行的動畫，不影響現(xiàn)在正在執(zhí)行的動畫。當執(zhí)行上文auto 函數(shù)，執(zhí)行到某一個階段，點擊clear，會將未執(zhí)行的動畫清除，進將當前動畫執(zhí)行完畢就結(jié)束。

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

.stop([clearqueue][,jumptoend])

停止當前動畫，根據(jù)參數(shù)是否清除動畫隊列，或者跳到最終執(zhí)行狀態(tài)，默認都是false。當使用默認寫法時，點擊stop即停止當前動畫，執(zhí)行隊列的接下來一系列動畫。

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

.finish()

停止當前動畫，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)。

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

源碼地址

Ajax 方法

.ajax()

普遍的ajax請求，包括get方法和post方法其他方法。

$.ajax({
  url:'http://example.com',
  method:'GET',
  data:{
    username:'myname',
    password:'423kfdjah'
  },
  dataType:'json'
}).done(function(result){
  // do something  
}).fail(function(){
  // do something
}).always(function(){
  // do something
})

.get() 和 .post()方法

$.get("example.com").done(function(result) {
  // do something
})

$.post("example", data)

.getJSON()

var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });