jQuery使用說明

jQuery是一款同prototype同樣優秀js開發庫類，特別是對css和XPath的支持，使咱們寫js變得更加方便！若是你不是個js高手又想寫出優 秀的js效果，jQuery能夠幫你達到目的！
下載地址：Starterkit （http://jquery.bassistance.de/jquery-starterkit.zip）
jQuery Downloads （http://jquery.com/src/）

下載完成後先加載到文檔中，而後咱們來看個簡單的例子！

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
<script>

上邊的效果是點擊文檔中全部a標籤時將彈出對話框，$("a") 是一個jQuery選擇器，$自己表示一個jQuery類，全部$()是構造一個jQuery對象，click()是這個對象的方法，同理$(document)也是一個jQuery對象，ready(fn)是$(document)的方法，表示當document所有下載完畢時執行函數。
在進行下面內容以前我還要說明一點$("p")和$("#p")的區別,$("p")表示取全部p標籤(<p></p>)的元素,$("#p")表示取id爲"p"(<span id="p"></span>)的元素.

我將從如下幾個內容來說解jQuery的使用:
1:核心部分
2:DOM操做
3:css操做
4:javascript處理
5:動態效果
6:event事件
7:ajax支持
8:插件程序

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

<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>

jQuery代碼及功能：

function jq(){
alert($("div > p").html());
}

運行：當點擊id爲test的元素時，彈出對話框文字爲two，即div標籤下p元素的內容

function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}

運行：當點擊id爲test的元素時，向body中添加「<div><p>Hello</p></div>」

$(elem)
說明：限制jQuery做用於一個特定的dom元素，這個函數也接受xml文檔和windows對象
參數： elem：經過jQuery對象壓縮的DOM元素
例子：
未執行jQuery前：

<p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
alert($(document).find("div > p").html());
}

運行：當點擊id爲test的元素時，彈出對話框文字爲two，即div標籤下p元素的內容

function jq(){
$(document.body).background("black");
}

運行：當點擊id爲test的元素時，背景色變成黑色

$(elems)
說明：限制jQuery做用於一組特定的DOM元素
參數： elem：一組經過jQuery對象壓縮的DOM元素
例子：
未執行jQuery前：

<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$(form1.elements ).hide();
}

運行：當點擊id爲test的元素時，隱藏form1表單中的全部元素。

$(fn)
說明：$(document).ready()的一個速記方式，當文檔所有載入時執行函數。能夠有多個$(fn)當文檔載入時，同時執行全部函數！
參數：fn (Function):當文檔載入時執行的函數！
例子：

$( function(){
$(document.body).background("black");
})

運行：當文檔載入時背景變成黑色，至關於onLoad。

$(obj)
說明：複製一個jQuery對象，
參數：obj (jQuery): 要複製的jQuery對象
例子：
未執行jQuery前：

<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
var f = $("div");
alert($(f).find("p").html())
}

運行：當點擊id爲test的元素時，彈出對話框文字爲two，即div標籤下p元素的內容。

each(fn)
說明：將函數做用於全部匹配的對象上
參數：fn (Function): 須要執行的函數
例子：
未執行jQuery前：

<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}

運行：當點擊id爲test的元素時，img標籤的src都變成了2.jpg。

eq(pos)
說明：減小匹配對象到一個單獨得dom元素
參數：pos (Number): 指望限制的索引，從0 開始
例子：
未執行jQuery前：

<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
alert($("p").eq(1).html())
}

運行：當點擊id爲test的元素時，alert對話框顯示：So is this，即第二個<p>標籤的內容

get() get(num)
說明：獲取匹配元素，get(num)返回匹配元素中的某一個元素
參數：get (Number): 指望限制的索引，從0 開始
例子：
未執行jQuery前：

<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
alert($("p").get(1).innerHTML);
}

運行：當點擊id爲test的元素時，alert對話框顯示：So is this，即第二個<p>標籤的內容
注意get和eq的區別，eq返回的是jQuery對象，get返回的是所匹配的dom對象，全部取$("p").eq(1)對象的內容用jQuery方法html()，而取$("p").get(1)的內容用innerHTML

index(obj)
說明：返回對象索引
參數：obj (Object): 要查找的對象
例子：
未執行jQuery前：

<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}

運行：當點擊id爲test的元素時，兩次彈出alert對話框分別顯示0，1

size() Length
說明：當前匹配對象的數量，二者等價
例子：
未執行jQuery前：

<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
alert($("img").length);
}

運行：當點擊id爲test的元素時，彈出alert對話框顯示2，表示找到兩個匹配對象


二：DOM操做
屬性
咱們以<img id="a" scr="5.jpg"/>爲例，在原始的javascript裏面能夠用var o=document.getElementById('a')取的id爲a的節點對象，在用o.src來取得或修改該節點的scr屬性，在jQuery裏$("#a")將獲得jQuery對象[ <img id="a" scr="5.jpg"/> ]，而後能夠用jQuery提供的不少方法來進行操做，如$("#a").scr()將獲得5.jpg,$("#a").scr("1.jpg")將該對象src屬性改成1,jpg。下面咱們來說jQuery提供的衆多jQuery方法，方便你們快速對DOM對象進行操做
herf() herf(val)
說明：對jQuery對象屬性herf的操做。
例子：
未執行jQuery前

<a href="1.htm" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
alert($("#test").href());
$("#test").href("2.html");
}

運行：先彈出對話框顯示id爲test的鏈接url，在將其url改成2.html，當彈出對話框後會看到轉向到2.html
同理，jQuery還提供相似的其餘方法，你們能夠分別試驗一下：
herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)
src() src (val) title() title (val) val() val(val)

操做
after(html) 在匹配元素後插入一段html

<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$("#test").after("<b>Hello</b>");
}

執行後至關於：

<a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>

after(elem) after(elems) 將指定對象elem或對象組elems插入到在匹配元素後

<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>

jQuery代碼及功能

function jq(){
$("a").after($("#test"));
}

執行後至關於

<a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

append(html)在匹配元素內部，且末尾插入指定html

<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$("#test").append("<b>Hello</b>");
}

執行後至關於

<a href="#" onClick="jq()">jQuery<b>Hello</b></a>

同理還有append(elem) append(elems) before(html) before(elem) before(elems)請執行參照append和after的方來測試、理解！

appendTo(expr) 與append(elem)相反

<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>

jQuery代碼及功能

function jq(){
$("a"). appendTo ($("#test"));
}

執行後至關於

<p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>

clone() 複製一個jQuery對象

<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$("#test").clone().appendTo($("a"));
}

複製$("#test")而後插入到<a>後,執行後至關於

<p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

empty() 刪除匹配對象的全部子節點

<div id="test">
<span>span</span>
<p>after</p>
</div>
<a href="#" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$("#test").empty();
}

執行後至關於

<div id="test"></div><a href="#" onClick="jq()">jQuery</a>

insertAfter(expr) insertBefore(expr)
按照官方的解釋和個人幾個簡單測試insertAfter(expr)至關於before(elem),insertBefore(expr)至關於after (elem)

prepend (html) prepend (elem) prepend (elems) 在匹配元素的內部且開始出插入
經過下面例子區分append(elem) appendTo(expr) prepend (elem)

<p id="a">p</p>
<div>div</div>

執行$ ("#a").append($("div")) 後至關於

<p id="a">
P
<div>div</div>
</p>

執行 $("#a").appendTo($("div")) 後 至關於

<div>
div
<p id="a">p</p>
</div>

執行 $("#a").prepend ($("div")) 後 至關於

<p id="a">
<div>div</div>
P
</p>

remove() 刪除匹配對象
注意區分empty()，empty()移出匹配對象的子節點，remove()，移出匹配對象

wrap(htm) 將匹配對象包含在給出的html代碼內

<p>Test Paragraph.</p> <a href="#" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$("p").wrap("<div class='wrap'></div>");
}

執行後至關於

<div class='wrap'><p>Test Paragraph.</p></div>

wrap(elem) 將匹配對象包含在給出的對象內

<p>Test Paragraph.</p><div id="content"></div>
<a href="#" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
$("p").wrap( document.getElementById('content') );
}

執行後至關於

<div id="content"><p>Test Paragraph.</p></div>

遍歷、組合
add(expr) 在原對象的基礎上在附加符合指定表達式的jquery對象

<p>Hello</p><p><span>Hello Again</span></p>
<a href="#" onClick="jq()">jQuery</a>

jQuery代碼及功能：

function jq(){
var f=$("p").add("span");
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}

執行$("p")獲得匹配<p>的對象，有兩個，add("span")是在("p")的基礎上加上匹配<span >的對象，全部一共有3個，從上面的函數運行結果能夠看到$("p").add("span")是3個對象的集合，分別是[<p>Hello</p>]，[<p><span>Hello Again</span></p>]，[<span>Hello Again</span>]。

add(el) 在匹配對象的基礎上在附加指定的dom元素。
$("p").add(document.getElementById("a"));

add(els) 在匹配對象的基礎上在附加指定的一組對象，els是一個數組。

<p>Hello</p><p><span>Hello Again</span></p>

jQuery代碼及功能：

function jq(){
var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}

注意els是一個數組，這裏的[ ]不能漏掉。

ancestors () 一依次以匹配結點的父節點的內容爲對象,根節點除外（有點很差理解，看看下面例子就明白了）

<div>
<p>one</p>
<span>
<u>two</u>
</span>
</div>

jQuery代碼及功能：

function jq(){
var f= $("u").ancestors();
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}

第一個對象是以<u>的父節點的內容爲對象，[ <u>two</u> ]
第一個對象是以<u>的父節點的父節點（div）的內容爲對象，[<p>one</p><span><u>two</u></span> ]
通常一個文檔還有<body>和<html>，依次類推下去。

ancestors (expr) 在ancestors（）的基礎上之取符合表達式的對象
如上各例子講var f改成var f= $("u").ancestors(「div」),則只返回一個對象：
[ <p>one</p><span><u>two</u></span> ]

children() 返回匹配對象的子介點

<p>one</p>
<div id="ch">
<span>two</span>
</div>

jQuery代碼及功能：

function jq(){
alert($("#ch").children().html());
}

$("#ch").children()獲得對象[ <span>two</span> ].因此.html()的結果是」two」

children(expr) 返回匹配對象的子介點中符合表達式的節點

<div id="ch">
<span>two</span>
<span id="sp">three</span>
</div>

jQuery代碼及功能

function jq(){
alert($("#ch").children(「#sp」).html());
}

$("#ch").children()獲得對象[<span>two</span><span id="sp">three</span> ].
$("#ch").children(「#sp」)過濾獲得[<span id="sp">three</span> ]

parent () parent (expr)取匹配對象父節點的。參照children幫助理解

contains(str) 返回匹配對象中包含字符串str的對象

<p>This is just a test.</p><p>So is this</p>

jQuery代碼及功能：

function jq(){
alert($("p").contains("test").html());
}

$("p")獲得兩個對象，而包含字符串」test」只有一個。全部$("p").contains("test")返回 [ <p>This is just a test.</p> ]

end() 結束操做,返回到匹配元素清單上操做前的狀態.

filter(expr) filter(exprs) 過濾現實匹配符合表達式的對象 exprs爲數組，注意添加「[ ]」

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery代碼及功能：

function jq(){
alert($("p").filter(".selected").html())
}

$("p")獲得三個對象，$("p").contains("test")只返回class爲selected的對象。

find(expr) 在匹配的對象中繼續查找符合表達式的對象

<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

Query代碼及功能：

function jq(){
alert($("p").find("#a").html())
}

在$("p")對象中查找id爲a的對象。

is(expr) 判斷對象是否符合表達式,返回boolen值

<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

Query代碼及功能：

function jq(){
alert($("#a").is("p"));
}

在$("#a ")是否符合jquery表達式。
你們能夠用$("#a").is("div"); ("#a").is("#a")多來測試一下

next() next(expr) 返回匹配對象剩餘的兄弟節點

<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

jQuery代碼及功能

function jq(){
alert($("p").next().html());
alert($("p").next(".selected").html());
}

$("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]兩個對象
$("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一個對象

prev () prev (expr) 參照next理解

not(el) not(expr) 從jQuery對象中移出匹配的對象，el爲dom元素，expr爲jQuery表達式。

<p>one</p><p id="a">two</p>
<a href="#" onclick="js()">jQuery</a>

jQuery代碼及功能：

function js(){
alert($("p").not(document.getElementById("a")).html());
alert($("p").not(「#a」).html());
}

$("p")由兩個對象，排除後的對象爲[<p>one</p> ]

siblings () siblings (expr) jquery匹配對象中其它兄弟級別的對象

<p>one</p>
<div>
<p id="a">two</p>
</div>
<a href="#" onclick="js()">jQuery</a>

jQuery代碼及功能：

function js(){
alert($("div").siblings().eq(1).html());
}

$("div").siblings()的結果實返回兩個對象[<p>one</p>，<a href="#" ]
alert($("div").siblings(「a」)返回一個對象[<a href="#" ]

其餘
addClass(class) 爲匹配對象添加一個class樣式
removeClass (class) 將第一個匹配對象的某個class樣式移出

attr (name) 獲取第一個匹配對象的屬性

<img src="test.jpg"/><a href="#" onclick="js()">jQuery</a>

jQuery代碼及功能：

function js(){
alert($("img").attr("src"));
}

返回test.jpg

attr (prop) 爲第一個匹配對象的設置屬性，prop爲hash對象，用於爲某對象批量添加衆多屬性

<img/><a href="#" onclick="js()">jQuery</a>

jQuery代碼及功能：

function js(){
$("img").attr({ src: "test.jpg", alt: "Test Image" });
}

運行結果至關於<img src="test.jpg" alt="Test Image"/>

attr (key,value) 爲第一個匹配對象的設置屬性，key爲屬性名，value爲屬性值

<img/><a href="#" onclick="js()">jQuery</a>

jQuery代碼及功能

function js(){
$("img").attr(「src」,」test.jpg」);
}

運行結果至關於<img src="test.jpg"/>

removeAttr (name) 將第一個匹配對象的某個屬性移出

<img alt="test"/><a href="#" onclick="js()">jQuery</a>

jQuery代碼及功能：

function js(){
$("img"). removeAttr("alt");
}

運行結果至關於<img />

toggleClass (class) 將當前對象添加一個樣式，不是當前對象則移出此樣式，返回的是處理後的對象

<p>Hello</p><p class="selected">Hello Again</p><a href="#" onclick="js()">jQuery</a>

$("p")的結果是返回對象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]
$("p").toggleClass("selected")的結果是實返回對象 [ <p class="selected">Hello</p>, <p>Hello Again</p> ]

三：CSS操做

傳統javascript對css的操做至關繁瑣，好比<div id="a" style="background:blue">css</div>取它的background語法是 document.getElementById("a").style.background，而jQuery對css更方便的操做，$("#a").background()，$("#a").background(「red」)
$("#a")獲得jQuery對象[ <div id="a" … /div> ]
$("#a").background()將取出該對象的background樣式。
$("#a").background(「red」)將該對象的background樣式設爲red jQuery提供瞭如下方法，來操做css
background () background (val) color() color(val) css(name) css(prop)
css(key, value) float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)

這裏須要講解一下css(name) css(prop) css(key, value)，其餘的看名字都知道什麼做用了！

<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>

css(name) 獲取樣式名爲name的樣式
$("#a").css("color") 將獲得樣式中color值red，("#a").css("background ")將獲得blue

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瀏覽器");}
})

當頁面載入式判斷瀏覽器類型，可判斷的類型有msie、mozilla、opera、safari

$.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>

當點擊鏈接時,id爲a的對象的display變爲none。

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");
});
})

最終效果是當鼠標移到id爲a的層上時圖層增長一個red樣式，離開層時移出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.htm返回的內容做爲id爲a的div內容

$.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