jQuery功能函式

Attribute：
$(”p”).css(”attname”,”value”); //設定……單個屬性值（例：”color”,”#FF0000″）
$("p").css({ “margin-left”: “10px”, “background-color”: “blue” })//設定……多個屬性值
$("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: “#0028f4” 
} 
$(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 ) 刪除陣列中的所有重複元素，返回整理後的陣列