|
|
Jquery是繼prototype之后又一個優秀的Javascrīpt框架。對prototype我使用不多,簡單了解過。但使用上jquery之后,馬上被她的優雅吸引住了。有人使用這樣的一比喻來比較prototype和jquery:prototype就像Java,而jquery就像ruby.實際上我比較喜歡java(少接觸Ruby 罷了)但是jquery的簡單的實用的確有相當大的吸引力啊!在項目里我把jquery作為自已唯一的框架類包。使用其間也有一點點心得,其實這些心得,在jquery的文檔上面也可能有講,不過還是記下來,以備忘罷。
var someElement = $("#myId");
看起來比其他兩個框架的要多了一個#,好,看看下面的用法: 代碼 $("div p");(1)
$("div.container")(2) $("div #msg");(3) $("table a",context);(4) 在prototype里看過這樣的寫法嗎?第一行代碼得到所有<div>標簽下的<p>元素。第二行代碼得到class 為container的<div>元素,第三行代碼得到<div>標簽下面id為msg的元素。第四行代碼得到context為上下文的table里面所有的連接元素。 如果你熟悉CSS,Xpath,你會覺得這些寫法很眼熟!對了。正是。看出奧妙了吧。jquery就是通過這樣的方式來找到Dom對象里面的元素。跟CSS的選擇器相類似。 二,Jquery對象? jquery提供了很多便利的函數,如each(fn),但是使用這些函數的前提是:你使用的對象是Jquer對象。使一個Dom對象成為一個Jquery對象很簡單,通過下面一些方式(只是一部分): 代碼
var a = $("#cid");(1)
var b = $("<p>hello</p>");(2) 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)可以在一個頁面中重復出現,而不會沖突。基本上Jqeury的很多plugin都是利用這個特性,正因為這個特性,多個plugin共同使用起來,在初始化時不會發生沖突。 不管怎么說,這個慣例可以分離javascrīpt與HTML。推薦使用。 四,事件機制 我大量使用的事件可能就是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[0]").submit(validate); }); function validate(){ //do some form validation } 五,同一函數實現set&get 代碼
$("#msg").html();
$("#msg").html("hello"); 上面兩行代碼,調用了同樣的函數。但結果卻差別很大。 第一行是返回指定元素的HTML值,第二行則是將hello這串字符設置到指定元素中。jquery的函數大部分有這樣的特性。 六,ajax 這是一個ajax橫行的時代。多少人,了不了解ajax的都跟著用上一把。呵。使用jquery實現ajax同樣簡單異常 代碼
$.get("search.do",{id:1},rend);
$("#msg").fadeIn("fast");
|