jquery 複習筆記-事件

1 $(document).ready()的簡寫。

容許你綁定一個在DOM文檔載入完成後執行的函數。這個函數的做用如同$(document).ready()同樣，只不過用這個函數時，須要把頁面中全部須要在 DOM 加載完成時執行的$()操做符都包裝到其中來。從技術上來講，這個函數是可連接的－－但真正以這種方式連接的狀況並很少。 你能夠在一個頁面中使用任意多個$(document).ready事件。參考 ready(Function) 獲取更多 ready 事件的信息。

2 $(element).each 以每個匹配的元素做爲上下文來執行一個函數。

意味着，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不一樣的DOM元素（每次都是一個不一樣的匹配元素）。並且，在每次執行函數時，都會給函數傳遞一個表示做爲執行環境的元素在匹配的元素集合中所處位置的數字值做爲參數（從零開始的整型）。 返回 'false' 將中止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

$("img").each(function(i){    this.src = "test" + i + ".jpg";  });

$("img").each(function(){   $(this).toggleClass("example"); });

$("button").click(function () { $("div").each(function (index, domEle) {   // domEle == this   $(domEle).css("backgroundColor", "yellow");    if ($(this).is("#stop")) {   $("span").text("Stopped at div index #" + index);   return false;   } }); });

3  對象中元素的個數

$("img").size();

$("img").length;

4 get([index])

$("img").get(0);

$("img").get().reverse();

5 index([selector|element])

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

$('li').index(document.getElementById('bar')); //1，傳遞一個DOM對象，返回這個對象在原先集合中的索引位置
$('li').index($('#bar')); //1，傳遞一個jQuery對象
$('li').index($('li:gt(0)')); //1，傳遞一組jQuery對象，返回這個對象中第一個元素在原先集合中的索引位置
$('#bar').index('li'); //1，傳遞一個選擇器，返回#bar在全部li中的作引位置
$('#bar').index(); //1，不傳遞參數，返回這個元素在同輩中的索引位置。

6

$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah設置爲hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 設置爲86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

 

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;

 

jQuery.data(document.body, 'bar', 'test');