jQuery經常使用方法一覽

Attribute：

$(」p」).addClass(css中定義的樣式類型); 給某個元素添加樣式

$(」img」).attr({src:」test.jpg」,alt:」test Image」}); 給某個元素添加屬性/值，參數是map

$(」img」).attr(」src」,」test.jpg」); 給某個元素添加屬性/值

$(」img」).attr(」title」, function() { return this.src }); 給某個元素添加屬性/值

$(」元素名稱」).html(); 得到該元素內的內容（元素，文本等）

$(」元素名稱」).html(」<b>new stuff</b>」); 給某元素設置內容

$(」元素名稱」).removeAttr(」屬性名稱」) 給某元素刪除指定的屬性以及該屬性的值

$(」元素名稱」).removeClass(」class」) 給某元素刪除指定的樣式

$(」元素名稱」).text(); 得到該元素的文本

$(」元素名稱」).text(value); 設置該元素的文本值爲value

$(」元素名稱」).toggleClass(class) 當元素存在參數中的樣式的時候取消,若是不存在就設置此樣式

$(」input元素名稱」).val(); 獲取input元素的值

$(」input元素名稱」).val(value); 設置input元素的值爲value

Manipulation：

$(」元素名稱」).after(content); 在匹配元素後面添加內容

$(」元素名稱」).append(content); 將content做爲元素的內容插入到該元素的後面

$(」元素名稱」).appendTo(content); 在content後接元素

$(」元素名稱」).before(content); 與after方法相反

$(」元素名稱」).clone(布爾表達式) 當布爾表達式爲真時，克隆元素（無參時，看成true處理）

$(」元素名稱」).empty() 將該元素的內容設置爲空

$(」元素名稱」).insertAfter(content); 將該元素插入到content以後

$(」元素名稱」).insertBefore(content); 將該元素插入到content以前

$(」元素」).prepend(content); 將content做爲該元素的一部分，放到該元素的最前面

$(」元素」).prependTo(content); 將該元素做爲content的一部分，放content的最前面

$(」元素」).remove(); 刪除全部的指定元素

$(」元素」).remove(」exp」); 刪除全部含有exp的元素

$(」元素」).wrap(」html」); 用html來包圍該元素

$(」元素」).wrap(element); 用element來包圍該元素

Traversing：

add(expr)

add(html)

add(elements)

children(expr)

contains(str)

end()

filter(expression)

filter(filter)

find(expr)

is(expr)

next(expr)

not(el)

not(expr)

not(elems)

parent(expr)

parents(expr)

prev(expr)

siblings(expr)

 

Core：

$(html).appendTo(」body」) 至關於在body中寫了一段html代碼

$(elems) 得到DOM上的某個元素

$(function(){……..}); 執行一個函數

$(」div > p」).css(」border」, 「1px solid gray」); 查找全部div的子節點p，添加樣式

$(」input:radio」, document.forms[0]) 在當前頁面的第一個表單中查找全部的單選按鈕

$.extend(prop) prop是一個jquery對象，

舉例：

jQuery.extend({

min: function(a, b) { return a < b ? a : b; },

max: function(a, b) { return a > b ? a : b; }

});

jQuery( expression, [context] ) —$( expression, [context]); 在默認狀況下，$()查詢的是當前HTML文檔中的DOM元素。

 

each( callback ) 以每個匹配的元素做爲上下文來執行一個函數

舉例：1

$(」span」).click(function){

$(」li」).each(function(){

$(this).toggleClass(」example」);

});

});

舉例：2

$(」button」).click(function () {

$(」div」).each(function (index, domEle) {

// domEle == this

$(domEle).css(」backgroundColor」, 「yellow」);

if ($(this).is(」#stop」)) {

$(」span」).text(」Stopped at div index #」 + index);

return false;

}

});

});

 

 

jQuery Event:

 

ready(fn); $(document).ready()注意在body中沒有onload事件，不然該函數不能執行。在每一個頁面中能夠

有不少個函數被加載執行，按照fn的順序來執行。

bind( type, [data], fn ) 爲每個匹配元素的特定事件（像click）綁定一個或多個事件處理器函數。可能的事件屬性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,

mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,

keyup, error

one( type, [data], fn ) 爲每個匹配元素的特定事件（像click）綁定一個或多個事件處理器函數。在每一個對

象上，這個事件處理函數只會被執行一次。其餘規則與bind()函數相同。

 

trigger( type, [data] ) 在每個匹配的元素上觸發某類事件。

triggerHandler( type, [data] ) 這一特定方法會觸發一個元素上特定的事件(指定一個事件類型)，同時取消瀏覽器對此事件的默認行動

unbind( [type], [data] ) 反綁定，從每個匹配的元素中刪除綁定的事件。

$(」p」).unbind() 移除全部段落上的全部綁定的事件

$(」p」).unbind( 「click」 ) 移除全部段落上的click事件

hover( over, out ) over,out都是方法, 當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。

$(」p」).hover(function(){

$(this).addClass(」over」);

},

function(){

$(this).addClass(」out」);

}

);

 

toggle( fn, fn ) 若是點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。

$(」p」).toggle(function(){

$(this).addClass(」selected」);

},

function(){

$(this).removeClass(」selected」);

}

);

 

元素事件列表說明

注：不帶參數的函數，其參數爲可選的 fn。jQuery不支持form元素的reset事件。

事件 描述 支持元素或對象

blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area

change( ) 用戶改變域的內容 input, textarea, select

click( ) 鼠標點擊某個對象 幾乎全部元素

dblclick( ) 鼠標雙擊某個對象 幾乎全部元素

error( ) 當加載文檔或圖像時發生某個錯誤 window, img

focus( ) 元素得到焦點 a, input, textarea, button, select, label, map, area

keydown( ) 某個鍵盤的鍵被按下 幾乎全部元素

keypress( ) 某個鍵盤的鍵被按下或按住 幾乎全部元素

keyup( ) 某個鍵盤的鍵被鬆開 幾乎全部元素

load( fn ) 某個頁面或圖像被完成加載 window, img

mousedown( fn ) 某個鼠標按鍵被按下 幾乎全部元素

mousemove( fn ) 鼠標被移動 幾乎全部元素

mouseout( fn ) 鼠標從某元素移開 幾乎全部元素

mouseover( fn ) 鼠標被移到某元素之上 幾乎全部元素

mouseup( fn ) 某個鼠標按鍵被鬆開 幾乎全部元素

resize( fn ) 窗口或框架被調整尺寸 window, iframe, frame

scroll( fn ) 滾動文檔的可視部分時 window

select( ) 文本被選定 document, input, textarea

submit( ) 提交按鈕被點擊 form

unload( fn ) 用戶退出頁面 window

 

JQuery Ajax 方法說明:

 

load( url, [data], [callback] ) 裝入一個遠程HTML內容到一個DOM結點。

$(」#feeds」).load(」feeds.html」); 將feeds.html文件載入到id爲feeds的div中

$(」#feeds」).load(」feeds.php」, {limit: 25}, function(){

alert(」The last 25 entries in the feed have been loaded」);

});

 

jQuery.get( url, [data], [callback] ) 使用GET請求一個頁面。

$.get(」test.cgi」, { name: 「John」, time: 「2pm」 }, function(data){

alert(」Data Loaded: 」 + data);

});

 

jQuery.getJSON( url, [data], [callback] ) 使用GET請求JSON數據。

$.getJSON(」test.js」, { name: 「John」, time: 「2pm」 }, function(json){

alert(」JSON Data: 」 + json.users[3].name);

});

 

jQuery.getScript( url, [callback] ) 使用GET請求javascript文件並執行。

$.getScript(」test.js」, function(){

alert(」Script loaded and executed.」);

});

jQuery.post( url, [data], [callback], [type] ) 使用POST請求一個頁面。

 

ajaxComplete( callback ) 當一個AJAX請求結束後，執行一個函數。這是一個Ajax事件

$(」#msg」).ajaxComplete(function(request, settings){

$(this).append(」<li>Request Complete.</li>」);

});

ajaxError( callback ) 當一個AJAX請求失敗後，執行一個函數。這是一個Ajax事件

$(」#msg」).ajaxError(function(request, settings){

$(this).append(」<li>Error requesting page 」 + settings.url + 「</li>」);

});

 

 

ajaxSend( callback ) 在一個AJAX請求發送時，執行一個函數。這是一個Ajax事件

$(」#msg」).ajaxSend(function(evt, request, settings){

$(this).append(」<li<Starting request at 」 + settings.url

+ 「</li<」);

});

 

ajaxStart( callback ) 在一個AJAX請求開始但尚未激活時，執行一個函數。這是一個Ajax事件

當AJAX請求開始(並尚未激活時)顯示loading信息

$(」#loading」).ajaxStart(function(){

$(this).show();

});

 

ajaxStop( callback ) 當全部的AJAX都中止時，執行一個函數。這是一個Ajax事件

當全部AJAX請求都中止時，隱藏loading信息。

$(」#loading」).ajaxStop(function(){

$(this).hide();

});

 

ajaxSuccess( callback ) 當一個AJAX請求成功完成後，執行一個函數。這是一個Ajax事件

當AJAX請求成功完成時，顯示信息。

$(」#msg」).ajaxSuccess(function(evt, request, settings){

$(this).append(」<li>Successful Request!</li>」);

});

 

jQuery.ajaxSetup( options ) 爲全部的AJAX請求進行全局設置。查看$.ajax函數取得全部選項信息。

設置默認的全局AJAX請求選項。

$.ajaxSetup({

url: 「/xmlhttp/」,

global: false,

type: 「POST」

});

$.ajax({ data: myData });

 

serialize( ) 以名稱和值的方式鏈接一組input元素。實現了正確表單元素序列

function showValues() {

var str = $(」form」).serialize();

$(」#results」).text(str);

}

$(」:checkbox, :radio」).click(showValues);

$(」select」).change(showValues);

showValues();

 

serializeArray( ) 鏈接全部的表單和表單元素(相似於.serialize()方法)，可是返回一個JSON數據格式。

從form中取得一組值，顯示出來

function showValues() {

var fields = $(」:input」).serializeArray();

alert(fields);

$(」#results」).empty();

jQuery.each(fields, function(i, field){

$(」#results」).append(field.value + 」 「);

});

}

$(」:checkbox, :radio」).click(showValues);

$(」select」).change(showValues);

showValues();

 

JQuery Effects 方法說明

 

show( ) 顯示隱藏的匹配元素。

show( speed, [callback] ) 以優雅的動畫顯示全部匹配的元素，並在顯示完成後可選地觸發一個回調函數。

hide( ) 隱藏全部的匹配元素。

hide( speed, [callback] ) 以優雅的動畫隱藏全部匹配的元素，並在顯示完成後可選地觸發一個回調函數

toggle( ) 切換元素的可見狀態。若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，

切換爲可見的。

slideDown( speed, [callback] ) 經過高度變化（向下增大）來動態地顯示全部匹配的元素，在顯示完成後可選

地觸發一個回調函數。這個動畫效果只調整元素的高度，能夠使匹配的元素以

「滑動」的方式顯示出來。

slideUp( speed, [callback] ) 經過高度變化（向上減少）來動態地隱藏全部匹配的元素，在隱藏完成後可選地

觸發一個回調函數。這個動畫效果只調整元素的高度，能夠使匹配的元素以」滑動」

的方式隱藏起來。

slideToggle( speed, [callback] ) 經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回

調函數。 這個動畫效果只調整元素的高度，能夠使匹配的元素以」滑動」的方式隱

藏或顯示。

fadeIn( speed, [callback] ) 經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸

發一個回調函數。 這個動畫只調整元素的不透明度，也就是說全部匹配的元素的

高度和寬度不會發生變化。

fadeOut( speed, [callback] ) 經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸

發一個回調函數。 這個動畫只調整元素的不透明度，也就是說全部匹配的元素的

高度和寬度不會發生變化。

fadeTo( speed, opacity, [callback] ) 把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成

後可選地觸發一個回調函數。 這個動畫只調整元素的不透明度，也就是說所

有匹配的元素的高度和寬度不會發生變化。

stop( ) 中止全部匹配元素當前正在運行的動畫。若是有動畫處於隊列當中，他們就會當即開始。

queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容爲函數的數組)

queue( callback ) 在每個匹配元素的事件序列的末尾添加一個可執行函數，做爲此元素的事件函數

queue( queue ) 以一個新的動畫序列代替全部匹配元素的原動畫序列

dequeue( ) 執行並移除動畫序列前端的動畫

animate( params, [duration], [easing], [callback] ) 用於建立自定義動畫的函數。

animate( params, options ) 建立自定義動畫的另外一個方法。做用同上。

 

JQuery Traversing 方法說明

 

eq( index ) 從匹配的元素集合中取得一個指定位置的元素，index從0開始

filter( expr ) 返回與指定表達式匹配的元素集合，能夠使用」,」號分割多個expr，用於實現多個條件篩選

filter( fn ) 利用一個特殊的函數來做爲篩選條件移除集合中不匹配的元素。

is( expr ) 用一個表達式來檢查當前選擇的元素集合，若是其中至少有一個元素符合這個給定的

表達式就返回true。

map( callback ) 將jQuery對象中的一組元素利用callback方法轉換其值，而後添加到一個jQuery數組中。

not( expr ) 從匹配的元素集合中刪除與指定的表達式匹配的元素。

slice( start, [end] ) 從匹配元素集合中取得一個子集，和內建的數組的slice方法相同。

add( expr ) 把與表達式匹配的元素添加到jQuery對象中。

children( [expr] ) 取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。可選的過濾器

將使這個方法只匹配符合的元素(只包括元素節點，不包括文本節點)。

contents( ) 取得一個包含匹配的元素集合中每個元素的全部子孫節點的集合(只包括元素節點，不

包括文本節點)，若是元素爲iframe，則取得其中的文檔元素

find( expr ) 搜索全部與指定表達式匹配的元素。

next( [expr] ) 取得一個包含匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合。

nextAll( [expr] ) 取得一個包含匹配的元素集合中每個元素全部的後面同輩元素的元素集合

parent( [expr] ) 取得一個包含着全部匹配元素的惟一父元素的元素集合。

parents( [expr] ) 取得一個包含着全部匹配元素的惟一祖先元素的元素集合（不包含根元素）。

prev( [expr] ) 取得一個包含匹配的元素集合中每個元素緊鄰的前一個同輩元素的元素集合。

prevAll( [expr] ) 取得一個包含匹配的元素集合中每個元素的以前全部同輩元素的元素集合。

siblings( [expr] ) 取得一個包含匹配的元素集合中每個元素的全部同輩元素的元素集合。

andSelf( ) 將前一個匹配的元素集合添加到當前的集合中

取得全部div元素和其中的p元素，添加border類屬性。取得全部div元素中的p元素，

添加background類屬性

$(」div」).find(」p」).andSelf().addClass(」border」);

$(」div」).find(」p」).addClass(」background」);

end( ) 結束當前的操做，回到當前操做的前一個操做

找到全部p元素其中的span元素集合，而後返回p元素集合，添加css屬性

$(」p」).find(」span」).end().css(」border」, 「2px red solid」);

 

 

 

 

 

JQuery Selectors 方法說明

 

基本選擇器

$(」#myDiv」) 匹配惟一的具備此id值的元素

$(」div」) 匹配指定名稱的全部元素

$(」.myClass」) 匹配具備此class樣式值的全部元素

$(」*」) 匹配全部元素

$(」div,span,p.myClass」) 聯合全部匹配的選擇器

層疊選擇器

$(」form input」) 後代選擇器，選擇ancestor的全部子孫節點

$(」#main > *」) 子選擇器，選擇parent的全部子節點

$(」label + input」) 臨選擇器，選擇prev的下一個臨節點

$(」#prev ~ div」) 同胞選擇器，選擇prev的全部同胞節點

基本過濾選擇器

$(」tr:first」) 匹配第一個選擇的元素

$(」tr:last」) 匹配最後一個選擇的元素

$(」input:not(:checked) + span」)從原元素集合中過濾掉匹配selector的全部元素（這裏有是一個臨選擇器）

$(」tr:even」) 匹配集合中偶數位置的全部元素(從0開始)

$(」tr:odd」) 匹配集合中奇數位置的全部元素(從0開始)

$(」td:eq(2)」) 匹配集合中指定位置的元素(從0開始)

$(」td:gt(4)」) 匹配集合中指定位置以後的全部元素(從0開始)

$(」td:gl(4)」) 匹配集合中指定位置以前的全部元素(從0開始)

$(」:header」) 匹配全部標題

$(」div:animated」) 匹配全部正在運行動畫的全部元素

內容過濾選擇器

$(」div:contains(’John’)」) 匹配含有指定文本的全部元素

$(」td:empty」) 匹配全部空元素(只含有文本的元素不算空元素)

$(」div:has(p)」) 從原元素集合中再次匹配全部至少含有一個selector的全部元素

$(」td:parent」) 匹配全部不爲空的元素(含有文本的元素也算)

$(」div:hidden」) 匹配全部隱藏的元素，也包括表單的隱藏域

$(」div:visible」) 匹配全部可見的元素

屬性過濾選擇器

$(」div[id]」) 匹配全部具備指定屬性的元素

$(」input[name=’newsletter’]」) 匹配全部具備指定屬性值的元素

$(」input[name!=’newsletter’]」) 匹配全部不具備指定屬性值的元素

$(」input[name^=’news’]」) 匹配全部指定屬性值以value開頭的元素

$(」input[name$=’letter’]」) 匹配全部指定屬性值以value結尾的元素

$(」input[name*=’man’]」) 匹配全部指定屬性值含有value字符的元素

$(」input[id][name$=’man’]」) 匹配同時符合多個選擇器的全部元素

子元素過濾選擇器

$(」ul li:nth-child(2)」),

$(」ul li:nth-child(odd)」), 匹配父元素的第n個子元素

$(」ul li:nth-child(3n + 1)」)

 

$(」div span:first-child」) 匹配父元素的第1個子元素

$(」div span:last-child」) 匹配父元素的最後1個子元素

$(」div button:only-child」) 匹配父元素的惟一1個子元素

表單元素選擇器

$(」:input」) 匹配全部的表單輸入元素，包括全部類型的input, textarea, select 和 button

$(」:text」) 匹配全部類型爲text的input元素

$(」:password」) 匹配全部類型爲password的input元素

$(」:radio」) 匹配全部類型爲radio的input元素

$(」:checkbox」) 匹配全部類型爲checkbox的input元素

$(」:submit」) 匹配全部類型爲submit的input元素

$(」:image」) 匹配全部類型爲image的input元素

$(」:reset」) 匹配全部類型爲reset的input元素

$(」:button」) 匹配全部類型爲button的input元素

$(」:file」) 匹配全部類型爲file的input元素

$(」:hidden」) 匹配全部類型爲hidden的input元素或表單的隱藏域

表單元素過濾選擇器

$(」:enabled」) 匹配全部可操做的表單元素

$(」:disabled」) 匹配全部不可操做的表單元素

$(」:checked」) 匹配全部已點選的元素

$(」select option:selected」) 匹配全部已選擇的元素

 

JQuery CSS 方法說明

 

css( name ) 訪問第一個匹配元素的樣式屬性。

css( properties ) 把一個」名/值對」對象設置爲全部匹配元素的樣式屬性。

$(」p」).hover(function () {

$(this).css({ backgroundColor:」yellow」, fontWeight:」bolder」 });

}, function () {

var cssObj = {

backgroundColor: 「#ddd」,

fontWeight: 「」,

color: 「rgb(0,40,244)」

}

$(this).css(cssObj);

});

css( name, value ) 在全部匹配的元素中，設置一個樣式屬性的值。

offset( ) 取得匹配的第一個元素相對於當前可視窗口的位置。返回的對象有2個屬性，

top和left，屬性值爲整數。這個函數只能用於可見元素。

var p = $(」p:last」);

var offset = p.offset();

p.html( 「left: 」 + offset.left + 「, top: 」 + offset.top );

width( ) 取得當前第一匹配的元素的寬度值，

width( val ) 爲每一個匹配的元素設置指定的寬度值。

height( ) 取得當前第一匹配的元素的高度值，

height( val ) 爲每一個匹配的元素設置指定的高度值。

 

JQuery Utilities 方法說明

jQuery.browser

.msie 表示ie

jQuery.browser.version 讀取用戶瀏覽器的版本信息

jQuery.boxModel 檢測用戶瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型

jQuery.isFunction( obj ) 檢測傳遞的參數是否爲function

function stub() { }

var objs = [

function () {},

{ x:15, y:20 },

null,

stub,

「function」

];

jQuery.each(objs, function (i) {

var isFunc = jQuery.isFunction(objs[i]);

$(」span:eq( 」 + i + 「)」).text(isFunc);

});

jQuery.trim( str ) 清除字符串兩端的空格，使用正則表達式來清除給定字符兩端的空格

jQuery.each( object, callback ) 一個通用的迭代器，能夠用來無縫迭代對象和數組

jQuery.extend( target, object1, [objectN] ) 擴展一個對象，修改原來的對象並返回，這是一個強大的實現繼承的

工具，這種繼承是採用傳值的方法來實現的，而不是JavaScript中的

原型鏈方式。

合併settings和options對象，返回修改後的settings對象

var settings = { validate: false, limit: 5, name: 「foo」 };

var options = { validate: true, name: 「bar」 };

jQuery.extend(settings, options);

 

合併defaults和options對象，defaults對象並無被修改。options對象中的值

代替了defaults對象的值傳遞給了empty。

 

var empty = {}

var defaults = { validate: false, limit: 5, name: 「foo」 };

var options = { validate: true, name: 「bar」 };

var settings = $.extend(empty, defaults, options);

jQuery.grep( array, callback, [invert] ) 經過一個篩選函數來去除數組中的項

$.grep( [0,1,2], function(n,i){

return n > 0;

});

jQuery.makeArray( obj ) 將一個相似數組的對象轉化爲一個真正的數組

將選取的div元素集合轉化爲一個數組

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

arr.reverse(); // use an Array method on list of dom elements

$(arr).appendTo(document.body);

jQuery.map( array, callback ) 使用某個方法修改一個數組中的項，而後返回一個新的數組

jQuery.inArray( value, array ) 返回value在數組中的位置，若是沒有找到，則返回-1

jQuery.unique( array ) 刪除數組中的全部重複元素，返回整理後的數組