JQuery框架介紹

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

   下載完成後先加載到文檔中然後我們來看個簡單的例子！
<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的使用:
:核心部分
:DOM操作
:css操作
:javascript處理
:動態效果
:event事件
:ajax支持
:插件程序

     一核心部分
$(expr)
說明該函數可以通過css選擇器Xpath或html代碼來匹配目標元素所有的jQuery操作都以此為基礎
參數expr字符串一個查詢表達式或一段html字符串
例子
未執行jQuery前
<p>one</p>
<div>
      <p>two</p>
</div>
    <p>three</p> 
    <a # id=test onClick=jq() >jQuery</a>

jQuery代碼及功能
function jq(){  
    alert($(div > pl());  
}
運行當點擊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 # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
    alert($(document)find(div > pl());
}
運行當點擊id為test的元素時彈出對話框文字為two即div標簽下p元素的內容
function jq(){
   $(documentbody)background(black);
}
運行當點擊id為test的元素時背景色變成黑色

$(elems)
說明限制jQuery作用於一組特定的DOM元素
參數 elem一組通過jQuery對象壓縮的DOM元素
例子
未執行jQuery前
<form id=form>
      <input type=text name=textfield>
      <input type=submit name=Submit value=提交>
</form>
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){ 
   $(formelements )hide(); 
}
運行當點擊id為test的元素時隱藏form表單中的所有元素

$(fn)
說明$(document)ready()的一個速記方式當文檔全部載入時執行函數可以有多個$(fn)當文檔載入時同時執行所有函數！
參數fn (Function):當文檔載入時執行的函數！
例子
$( function(){
    $(documentbody)background(black);
})
運行當文檔載入時背景變成黑色相當於onLoad

$(obj)
說明復制一個jQuery對象
參數obj (jQuery): 要復制的jQuery對象
例子
未執行jQuery前
<p>one</p>
<div>
   <p>two</p>
</div>
<p>three</p>
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
    var f = $(div); 
    alert($(f)find(pl()) 
}
運行當點擊id為test的元素時彈出對話框文字為two即div標簽下p元素的內容

each(fn)
說明將函數作用於所有匹配的對象上
參數fn (Function): 需要執行的函數
例子
未執行jQuery前
<img src=jpg/>
<img src=jpg/>
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
   $(img)each(function(){ 
        thissrc = jpg; });
}
運行當點擊id為test的元素時img標簽的src都變成了jpg

eq(pos)
說明減少匹配對象到一個單獨得dom元素
參數pos (Number): 期望限制的索引從 開始
例子
未執行jQuery前
<p>This is just a test</p>
<p>So is this</p>
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
    alert($(p)eq(l())
}
運行當點擊id為test的元素時alert對話框顯示So is this即第二個<p>標簽的內容

get() get(num)
說明獲取匹配元素get(num)返回匹配元素中的某一個元素
參數get (Number): 期望限制的索引從 開始
例子
未執行jQuery前
<p>This is just a test</p>
<p>So is this</p>
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
    alert($(p)get()innerHTML);
}
運行當點擊id為test的元素時alert對話框顯示So is this即第二個<p>標簽的內容
注意get和eq的區別eq返回的是jQuery對象get返回的是所匹配的dom對象所有取$(p)eq()對象的內容用jQuery方法html()而取$(p)get()的內容用innerHTML

index(obj)
說明返回對象索引
參數obj (Object): 要查找的對象
例子
未執行jQuery前
<div id=test></div>
<div id=test></div>
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
    alert($(div)index(documentgetElementById(test)));
    alert($(div)index(documentgetElementById(test)));
}
運行當點擊id為test的元素時兩次彈出alert對話框分別顯示

size()   Length
說明當前匹配對象的數量兩者等價
例子
未執行jQuery前
<img src=testjpg/>
<img src=testjpg/>
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
    alert($(img)length);
}
運行當點擊id為test的元素時彈出alert對話框顯示表示找到兩個匹配對象 

     二DOM操作
屬性
我們以<img id=a scr=jpg/>為例在原始的javascript裡面可以用var o=documentgetElementById(a)取的id為a的節點對象在用osrc來取得或修改該節點的scr屬性在jQuery 裡$(#a)將得到jQuery對象[ <img id=a scr=jpg/> ]然後可以用jQuery提供的很多方法來進行操作如$(#a)scr()將得到jpg$(#a)scr(jpg)將該對象src屬性改為jpg下面我們來講jQuery提供的眾多jQuery方法方便大家快速對DOM對象進行操作
herf()   herf(val)
說明對jQuery對象屬性herf的操作
例子
未執行jQuery前
<a  id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
   alert($(#test)href());
   $(#test)href(l);
}
運行先彈出對話框顯示id為test的連接url在將其url改為l當彈出對話框後會看到轉向到l
同理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 # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){  
       $(#test)after(<b>Hello</b>);  
}
執行後相當於
<a # id=test onClick=jq()>jQuery</a><b>Hello</b>

after(elem)  after(elems)  將指定對象elem或對象組elems插入到在匹配元素後
<p id=test>after</p><a # onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){  
     $(a)after($(#test));  
}
執行後相當於
<a # onClick=jq()>jQuery</a><p id=test>after</p>

append(html)在匹配元素內部且末尾插入指定html
<a # id=test onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){ 
     $(#test)append(<b>Hello</b>);  
}
執行後相當於
<a # 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 # onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){  
      $(a) appendTo ($(#test));  
}
執行後相當於
<p id=test>after<a # onClick=jq()>jQuery</a> </p>

clone() 復制一個jQuery對象
<p id=test>after</p><a # onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){  
     $(#test)clone()appendTo($(a));  
}
復制$(#test)然後插入到<a>後執行後相當於
<p id=test>after</p><a # onClick=jq()>jQuery</a><p id=test>after</p>

empty() 刪除匹配對象的所有子節點
<div id=test>
  <span>span</span>
  <p>after</p>
</div>
<a # onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){  
    $(#test)empty();  
}
執行後相當於
<div id=test></div><a # 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 # 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 # onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){  
      $(p)wrap( documentgetElementById(content) );
}
執行後相當於
<div id=content><p>Test Paragraph</p></div>

遍歷組合
add(expr)  在原對象的基礎上在附加符合指定表達式的jquery對象
<p>Hello</p><p><span>Hello Again</span></p>
<a # onClick=jq()>jQuery</a>
jQuery代碼及功能
function jq(){
     var f=$(p)add(span);    
     for(var i=;i < $(f)size();i++){
     alert($(f)eq(l());}
}
執行$(p)得到匹配<p>的對象有兩個add(span)是在(p)的基礎上加上匹配<span >的對象所有一共有個從上面的函數運行結果可以看到$(p)add(span)是個對象的集合分別是[<p> Hello</p>][<p><span>Hello Again</span></p>][<span>Hello Again</span>]

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

add(els)  在匹配對象的基礎上在附加指定的一組對象els是一個數組
<p>Hello</p><p><span>Hello Again</span></p>
jQuery代碼及功能
function jq(){
     var f=$(p)add([documentgetElementById(a) documentgetElementById(b)])
     for(var i=;i < $(f)size();i++){
             alert($(f)eq(l());}
}
注意els是一個數組這裡的[ ]不能漏掉

ancestors ()  一依次以匹配結點的父節點的內容為對象根節點除外（有點不好理解看看下面例子就明白了）
<div>
    <p>one</p>
    <span>
    <u>two</u>
    </span>
</div>
jQuery代碼及功能
function jq(){
     var f= $(u)ancestors();
     for(var i=;i < $(f)size();i++){
      alert($(f)eq(l());}
}
第一個對象是以<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(l());
}
$(#ch)children()得到對象[ <span>two</span> ]所l()的結果是two

children(expr)  返回匹配對象的子介點中符合表達式的節點
<div id=ch>   
      <span>two</span>
      <span id=sp>three</span>
</div>
jQuery代碼及功能
function jq(){
    alert($(#ch)children(#spl());
}
$(#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($(pntains(testl());
}
$(p)得到兩個對象而包含字符串test只有一個所有$(pntains(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(selectedl())
}
$(p)得到三個對象$(pntains(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(#al())
}
在$(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(l());
        alert($(p)next(selectedl());
}
$(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 # onclick=js()>jQuery</a>
jQuery代碼及功能
function js(){
     alert($(p)not(documentgetElementById(a)l());
     alert($(p)not(#al());
}
$(p)由兩個對象排除後的對象為[<p>one</p> ]

siblings ()  siblings (expr)  jquery匹配對象中其它兄弟級別的對象
<p>one</p>
<div>
  <p id=a>two</p>
</div>
<a # onclick=js()>jQuery</a>
jQuery代碼及功能
function js(){
       alert($(div)siblings()eq(l());
}
$(div)siblings()的結果實返回兩個對象[<p>one</p><a # onclick=js()>jQuery</a> ]
alert($(div)siblings(a)返回一個對象[<a # onclick=js()>jQuery</a> ]

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

attr (name)   獲取第一個匹配對象的屬性
<img src=testjpg/><a # onclick=js()>jQuery</a> 
jQuery代碼及功能
function js(){
     alert($(img)attr(src));
}
返回testjpg

attr (prop)   為第一個匹配對象的設置屬性prop為hash對象用於為某對象批量添加眾多屬性
<img/><a # onclick=js()>jQuery</a>
jQuery代碼及功能
function js(){
     $(img)attr({ src: testjpg alt: Test Image }); 
}
運行結果相當於<img src=testjpg alt=Test Image/>

attr (keyvalue)   為第一個匹配對象的設置屬性key為屬性名value為屬性值
<img/><a # onclick=js()>jQuery</a>
jQuery代碼及功能
function js(){
     $(img)attr(srctestjpg); 
}
運行結果相當於<img src=testjpg/>

removeAttr (name)   將第一個匹配對象的某個屬性移出
<img alt=test/><a # onclick=js()>jQuery</a>
jQuery代碼及功能
function js(){
     $(img) removeAttr(alt); 
}
運行結果相當於<img />

toggleClass (class)   將當前對象添加一個樣式不是當前對象則移出此樣式返回的是處理後的對象
<p>Hello</p><p class=selected>Hello Again</p><a # 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 >css</div>取它的background語法是 documentgetElementById(a)stylebackground而jQuery對css更方便的操作$(#a) background()$(#a)background(red)
$(#a)得到jQuery對象[ <div id=a … /div> ]
$(#a)background()將取出該對象的background樣式
$(#a)background(red)將該對象的background樣式設為redjQuery提供了以下方法來操作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 >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 >test</p>{ color: red background: blue }hash對象color為keyred為value

css(key value)  用於設置一個單獨得css樣式
$(#b)css(colorred);最終效果是<p id=b >test</p>

     四JavaScript處理

$browser()  判斷浏覽器類型返回boolen值
$(function(){
    if($browsermsie) {
        alert(這是一個IE浏覽器);}
    else if($browseropera) {
        alert(這是一個opera浏覽器);}
})
當頁面載入式判斷浏覽器類型可判斷的類型有msiemozillaoperasafari

$each(obj fn)  obj為對象或數組fn為在obj上依次執行的函數注意區分$()each()
$each( [] function(i){ alert( Item # + i + :  + this ); });
    分別將為參數傳入到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:  name: foo };
var options = { validate: true name: bar };
$extend(settings options);
執行後settings對象為{ validate: true limit:  name: bar }
可以用下面函數來測試
$(function(){
       var settings = { validate: false limit:  name: foo };
        var options = { validate: true name: bar };
        $extend(settings options);
        $each(settings  function(i){ alert( i + = + this ); });
})

$grep(arrayfn)  通過函數fn來過濾array將array中的元素依次傳給fnfn必須返回一個boolen如fn返回true將被過濾
$(function(){
        var arr= $grep( [] function(i){ return i > ; });
        $each(arr function(i){ alert(i); });
})
我們可以看待執行$grep後數組[]變成[]

rge(first second)  兩個參數都是數組排出第二個數組中與第一個相同的再將兩個數組合並
$(function(){ 
        var arr = rge( [] [] )
        $each(arr  function(i){ alert(i); });
})
可以看出arr的結果為[]

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

     五動態效果

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

hide()  隱藏匹配對象
<p id=a>Hello Again</p><a # onClick= (#a)hide()>jQuery</a>
當點擊連接時id為a的對象的display變為none

show() 顯示匹配對象

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

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

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

toggle()    toggle(speed) 如果當前匹配對象隱藏則顯示他們如果當前是顯示的就隱藏toggle(speed)其大小（長寬）和透明度都隨之逐漸變化
<img src=jpg />
<a # onClick=$(img)toggle(slow)>jQuery</a>

fadeIn(speeds)   fadeOut(speeds)  根據速度調整透明度來顯示或隱藏匹配對象注意有別於hide(speed)和show(speed)fadeIn和fadeOut都只調整透明度不調整大小
<img src=jpg /><a # onClick=$(img )fadeIn(slow)> jQuery </a>
點擊連接後可以看到圖片逐漸顯示

fadeIn(speed callback)  fadeOut(speed callback)   callback為函數先通過調整透明度來顯示或隱藏匹配對象當調整結束後執行callback函數
<img src=jpg/>
<a # onClick=$(img )fadeIn(slowfunction(){ alert(Animation Done); })> jQuery </a>
點擊連接後可以看到圖片逐漸顯示顯示完全後彈出對話框

fadeTo(speed opacity callback)  將匹配對象以speed速度調整倒透明度opacity然後執行函數callbackOpacity為最終顯示的透明度()
<img src=jpg/><br>
<a # onClick=$(img )fadeTo(slowfunction(){ alert(Animation Done); })> jQuery </a>
大家可以看一下自己看看效果如果不用jQuery編寫原始javascript腳本可能很多代碼！

slideDown(speeds)  將匹配對象的高度由以指定速率平滑的變化到正常！
<img src=jpg />
<a # onClick=$(img )slideDown(slow)>jQuery</a>

slideDown(speedscallback)  將匹配對象的高度由變化到正常！變化結束後執行函數callback

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

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


     六事件處理

 hover(Function Function)    當鼠標move over時觸發第一個function當鼠標move out時觸發第二個function
樣式<style>red{color:#FF}</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:#FF}</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(clickfunction() { 
                                       $(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)

以上事件的擴展再擴展為類
舉例click(fn) 擴展 click()  unclick()  oneclick(fn)  unclick(fn)
click(fn)增加一個點擊時觸發某函數的事件
click()可以在其他事件中執行匹配對象的click事件
unclick ()不執行匹配對象的click事件
oneclick(fn)只增加可以執行一次的click事件
unclick (fn)增加一個點擊時不觸發某函數的事件
上面列舉的用於browersformkeyboardmouseUI的事件都可以按以上方法擴展

     七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: 
          success:function(msg){ 
                         $(div#al(msg);
                } 
    });
將返回的內容作為id為a的div內容
$ajax({ url: ajaxaspx
              type:get           
             dataType:html
             data: name=John&location=Boston
             success:function(msg){ 
                                 $(#al(msg);
                              } 
         });

用get方式向ajaxaspx頁面傳參數並將返回內容負給id為a的對象

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

其它簡化方式

$get(url params callback)  用get方式向遠程頁面傳遞參數請求完成後處理函數除了url外其它參數任意選擇！
$get(   function(data){ $(#al(data)  })
$get(   ajaxasp 
            { name: young age:  }
            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( function() { alert(load is done); } );
仰天一笑 徐羽 向頁面發出請求將返回結果裝入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插件如thickboxiFXjQuerygoogleMap等簡單的引用這些源文件就可以方便的使用這些插件這裡我簡單的介紹一些網址供大家參考這些網站頭提供了大量的demo並且使用及其簡單及時E文不好也能快速掌握！


    至此jQuery已經介紹完畢並合並整理提供給大家 下載 更多詳細的使用請大家參考官方網站下面我再推薦一些jQuery的學習網站方便大家更好的掌握這項工具！

From:http://tw.wingwit.com/Article/program/Java/hx/201311/26563.html