學習jQuery必須知道的幾種經常使用方法

jQuery中爲咱們提供了不少有用的方法和屬性，文章總結了一些經常使用的函數和方法。我的認爲在開發中會比較經常使用的，在實際的開發中咱們可能會用到其餘的方法和屬性，文中只是我的認爲新手初學jQuery時，必須掌握的一些方法。

jQuery事件處理

ready(fn)

代碼：

$(document).ready( function(){
     // Your code here...
})；

做用：它能夠極大地提升web應用程序的響應速度。經過使用這個方法，能夠在DOM載入就緒可以讀取並操縱時當即調用你所綁定的函數，而99.99%的JavaScript函數都須要在那一刻執行。

bind(type,[data],fn)

代碼：

$( "p").bind( "click", function(){
    alert( $( this).text() );
});

做用：爲每個匹配元素的特定事件（像click）綁定一個事件處理器函數。起到事件監聽的做用。

toggle(fn,fn)

代碼：

$( "td").toggle(
     function () {
        $( this).addClass( "selected");
    },
     function () {
        $( this).removeClass( "selected");
    }
);

做用：每次點擊時切換要調用的函數。若是點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。挺有趣的 一個函數，在動態實現某些功能的時候可能會用到。(像click(),focus(),keydown()這樣的事件這裏就不提了，那些都是開發中比較常 用到的。)

jQuery外觀效果

addClass(class)和removeClass(class)

代碼：

$( ".stripe tr").mouseover( function(){    
                             $( this).addClass( "over");}).mouseout( function(){
                             $( this).removeClass( "over");})
});

也能夠寫成：

$( ".stripe tr").mouseover( function() { $( this).addClass( "over") });
$( ".stripe tr").mouseout( function() { $( this).removeClass( "over") });

做用：爲指定的元素添加或移除樣式，從而實現動態的樣式效果，上面的實例中實現鼠標移動雙色表格的代碼

css(name,value)

代碼：

$( "p").css( "color", "red");

做用：很簡單，就是在匹配的元素中，設置一個樣式屬性的值。這個我的感受和上面的addClass(class)有點相似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代碼：

$( "#btnShow").bind( "click", function(event){ $( "#divMsg").show() });
$( "#btnHide").bind( "click", function(evnet){ $( "#divMsg").hide() });

做用：jQuery中提供的比較經常使用的幾個動態效果的函數。還能夠添加參數：show(speed,[callback])以優雅的動畫顯示全部匹配的元素，並在顯示完成後可選地觸發一個回調函數。

animate(params[,duration[,easing[,callback]]])

做用：製做動畫效果用到的函數，功能很是的強大，能夠連續使用此函數。

查找篩選

map(callback)

HTML 代碼:
 

Values:
< INPUT value=John name=name >
     < INPUT value=password name=password >
< INPUT value ="< A href=" name=url ? %22 ejohn.org http: >http://ejohn.org/%22/ < /A >

jQuery 代碼:

$( "p").append( $( "input").map( function(){
     return $( this).val();
}).get().join( ", ") );

結果:

[ John, password, < A href= "http://ejohn.org/%3C/p">http://ejohn.org/%3C/p< /A>> ]

做用：將一組元素轉換成其餘數組（不管是否是元素數組）你能夠用這個函數來創建一個列表，不管是值、屬性仍是CSS樣式，或者其餘特別形式。這均可以用'$.map()'來方便的創建。

find(expr)

HTML 代碼:

< SPAN>Hello< /SPAN>, how are you?jQuery 代碼:
$( "p").find( "span")
結果:
[ < SPAN>Hello< /SPAN> ]

做用：搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

文檔處理

attr(key,value)

HTML 代碼:

< IMG > < IMG >

jQuery 代碼:

$( "img").attr( "src", "test.jpg");

做用：取得或設置匹配元素的屬性值。經過這個方法能夠方便地從第一個匹配元素中獲取一個屬性的值。若是元素沒有相應屬性，則返回 undefined 。在控制HTML標記上是必備的工具。

html()/html(val)

HTML 代碼:

< DIV >
Hello
< /DIV >

jQuery 代碼:

$("div").html();

結果:

Hello

做用：取得或設置匹配元素的html內容，同類型的方法還有text()和val()。前者是取得全部匹配元素的內容。，後者是得到匹配元素的當前值。三者有類似的地方經常使用在內容的操做上。

wrap(html)
HTML 代碼:
Test Paragraph.
jQuery 代碼:
$("p").wrap("
< DIV class=wrap > < /DIV >");
結果:
< DIV class=wrap >
Test Paragraph.

做用：把全部匹配的元素用其餘元素的結構化標記包裹起來。這種包裝對於在文檔中插入額外的結構化標記最有用，並且它不會破壞原始文檔的語義品質。 能夠靈活的修改咱們的DOM。

 

empty()

HTML 代碼:

Hello, Person < A href ="http://new.51cto.com/wuyou/news_edit.php?artID=127754#" >and person < /A >

jQuery 代碼:

$("p").empty();

結果:

做用：刪除匹配的元素集合中全部的子節點。

Ajax處理

load(url,[data],[callback])

url (String) : 待裝入 HTML 網頁網址。

data (Map) : (可選) 發送至服務器的 key/value 數據。

callback (Callback) : (可選) 載入成功時回調函數。

代碼：

$( "#feeds").load( "feeds.aspx", {limit: 25}, function(){
     alert( "The last 25 entries in the feed have been loaded");
});

做用：載入遠程 HTML 文件代碼並插入至 DOM 中。這也是Jquery操做Ajax最經常使用最有效的方法。

serialize()

HTML 代碼:
 

Results:

< FORM >
     < SELECT name=single >         < OPTION selected >Single < /OPTION >        

< OPTION >Single2 < /OPTION > < /SELECT >
     < SELECT multiple name=multiple >         < OPTION selected >Multiple < /OPTION >        

< OPTION >Multiple2 < /OPTION >         < OPTION selected >Multiple3 < /OPTION > < /SELECT >

     < INPUT value=check1 type=checkbox name=check > check1
    < INPUT value=check2 type=checkbox name=check
checked="checked"/> check2
    < INPUT value=radio1 type=radio name=radio
checked="checked"/> radio1
     < INPUT value=radio2 type=radio name=radio > radio2
< /FORM >

jQuery 代碼:

$( "#results").append( "< TT>" + $( "form").serialize() + "< /TT>" );

做用：序列化表格內容爲字符串。用於 Ajax 請求。

工具

jQuery.each(obj,callback)

代碼：

$.each( [0,1,2], function(i, n){
    alert( "Item #" + i + ": " + n );
}); //遍歷數組
$.each( { name: "John", lang: "JS" }, function(i, n){
    alert( "Name: " + i + ", Value: " + n ); //遍歷對象
});

做用：通用例遍方法，可用於例遍對象和數組。

jQuery.makeArray(obj)

HTML 代碼:

First < DIV >Second < /DIV >
Third < /DIV >
< DIV >Fourth
< /DIV >

jQuery 代碼:

var arr = jQuery.makeArray(document.getElementsByTagName( "div"));

結果:

Fourth

Third

Second

First

做用：將類數組對象轉換爲數組對象。使咱們能夠在數組和對象之間靈活的轉換。

jQuery.trim(str)

做用：這個你們應該很熟悉，就是去掉字符串起始和結尾的空格。

小結：在實際的開發中咱們可能會用到其餘的方法和屬性，以上只是我的認爲新手初學jQuery時，必須掌握的一些方法。僅供你們學習的參考。有什麼不對的高手指教。