jQuery是如何工作的
我最近在做一個項目，需要用到ajax，我以前做ajax項目，已經有很多年了，jQuery還不成熟，需要自己編寫大量的Javascript代碼。
最近發現jQuery很成熟了，我看了jQuery官方的document，這里先提供入門章節內容。
專題：jQuery從入門到精通
對jQuery的簡要介紹和一些需要了解的如何使用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 lang="en">
- <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");
特效
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()方法獲取頁面完成后提供的參數。
原文：http://www.cnblogs.com/daitou0322/archive/2011/08/07/2130138.html
【編輯推薦】
