服務(wù)熱線
153 8323 9821
Dom:
Attribute:
$("p").addClass(css中定義的樣式類型); 給某個元素添加樣式
$("img").attr({src:"test.jpg",alt:"test Image"}); 給某個元素添加屬性/值,參數(shù)是map
$("img").attr("src","test.jpg"); 給某個元素添加屬性/值
$("img").attr("title", function() { return this.src }); 給某個元素添加屬性/值
$("元素名稱").html(); 獲得該元素內(nèi)的內(nèi)容(元素,文本等)
$("元素名稱").html("<b>new stuff</b>"); 給某元素設(shè)置內(nèi)容
$("元素名稱").removeAttr("屬性名稱") 給某元素刪除指定的屬性以及該屬性的值
$("元素名稱").removeClass("class") 給某元素刪除指定的樣式
$("元素名稱").text(); 獲得該元素的文本
$("元素名稱").text(value); 設(shè)置該元素的文本值為value
$("元素名稱").toggleClass(class) 當(dāng)元素存在參數(shù)中的樣式的時候取消,如果不存在就設(shè)置此樣式
$("input元素名稱").val(); 獲取input元素的值
$("input元素名稱").val(value); 設(shè)置input元素的值為value
Manipulation:
$("元素名稱").after(content); 在匹配元素后面添加內(nèi)容
$("元素名稱").append(content); 將content作為元素的內(nèi)容插入到該元素的后面
$("元素名稱").appendTo(content); 在content后接元素
$("元素名稱").before(content); 與after方法相反
$("元素名稱").clone(布爾表達(dá)式) 當(dāng)布爾表達(dá)式為真時,克隆元素(無參時,當(dāng)作true處理)
$("元素名稱").empty() 將該元素的內(nèi)容設(shè)置為空
$("元素名稱").After(content); 將該元素插入到content之后
$("元素名稱").Before(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") 相當(dāng)于在body中寫了一段html代碼
$(elems) 獲得DOM上的某個元素
$(function(){……..}); 執(zhí)行一個函數(shù)
$("div > p").css("border", "1px solid gray"); 查找所有div的子節(jié)點(diǎn)p,添加樣式
$("input:radio", document.forms[0]) 在當(dāng)前頁面的第一個表單中查找所有的單選按鈕
$.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]); 在默認(rèn)情況下,$()查詢的是當(dāng)前HTML文檔中的DOM元素。
each( callback ) 以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)
舉例: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事件,否則該函數(shù)不能執(zhí)行。在每個頁面中可以
有很多個函數(shù)被加載執(zhí)行,按照fn的順序來執(zhí)行。
bind( type, [data], fn ) 為每一個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數(shù)。可能的事件屬性有: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)綁定一個或多個事件處理器函數(shù)。在每個對
象上,這個事件處理函數(shù)只會被執(zhí)行一次。其他規(guī)則與bind()函數(shù)相同。
trigger( type, [data] ) 在每一個匹配的元素上觸發(fā)某類事件。
triggerHandler( type, [data] ) 這一特定方法會觸發(fā)一個元素上特定的事件(指定一個事件類型),同時取消瀏覽器對此事件的默認(rèn)行動
unbind( [type], [data] ) 反綁定,從每一個匹配的元素中刪除綁定的事件。
$("p").unbind() 移除所有段落上的所有綁定的事件
$("p").unbind( "click" ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 當(dāng)鼠標(biāo)移動到一個匹配的元素上面時,會觸發(fā)指定的第一個函數(shù)。當(dāng)鼠標(biāo)移出這個元素時,會觸發(fā)指定的第二個函數(shù)。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
);
toggle( fn, fn ) 如果點(diǎn)擊了一個匹配的元素,則觸發(fā)指定的第一個函數(shù),當(dāng)再次點(diǎn)擊同一元素時,則觸發(fā)指定的第二個函數(shù)。
$("p").toggle(function(){
$(this).addClass("Selected");
},
function(){
$(this).removeClass("Selected");
}
);
元素事件列表說明
注:不帶參數(shù)的函數(shù),其參數(shù)為可選的 fn。jQuery不支持form元素的reset事件。
事件 描述 支持元素或?qū)ο?
blur( ) 元素失去焦點(diǎn) a, input, textarea, button, Select, label, map, area
change( ) 用戶改變域的內(nèi)容 input, textarea, Select
click( ) 鼠標(biāo)點(diǎn)擊某個對象 幾乎所有元素
dblclick( ) 鼠標(biāo)雙擊某個對象 幾乎所有元素
error( ) 當(dāng)加載文檔或圖像時發(fā)生某個錯誤 window, img
focus( ) 元素獲得焦點(diǎn) a, input, textarea, button, Select, label, map, area
keydown( ) 某個鍵盤的鍵被按下 幾乎所有元素
keypress( ) 某個鍵盤的鍵被按下或按住 幾乎所有元素
keyup( ) 某個鍵盤的鍵被松開 幾乎所有元素
load( fn ) 某個頁面或圖像被完成加載 window, img
mousedown( fn ) 某個鼠標(biāo)按鍵被按下 幾乎所有元素
mousemove( fn ) 鼠標(biāo)被移動 幾乎所有元素
mouseout( fn ) 鼠標(biāo)從某元素移開 幾乎所有元素
mouseover( fn ) 鼠標(biāo)被移到某元素之上 幾乎所有元素
mouseup( fn ) 某個鼠標(biāo)按鍵被松開 幾乎所有元素
resize( fn ) 窗口或框架被調(diào)整尺寸 window, iframe, frame
scroll( fn ) 滾動文檔的可視部分時 window
Select( ) 文本被選定 document, input, textarea
submit( ) 提交按鈕被點(diǎn)擊 form
unload( fn ) 用戶退出頁面 window
JQuery Ajax 方法說明:
load( url, [data], [callback] ) 裝入一個遠(yuǎn)程HTML內(nèi)容到一個DOM結(jié)點(diǎn)。
$("#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數(shù)據(jù)。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].na