前言:
我最近在做一個項目,需要用到ajax,我以前做ajax項目,已經有很多年了,jquery還不成熟,需要自己編寫大量的Javascript代碼。
最近發現jquery很成熟了,我看了jquery官方的document,我想,如果沒有人翻譯過,我打算邊看文檔,順道邊翻譯。
如果有人發現已經有人翻譯過了,勞煩通知一下,我就不做重複勞動了。
這裡先提供入門章節內容。
--
jQuery: 基礎
這段主要教授你如何開始使用jQuery. 如果你還沒有一個測試頁面,請先從按照下面的代碼創建一個HTML頁面。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>
編輯Script標籤的src屬性,指向你的jquery.js屬性。例如,如果你的jquery.js和HTML文件在同一文件夾下:
<script src="jquery.js"></script>
頁面加載完成時運行代碼
很多Javascript程式設計師都要做的第一件事情,就是加這樣的一些代碼到他們的程序:
window.onload = function(){ alert("welcome"); }
這段代碼將會在頁面加載成功時被正確執行,但是,這段代碼的問題是Javascript代碼將會在所有的圖片信息被全部下載完成後執行(這裡包含了廣告欄)。這裡使用首先Window.onload的原因是HTML在你最初運行這段代碼的時候,HTML文檔並沒有完全加載。
To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:
jQuery有一個很簡單的聲明來檢查文檔,和判斷文檔是否已經準備完成,這裡稱之為 ready event:
$(document).ready(function(){
// Your code here
});
我們在ready event中添加一個超連結點擊的處理方法。
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
保存HTML文件,在瀏覽器中刷新此文件,點擊網頁中的超連結,在連接到指定頁面之前首先會彈出一個提示框。
在點擊和其他的很多事件中,你可以在這裡使用event.preventDefault()來阻止其進行默認行為。
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
完整示例
這裡提供一個完整的HTML文件的示例來演示之前我們講述的內容。注意這裡連接到了Google’s CDN 來加載jQuery的核心庫。你最好將它放在一個單獨文件中,並且在Head標籤中完成對它的加載。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</body>
</html>
增加和刪除css樣式
重要: 接下來的jQuery示例需要放在ready event內,這樣在文檔準備結束後立即執行。
我們另一種常常做的事情,便是增加(或者刪除)一個css樣式。
首先我們在<head>標籤內增加一些樣式:
<style>
a.test { font-weight: bold; }
</style>
然後在代碼內使用addClass方法
$("a").addClass("test");
所有超連結會被加粗。
要刪除此樣式,只需要使用 remove class方法。 (允許添加多個樣式到html)
$("a").removeClass("test");
Edit®
特效
jQuery提供了一組特效,使用這些特效可以讓你的網站脫穎而出,你只需要將上面的測試文件添加如下代碼就可以進行測試:
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
如果你點擊超連結,你所點擊的超級連結會被隱藏。
回調函數
回調函數是指父方法運行通過後傳遞參數並且進行調用的函數。回調函數的特殊之處在父函數可以在回調函數運行之前運行。另一個重要的點是要知道如何正確的傳遞迴調。這也是我常常忘記的正確語法。
無參數回調
你可以使用下面的代碼來設定回調參數。
$.get('myhtmlpage.html', myCallBack);
注意 第二個參數只包含回調函數的名字(不是字符串並且不包含括號對). Javascript的函數可以像參數一樣傳遞,並且在後面的代碼執行。
包含參數的回調
你可能會這樣問,"如果包含參數,你會怎麼做?"。
錯誤的方式
錯誤的調用方式(不會被執行)
$.get('myhtmlpage.html', myCallBack(param1, param2));
這種方式並不會被調用,因為它調用了
myCallBack(param1, param2)
它的執行結果會被作為第二個參數傳遞給$get()函數
正確的方式
上面的方式問題在於 myCallBack在作為函數傳遞之前先被進行了評估。Javascrip和的jQuery 將函數擴展為函數指針,例如IE的設定Timeout函數。
下面的方法,創建了一個匿名函數並且註冊了回調函數。注意這裡使用了function(){}匿名函數隻做了一件事情,使用兩個參數param1,param2調用myCallBack方法。
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
param1和param2是$get()方法獲取頁面完成後提供的參數。