翻譯整理：Young.J
　　官方網站：http://jquery.com

　　jQuery是一款同prototype一樣優秀js開發庫類，特別是對css和XPath的支持，使我們寫js變得更加方便！如果你不是個js高手又想寫出優 秀的js效果，jQuery可以幫你達到目的！
　　下載地址：

　　Starterkit （http://jquery.bassistance.de/jquery-starterkit.zip）
　　jQuery Downloads （http://jquery.com/src/）

　　下載完成后先加載到文檔中，然后我們來看個簡單的例子！

　　一：核心部分
　　$(expr)
　　說明：該函數可以通過css選擇器，Xpath或html代碼來匹配目標元素，所有的jQuery操作都以此為基礎
　　參數：expr：字符串，一個查詢表達式或一段html字符串
　　例子：
　　未執行jQuery前：

     

css(prop)  prop是一個hash對象，用于設置大量的css樣式
$("#b").css({ color: "red", background: "blue"});
最終效果是<p id="b" style="background:blue; color:red">test</p>,{color: "red", background: "blue"}，hash對象，color為key，"red"為value，

css(key,value)  用于設置一個單獨得css樣式
$("#b").css("color","red");最終效果是<p id="b" style="color:red">test</p>

四：JavaScript處理
$.browser()  判斷瀏覽器類型，返回boolen值

$(function(){
    if($.browser.msie) {
        alert("這是一個IE瀏覽器");}
    else if($.browser.opera) {
        alert("這是一個opera瀏覽器");}
})

$.each(obj, fn)  obj為對象或數組，fn為在obj上依次執行的函數，注意區分$().each()

$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });    分別將0，1，2為參數，傳入到function(i)中

$.each({ name: "John", lang: "JS" },  function(i){ alert( "Name: " + i + ", Value: " + this );    { name: "John", lang: "JS"}為一個hash對象，依次將hash中每組對象傳入到函數中

$.extend(obj, prop)  用第二個對象擴展第一個對象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);執行后settings對象為{validate: true, limit: 5, name: "bar"}
可以用下面函數來測試

$(function(){
       var settings = { validate: false, limit: 5, name: "foo" };
        var options = { validate: true, name: "bar" };
        $.extend(settings, options);
        $.each(settings,  function(i){ alert( i + "=" + this ); });
})
$.grep(array,fn)  通過函數fn來過濾array，將array中的元素依次傳給fn，fn必須返回一個boolen，如fn返回true，將被過濾

$(function(){
        var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
        $.each(arr, function(i){ alert(i); });
})我們可以看待執行$.grep后數組[0,1,2,3,4]變成[0，1]

$.merge(first, second)  兩個參數都是數組，排出第二個數組中與第一個相同的，再將兩個數組合并

$(function(){ 
        var arr = $.merge( [0,1,2], [2,3,4] )
        $.each(arr,  function(i){ alert(i); });
})可以看出arr的結果為[0,1,2,3,4]

$.trim(str)  移出字符串兩端的空格
    $.trim("   hello, how are you?   ")的結果是"hello, how are you?"

五：動態效果
在將這部分之前我們先看個例子，相信做網頁的朋友都遇到n級菜單的情景，但點擊某菜單按鈕時，如果它的子菜單是顯示的，則隱藏子菜單，如果子菜單隱藏，則顯示出來，傳統的Javascript做法是先用getElementById取出子菜單所在容器的id，在判斷該容器的style.display是否等于none，如果等于則設為block,如果不等于這設為none，如果在將效果設置復雜一點，當點擊按鈕時，不是忽然隱藏和顯示子菜單，而是高度平滑的轉變，這時就要通過setTimeout來設置子菜單的height了，再復雜一點透明度也平滑的消失和顯現，這時顯現下來需要編寫很多代碼，如果js基礎不好的朋友可能只能從別人寫好的代碼拿過來修改了！jQuery實現上面效果只需要1句話就行，$("#a").toggle("slow"),,學完jQuery后還需要抄襲修改別人的代碼嗎？下面我們逐個介紹jQuery用于效果處理的方法。

hide()  隱藏匹配對象

<p id="a">Hello Again</p><a href="#" onClick=’ ("#a").hide()’>jQuery</a>

show() 顯示匹配對象

hide(speed)  以一定的速度隱藏匹配對象，其大小（長寬）和透明度都逐漸變化到0，speed有3級("slow","normal",  "fast")，也可以是自定義的速度。

show(speed)  以一定的速度顯示匹配對象，其大小（長寬）和透明度都由0逐漸變化到正常

hide(speed, callback)  show(speed, callback) 當顯示和隱藏變化結束后執行函數callback

toggle()    toggle(speed) 如果當前匹配對象隱藏，則顯示他們，如果當前是顯示的，就隱藏，toggle(speed),其大小（長寬）和透明度都隨之逐漸變化。

<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
fadeIn(speeds)   fadeOut(speeds)  根據速度調整透明度來顯示或隱藏匹配對象，注意有別于hide(speed)和show(speed)，fadeIn和fadeOut都只調整透明度，不調整大小

<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>點擊連接后可以看到圖片逐漸顯示。

fadeIn(speed, callback)  fadeOut(speed, callback)   callback為函數，先通過調整透明度來顯示或隱藏匹配對象，當調整結束后執行callback函數

<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>點擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對話框

fadeTo(speed, opacity, callback)  將匹配對象以speed速度調整倒透明度opacity，然后執行函數callback。Opacity為最終顯示的透明度(0-1).

<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>大家可以看一下自己看看效果，如果不用jQuery，編寫原始Javascript腳本可能很多代碼！

slideDown(speeds)  將匹配對象的高度由0以指定速率平滑的變化到正常！

<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
slideDown(speeds,callback)  將匹配對象的高度由0變化到正常！變化結束后執行函數callback

slideUp("slow")  slideUp(speed, callback) 匹配對象的高度由正常變化到0

slideToggle("slow") 如果匹配對象的高度正常則逐漸變化到0，若為0，則逐漸變化到正常

六：事件處理
  hover(Function, Function)    當鼠標move over時觸發第一個function，當鼠標move out時觸發第二個function
樣式：<style>.red{color:#FF0000}</style>
Html代碼：<div id="a">sdf</div>
jQuery代碼及效果

$(function(){
  $("#a").hover(function(){$(this).addClass("red");},
                            function(){ $(this).removeClass("red"); 
                          });
})

toggle(Function, Function)    當匹配元素第一次被點擊時觸發第一個函數，當第二次被點擊時觸發第二個函數
樣式：<style>.red{color:#FF0000}</style>
Html代碼：<div id="a">sdf</div>
jQuery代碼及效果

$(function(){
  $("#a"). toggle (function(){$(this).addClass("red");},
                              function(){ $(this).removeClass("red"); 
                            });
})最終效果是當鼠標點擊id為a的層上時圖層增加一個red樣式，離開層時移出red樣式

bind(type, fn)   用戶將一個事件和觸發事件的方式綁定到匹配對象上。
trigger(type)   用戶觸發type形式的事件。$("p").trigger("click")
還有：unbind()   unbind(type)    unbind(type, fn)

Dynamic event(Function)    綁定和取消綁定提供函數的簡捷方式
例：

$("#a").bind("click",function() { 
                                       $(this).addClass("red");
})也可以這樣寫：

$("#a").click(function() { 
                        $(this).addClass("red");
});

最終效果是當鼠標點擊id為a的層上時圖層增加一個red樣式，

jQuery提供的函數
用于browers事件
error(fn)    load(fn)     unload(fn)    resize(fn)    scroll(fn)

用于form事件
change(fn)    select(fn)    submit(fn)

用于keyboard事件
keydown(fn)    keypress(fn)    keyup(fn)

用于mouse事件
click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn)  mouseover(fn)     mouseup(fn)

用于UI事件
blur(fn)    focus(fn)

以上事件的擴展再擴展為5類
舉例，click(fn)擴展 click()  unclick()  oneclick(fn)  unclick(fn)
click(fn)：增加一個點擊時觸發某函數的事件
click()：可以在其他事件中執行匹配對象的click事件。
unclick ()：不執行匹配對象的click事件。
oneclick(fn)：只增加可以執行一次的click事件。
unclick (fn)：增加一個點擊時不觸發某函數的事件。
上面列舉的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法擴展。

七：Ajax支持 
 通用方式：
$.ajax(prop)    通過一個ajax請求，回去遠程數據，prop是一個hash表，它可以傳遞的key/value有以下幾種。
         (String)type：數據傳遞方式(get或post)。
         ((String)url：數據請求頁面的url
         ((String)data：傳遞數據的參數字符串，只適合post方式
         ((String)dataType：期待數據返回的數據格式(例如"xml","html","script",或"json")
         ((Boolean)ifModified：當最后一次請求的相應有變化是才成功返回，默認值是false
         ((Number)timeout:設置時間延遲請求的時間。可以參考$.ajaxTimeout
         ((Boolean)global：是否為當前請求觸發ajax全局事件，默認為true
         ((Function)error：當請求失敗時觸發的函數。
         ((Function)success：當請求成功時觸發函數
         ((Function)complete：當請求完成后出發函數
jQuery代碼及說明

$.ajax({url: "ajax.htm",
          success:function(msg){ 
                         $(div"#a").html(msg);
                } 
    });

$.ajax({ url: "ajax.ASPx",
              type:"get",           
             dataType:"html",
             data: "name=John&location=Boston",
             success:function(msg){ 
                                 $("#a").html(msg);
                              } 
         });

用get方式向ajax.ASPx頁面傳參數，并將返回內容負給id為a的對象。

$.ajaxTimeout(time) 設置請求結束時間
   $.ajaxTimeout( 5000 )

其它簡化方式：

$.get(url, params, callback)  用get方式向遠程頁面傳遞參數，請求完成后處理函數，除了url外，其它參數任意選擇！

$.get( "ajax.htm" , function(data){ $("#a").html(data)  })

$.get(   "ajax.ASP", 
            { name: "young", age: "25" },
            function(data){ alert("Data Loaded: " + data); }
        ) $.getIfModified(url, params, callback)  用get方式向遠程頁面傳遞參數，從最后一次請求后如果數據有變化才作出響應，執行函數callback
$.getJSON(url, params, callback)  用get方式向遠程json對象傳遞參數，請求完成后處理函數callback。
$.getScript(url, callback)  用get方式載入并運行一個遠程Javascript文件。請求完成后處理函數callback。
$.post(url, params, callback)  用post方式向遠程頁面傳遞參數，請求完成后處理函數callback
load(url, params, callback)  載入一個遠程文件并載入頁面DOM中，并執行函數callback

$("#a").load("ajax.htm", function() { alert("load is done"); } );仰天一笑 徐羽 向ajax.htm頁面發出請求，將返回結果裝入id為a的內容中，然后再執行函數callback。
loadIfModified(url, params, callback)  用get方式向遠程頁面傳遞參數，從最后一次請求后如果數據有變化才作出響應，將返回結果載入頁面DOM中，并執行函數callback
ajaxStart(callback) 當ajax請求發生錯誤是時執行函數callback
ajaxComplete(callback)  當ajax請求完成時執行函數callback
ajaxError(callback)  當ajax請求發生錯誤時執行函數callback
ajaxStop(callback)  當ajax請求停止時執行函數callback
ajaxSuccess(callback)  當ajax請求成功時執行函數callback

八：jQuery插件
  隨著jQuery的廣泛使用，已經出現了大量jQuery插件，如thickbox，iFX，jQuery-googleMap等，簡單的引用這些源文件就可以方便的使用這些插件。這里我簡單的介紹一些網址供大家參考，這些網站頭提供了大量的demo，并且使用及其簡單，及時E文不好，也能快速掌握！
    http://jquery.com/plugins     官方推薦
    http://interface.eyecon.ro/demos    效果超級棒，使用更簡單，一定有你喜歡的！
    http://www.dyve.NET/jquery/
    http://bassistance.de/jquery-plugins

   還有其它很多插件，大家可以google以下，如果大家發現好的了，可以留言共享以下！

    ——————————————————————————————————————————————

    至此jQuery已經介紹完畢，并合并整理提供給大家 下載 ，更多詳細的使用請大家參考官方網站，下面我再推薦一些jQuery的學習網站方便大家更好的掌握這項工具！
    http://keel.sike.googlepages.com/jQuery_getting_started.html     中文入門介紹，Keel翻譯
    http://jquery.com/api      jquery提供全部基本方法的介紹及demo，方便大家查詢！

it知識庫：（收藏）JQuery使用手冊，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。