jquery簡單體驗
2024-09-06 12:43:47
供稿：網友
jquery簡單體驗
query是繼prototype之后又一個優秀的Javascrīpt框架。對prototype我使用不多，簡單了解過。但使用上jquery之后，馬上被她的優雅吸引住了。有人使用這樣的一比喻來比較prototype和jquery：prototype就像Java，而jquery就像ruby.實際上我比較喜歡java（少接觸Ruby 罷了）但是jquery的簡單的實用的確有相當大的吸引力啊！在項目里我把jquery作為自已唯一的框架類包。使用其間也有一點點心得，其實這些心得，在jquery的文檔上面也可能有講，不過還是記下來，以備忘罷。
一，找到你了！
還記得$()這個東西吧？prototype還是DWR都使用了這個函數代替document.getElementById()。沒錯，jquery也跟風了。為達到document.getElementById()的目的，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的清潔，還可以很輕松地綁定事件，甚至你可以不知道“事件”這個名詞。
