1. 程式人生 > >Jquery物件、代替body標籤的onload、事件機制、同一函式實現get\set

Jquery物件、代替body標籤的onload、事件機制、同一函式實現get\set

 Jquery物件 

jquery提供了很多遍歷的函式,如each(fn),但是使用這些函式的前提是:你使用的物件是Jquery物件。使一個Dom物件成為一個Jquery物件很簡單,通過下面一些方式(只是一部分):

  程式碼   var a = $("#cid");   var b = $("<p>hello</p>");   var c = document.createElement("table");   var tb = $(c);

代替body標籤的onload

  這個慣例,也許是除了$()之外,用得最多的地方了。下面一段程式碼:   程式碼   $(document).ready(function(){   alert("hello");   });(1)   <body onload="alert('hello');">(2)

  上面兩段程式碼是等價的。但程式碼1的好處是做到表現和邏輯分離。並且可以在不同的js檔案中做相同的操作,即$(document).ready (fn)可以在一個頁面中重複出現,而不會衝突。

基本上Jquery的很多plugin都是利用這個特性,正因為這個特性,多個plugin共同使用起來,在初始化時不會發生衝突。

  不管怎麼說,這個慣例可以分離javascrīpt與HTML。推薦使用。   別誤導,上面兩段程式碼不是等價的。   <body onload="alert('hello');">這裡的alert('hello');要等到頁面全部載入完畢才執行,注意是全部載入,包括dom,圖片等其它資源。   而$(document).ready(function(){   alert("hello");   });(1)   當dom載入完就可以執行了。

事件機制

  我大量使用的事件可能就是button的onclick了。以前習慣在input 元素上寫onclick = "fn()",使用jquery可以使javascrīpt程式碼與html程式碼分離,保持HTML的清潔,還可以很輕鬆地繫結事件,甚至你可以不知道“事件”這個名詞。   程式碼   $(document).ready(function(){   $("#clear").click(   function(){   alert("i am about to clear the table");   }   );   $("form[12]").submit(validate);   });   function validate(){   //do some form validation   }

同一函式實現get\set

  程式碼   $("#msg").html();   $("#msg").html("hello");   上面兩行程式碼,呼叫了同樣的函式。但結果卻差別很大。   第一行是返回指定元素的HTML值,第二行則是將hello這串字元設定到指定元素中。jquery的函式大部分有這樣的特性。