jquery 基礎筆記

事件

bind() 方法為被選元素新增一個或多個事件處理程式，並規定事件發生時執行的函式。

語法

$(selector).bind(event,data,function)

當元素失去焦點時發生 blur 事件。

blur() 函式觸發 blur 事件，或者如果設定了function 引數，該函式也可規定當發生 blur 事件時執行的程式碼。

語法

$(selector).blur()

當元素的值 發生改變時，會發生 change 事件。

$(selector).change()

當點選元素時，會發生 click 事件。

語法

$(selector).click()

當雙擊元素時，會發生 dblclick 事件。

語法

$(selector).dblclick()

delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程式，並規定當這些事件發生時執行的函式。

使用 delegate() 方法的事件處理程式適用於當前或未來的元素（比如由指令碼建立的新元素）。

語法

$(selector).delegate(childSelector,event,data,function)

die() 方法移除所有通過 live() 方法向指定元素新增的一個或多個事件處理程式。

語法

$(selector).die(event,function)

當元素遇到錯誤（沒有正確載入）時，發生 error 事件。

語法

$(selector).error()

顯示滑鼠指標的位置：

$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});

ofollow,noindex" target="_blank">親自試一試

定義和用法

pageX() 屬性是滑鼠指標的位置，相對於文件的左邊緣。

語法

event.pageX

pageY() 屬性是滑鼠指標的位置，相對於文件的上邊緣。

語法

event.pageY

preventDefault() 方法阻止元素髮生預設的行為（例如，當點選提交按鈕時阻止對錶單的提交）。

語法

event.preventDefault()

result 屬性包含由被指定事件觸發的事件處理器返回的最後一個值，除非這個值未定義。

語法

event.result

例項

顯示哪個 DOM 元素觸發了事件：

$("p, button, h1, h2").click(function(event){
$("div").html("Triggered by a " + event.target.nodeName + " element.");
});

親自試一試

定義和用法

target 屬性規定哪個 DOM 元素觸發了該事件。

語法

event.target

.Event 物件代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態

完整的 key press 過程分為兩個部分：1. 按鍵被按下；2. 按鍵被鬆開。

當按鈕被按下時，發生 keydown 事件。

語法

$(selector).keydown()

當按鈕被鬆開時，發生 keyup 事件。它發生在當前獲得焦點的元素上。

bind與live和delegate的區別；

bind選中當前存在的元素；

live選中當前存在的元素和未來出項的元素；

delegate選中當前被選元素的子元素和未來的子元素；

當指定的元素（及子元素）已載入時，會發生 load() 事件。

該事件適用於任何帶有 URL 的元素（比如影象、指令碼、框架、內聯框架）。

語法

$(selector).load(function)

當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。

語法

$(selector).mousedown()

當滑鼠指標穿過元素時，會發生 mouseenter 事件。

語法

$(selector).mouseenter()

當滑鼠指標離開元素時，會發生 mouseleave 事件。

語法

$(selector).mouseleave()

當滑鼠指標在指定的元素中移動時，就會發生 mousemove 事件。

語法

$(selector).mousemove()

當滑鼠指標從元素上移開時，發生 mouseout 事件。

語法

$(selector).mouseout()

不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。

只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。

當滑鼠指標位於元素上方時，會發生 mouseover 事件

與 mouseenter 事件不同，不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件

語法

$(selector).mouseover()

當在元素上放鬆滑鼠按鈕時，會發生 mouseup 事件。

語法

$(selector).mouseup()

與 click 事件不同，mouseup 事件僅需要放鬆按鈕，而click只能是滑鼠左鍵，mouseup不管是什麼鍵只要按住後鬆開了就激活了

one() 方法為被選元素附加一個或多個事件處理程式，並規定當事件發生時執行的函式。

當使用 one() 方法時，每個元素只能執行一次事件處理器函式。

$(selector).one(event,data,function)

***當 DOM（文件物件模型） 已經載入，並且頁面（包括影象）已經完全呈現時，會發生 ready 事件。

ready() 函式規定當 ready 事件發生時執行的程式碼。

ready() 函式僅能用於當前文件，因此無需選擇器。

允許使用以下三種語法：

語法 1

$(document).ready(function)

語法 2

$().ready(function)

語法 3

$(function)

當調整瀏覽器視窗的大小時，發生 resize 事件。

語法

$(selector).resize()

當用戶滾動指定的元素時，會發生 scroll 事件。

scroll 事件適用於所有可滾動的元素和 window 物件（瀏覽器視窗）。

語法

$(selector).scroll()

當 textarea 或文字型別的 input 元素中的文字被選擇時，會發生 select 事件。

select() 方法觸發 select 事件，或規定當發生 select 事件時執行的函式。

語法

$(selector).select()

當提交表單時，會發生 submit 事件。

語法

$(selector).submit()

toggle() 方法用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件。

該方法也可用於切換被選元素的hide() 與show() 方法。

例項

切換不同的背景色：

$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);

親自試一試

語法

$(selector).toggle(function1(),function2(),functionN(),...)

trigger() 方法觸發被選元素的指定事件型別。

語法

$(selector).trigger(event,[param1,param2,...])

triggerHandler() 方法觸發被選元素的指定事件型別。但不會執行瀏覽器預設動作，也不會產生事件冒泡。

效果

animate() 方法執行 CSS 屬性集的自定義動畫。

$(selector).animate(styles,speed,easing,callback)

語法 2

$(selector).animate(styles,options)

clearQueue() 方法停止佇列中所有仍未執行的函式。

與 stop() 方法不同，（只適用於動畫），clearQueue() 能夠清除任何排隊的函式（通過 .queue() 方法新增到通用 jQuery 佇列的任何函式）。

語法

$(selector).clearQueue(queueName)

fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。

語法

$(selector).fadeIn(speed,callback)

fadeOut() 方法使用淡出效果來隱藏被選元素，假如該元素是隱藏的。

語法

$(selector).fadeOut(speed,callback)

fadeTo() 方法將被選元素的不透明度逐漸地改變為指定的值。

語法

$(selector).fadeTo(speed,opacity,callback)

show()如果被選的元素已被顯示，則隱藏該元素。

語法

$(selector).hide(speed,callback)

slideDown() 方法通過使用滑動效果，顯示隱藏的被選元素。

語法

$(selector).slideDown(speed,callback)

slideToggle() 方法通過使用滑動效果（高度變化）來切換元素的可見狀態。

如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。

語法

$(selector).slideToggle(speed,callback)

slideUP()通過使用滑動效果，隱藏被選元素，如果元素已顯示出來的話。

語法

$(selector).slideUp(speed,callback)

stop() 方法停止當前正在執行的動畫。

語法

$(selector).stop(stopAll,goToEnd)

toggle() 方法切換元素的可見狀態。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

語法

$(selector).toggle(speed,callback,switch)

文件操作

addClass() 方法向被選元素新增一個或多個類。

該方法不會移除已存在的 class 屬性，僅僅新增一個或多個 class 屬性。

提示：如需新增多個類，請使用空格分隔類名。

語法

$(selector).addClass(class)

after() 方法在被選元素後插入指定的內容。在後面新增新標籤

語法

$(selector).after(content)

append() 方法在被選元素的結尾（仍然在內部）插入指定內容。

提示：append() 和appendTo() 方法執行的任務相同。不同之處在於：內容的位置和選擇器。

語法

$(selector).append(content)

attr() 方法設定或返回被選元素的屬性值。

返回屬性值

返回被選元素的屬性值。

語法

$(selector).attr(attribute)

before() 方法在被選元素前插入指定的內容。

語法

$(selector).before(content)

clone() 方法生成被選元素的副本，包含子節點、文字和屬性。

語法

$(selector).clone(includeEvents)

detach() 方法移除被選元素，包括所有文字和子節點。

這個方法會保留 jQuery 物件中的匹配的元素，因而可以在將來再使用這些匹配的元素。

detach() 會保留所有繫結的事件、附加的資料，這一點與 remove() 不同。

語法

$(selector).detach()

$("button").click(function(){
$("body").append($("p").detach());append($("p").detach() == p標籤原來的所以元素和繫結事件
});

empty() 方法從被選元素移除所有內容，包括所有文字和子節點。

語法

$(selector).empty()

hasClass() 方法檢查被選元素是否包含指定的 class。

語法

$(selector).hasClass(class)

html() 方法返回或設定被選元素的內容 (inner HTML)。

如果該方法未設定引數，則返回被選元素的當前內容。

返回元素內容

當使用該方法返回一個值時，它會返回第一個匹配元素的內容。

語法

$(selector).html()

insertAfter() 方法在被選元素之後插入 HTML 標記或已有的元素。

註釋：如果該方法用於已有元素，這些元素會被從當前位置移走，然後被新增到被選元素之後。

語法

$(content).insertAfter(selector)

insertBefore() 方法在被選元素之前插入 HTML 標記或已有的元素。

註釋：如果該方法用於已有元素，這些元素會被從當前位置移走，然後被新增到被選元素之前。

語法

$(content).insertBefore(selector)

prepend() 方法在被選元素的開頭（仍位於內部）插入指定內容。

提示：prepend() 和prependTo() 方法作用相同。差異在於語法：內容和選擇器的位置，以及 prependTo() 無法使用函式來插入內容。

語法

$(selector).prepend(content)

prependTo() 方法在被選元素的開頭（仍位於內部）插入指定內容。

提示：prepend() 和 prependTo() 方法作用相同。差異在於語法：內容和選擇器的位置，以及 prepend() 能夠使用函式來插入內容。

語法

$(content).prependTo(selector)

remove() 方法移除被選元素，包括所有文字和子節點。

該方法不會把匹配的元素從 jQuery 物件中刪除，因而可以在將來再使用這些匹配的元素。

但除了這個元素本身得以保留之外，remove() 不會保留元素的 jQuery 資料。其他的比如繫結的事件、附加的資料等都會被移除。這一點與 detach() 不同。

語法

$(selector).remove()

removeAttr() 方法從被選元素中移除屬性。

語法

$(selector).removeAttr(attribute)

removeClass() 方法從被選元素移除一個或多個類。

註釋：如果沒有規定引數，則該方法將從被選元素中刪除所有類。

語法

$(selector).removeClass(class)

replaceAll() 方法用指定的 HTML 內容或元素替換被選元素。

提示：replaceAll() 與replaceWith() 作用相同。差異在於語法：內容和選擇器的位置，以及 replaceWith() 能夠使用函式進行替換。

語法

$(content).replaceAll(selector)

replaceWith() 方法用指定的 HTML 內容或元素替換被選元素。

提示：replaceWith() 與replaceAll() 作用相同。差異在於語法：內容和選擇器的位置，以及 replaceAll() 無法使用函式進行替換。

語法

$(selector).replaceWith(content)

$(selector).replaceWith(function())

text() 方法方法設定或返回被選元素的文字內容。

我認為差異幾乎是不言自明的。測試它是非常重要的。

jQuery.html() 將字串視為HTML，jQuery.text() 將內容視為文字

toggleClass() 對設定或移除被選元素的一個或多個類進行切換。

該方法檢查每個元素中指定的類。如果不存在則新增類，如果已設定則刪除之。這就是所謂的切換效果。

不過，通過使用 "switch" 引數，您能夠規定只刪除或只新增類。

語法

$(selector).toggleClass(class,switch)

unwrap() 方法刪除被選元素的父元素。

語法

$(selector).unwrap()

val() 方法返回或設定被選元素的值。

元素的值是通過 value 屬性設定的。該方法大多用於 input 元素。

如果該方法未設定引數，則返回被選元素的當前值。

語法

$(selector).val(value)

wrap() 方法把每個被選元素放置在指定的 HTML 內容或元素中。變成這個被選元素的父元素

語法

$(selector).wrap(wrapper)

例項

在

$(".btn1").click(function(){
$("p").wrapAll("<div></div>");
});

$(selector).wrapAll(wrapper)

$(selector).wrapInner(wrapper)

$(".btn1").click(function(){
$("p").css("color","red");
});

$(selector).css(name)

$(selector).height()

$(selector).offset()

.add(selector)

.children(selector)

.closest(selector)

.contents()

$(selector).each(function(index,element))

.eq(index)

.find(selector)

.first()

.has(selector)

.is(selector)

.last()

.not(selector)

$("p").not("#selected")

$("p").parent(".selected")

.parent(selector)

$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});

$(selector).data(name)

.dequeue(queueName)

$(selector).removeData(name)

$(selector).get(index)

$(selector).index()

$(selector).size()

$(selector).toArray()