jquery 溫故知新-核心篇

1.jQuery([selector,[context]])

//在文檔的第一個表單中，查找所有的單選按鈕(即: type 值爲 radio 的 input 元素)。
$("input:radio", document.forms[0]);
//在一個由 AJAX 返回的 XML 文檔中，查找所有的 div 元素。
$("div", xml.responseXML);

2.jQuery(html,[ownerDocument]) ^1.8*

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

3.jQuery.readyException( error ) ^3.1+

jQuery.readyException = function( error ) {
  console.error( error );
};

4.selector

$("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
  
結果:
ul
ul li
div#foo ul:not([class])

5.context

$("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");

[object HTMLDocument]  //如果是IE瀏覽器，則返回[object]
BODY

6.index([selector|element])

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

$('li').index($('#bar')); //1，傳遞一個jQuery對象
$('#bar').index('li'); //1，傳遞一個選擇器，返回#bar在所有li中的索引位置
$('#bar').index(); //1，不傳遞參數，返回這個元素在同輩中的索引位置。  

7.data([key],[value])參數 key 不得大寫

即當使用.data()獲取值時，jQuery會首先嚐試將獲取的字符串值轉化成JS類型，包括布爾值，null，數字，對象，數組： 
若值是”true|false”，則返回相應的布爾值； 
若值是”null”，則返回null； 
若值是純數字構成的字符串（+data + ”” === data），則返回相應的數字（+data）； 
若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$，比如”{key:value}“或[1,2,3]，則嘗試使用jQuery.parseJSON解析之；

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 
$("div").data("role") // "page"; 
$("div").data("lastValue") // 43; 
$("div").data("hidden") // true; 
$("div").data("options").name // "John"; 
$("div").removeData("role");  //移除blah

8.removeData([name|list]) ^1.7*

與 data([key], [value])函數作用相反
[name] 存儲的數據名
[list] 移除數組或以空格分開的字符串

9.queue(element,[queueName])

顯示或操作在匹配元素上執行的函數隊列

參數

a.element,[queueName]

element:檢查附加列隊的DOM元素
queueName:字符串值，包含序列的名稱。默認是 fx, 標準的效果序列。

b.element,queueName,newQueue

element:檢查附加列隊的DOM元素
queueName:字符串值，包含序列的名稱。默認是 fx, 標準的效果序列。
newQueue:替換當前函數列隊內容的數組

c.element,queueName,callback()

element:檢查附加列隊的DOM元素
queueName:字符串值，包含序列的名稱。默認是 fx, 標準的效果序列。
callback():要添加進隊列的函數

\\顯示隊列長度
<style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
</style>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>

$("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
});
function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
}
runIt();

\\通過設定隊列數組來刪除動畫隊列
<style>
div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px; 
    background:green; display:none; }
div.newcolor { background:blue; }
</style>

<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
      $(this).addClass("newcolor");
      $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
      $(this).removeClass("newcolor");
      $(this).dequeue();
  });
  $("div").slideUp();
});
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});

\\插入一個自定義函數 如果函數執行後要繼續隊列，則執行 jQuery(this).dequeue();
<style>
div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px; 
    background:green; display:none; }
div.newcolor { background:blue; }
</style>
Click here...
<div></div>

$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
          $(this).addClass("newcolor");
          $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
          $(this).removeClass("newcolor");
          $(this).dequeue();
      });
      $("div").slideUp();
});

10.dequeue([queueName])

從隊列最前端移除一個隊列函數，並執行他。

參數

[queueName] 隊列名，默認爲fx

\\使用 dequeue() 終止一個自定義的隊列函數
$("div").queue(function () {
  $(this).toggleClass("red");
  $(this).dequeue();
});

\\用dequeue來結束自定義隊列函數，並讓隊列繼續進行下去。\
<style>
div { margin:3px; width:50px; position:absolute;
    height:50px; left:10px; top:30px; 
    background-color:yellow; }
div.red { background-color:red; }
</style>

<button>Start</button>
<div></div>

$("button").click(function () {
    $("div").animate({left:'+=200px'}, 2000);
    $("div").animate({top:'0px'}, 600);
    $("div").queue(function () {
        $(this).toggleClass("red");
        $(this).dequeue();
    });
    $("div").animate({left:'10px', top:'30px'}, 700);
});

11.clearQueue([queueName])

清空對象上尚未執行的所有隊列

如果不帶參數，則默認清空的是動畫隊列。
這跟 stop(true)類似，但stop(true)只能清空動畫隊列，而這個可以清空所有通過 .queue() 創建的隊列。

參數

queueName 含有隊列名的字符串。默認是"Fx"，動畫隊列。

\\停止當前正在運行的動畫：
$("#stop").click(function(){
  $("#box").clearQueue();
});