這是一份基礎的指南,幫助你開始使用jQuery.如果你仍沒有一個測試頁,那么先用下面的代碼創建一個HTML文件吧:
<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
編輯script的src屬性,讓其指向你的jquery.js.例如,如果jquery.js在HTML文件相同的文件夾內,你可以這樣寫:
<script type="text/javascript" src="jquery.js"></script>
你可以從
Download jQuery 下載jQuery.
大多數的JavaScript程序員所做的第一件事就是在他們的程序中加上類似于這樣的代碼:
window.onload = function(){ ... }
上面的這段代碼,是想在頁面加載的時候執行一些腳本.問題是,這段JavaScript在所有的圖片加載完之前是不會執行的.在開始的地方使用window.onload的原因是在第一次運行你的代碼的時候,document還沒有加載結束.
為解決這個問題,jQuery提供了一種簡單的語句供你使用:
$(document).ready(function(){
// Your code here
});
上面的寫法將檢測document,直到它可以被操作.將上面的代碼加到測試頁面中,剩余的例子將放置在這個回調函數中,所以它們將在document準備好工作時被執行.
首先我們將嘗試一些link的click事件.在ready function中, 添加下面的代碼:
$("a").click(function() {
alert("Click the link.");
});
保存HTML文件,并在瀏覽器中重新加載.在鏈接上單擊,將彈出個對話框,之后頁面會跳轉到http://jquery.com/".
對于單擊或其他的一些事件,你可以在這阻止它的默認的行為,下面的指向jquery.com的鏈接,從事件句柄處返回一個false,將不會進行跳轉.
另外一個普通的任務就是給原素添加或刪除classes,如下:
$("a").addClass("test");
如果你在Header里添加了CSS信息,如下:
<style type="text/css">a.test { font-weight: bold; }
</style>
之后調用上面的addClass,所有的a標簽元素現在都將是粗體的了.刪除class,你可以使用removeClass.
在jQuery中,提供了一些非常容易使用的特效.將下面的代碼添加到測試頁中,改變單擊的響應:
$("a").click(function(){
$(this).hide("slow");
return false;
});
現在,如果你點擊任何的鏈接,它將慢慢的消失.
jQuery使用一個非常有趣的方式來使它的代碼短小而簡單.對于那些熟悉的OO編程,這種方式顯得更加的直接.
簡單的說,jQuery中的每個方法都返回請求對象的本身,允許你把它的各個方法連接到一起,如下例:
$("a").addClass("test").show().html("foo");
上面的代碼給a標簽添加了一個class, 并將其在頁面顯示的內容改成foo.
他們每一個方法(addClass, show, html),都返回一個jQuery對象,允許你將方法應用于當前設置的元素上.
你可以采取更進一步的操作,添加或刪除選擇的元素,如下:
$("a")
.filter(".clickme")
.click(function(){
alert("You are now leaving the site.");
})
.end()
.filter(".hideme")
.click(function(){
$(this).hide();
return false;
})
.end();
在測試頁添加上如下的代碼:
<a href="http://google.com/" class="clickme">I give a message when you leave</a>
<a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
<a href="http://microsoft.com/">I'm a normal link</a>
修改jQuery選擇的方法,使用end()來結束方法:
* add(),
* children(),
* eq(),
* filter(),
* find(),
* gt(),
* lt(),
* next(),
* not(),
* parent(),
* parents(),
* siblings().
可以查看Traversing API documentation中關于這些方法的詳細說明.