Jquery對象的文檔處理，CSS和事件

 

文檔處理

append：向每一個匹配的元素內部追加內容。這個操做與對指定的元素執行appendchild方法，將它們添加到文檔中的狀況相似

<p>i would like to say</p>
$("p").append("<b>hello</b>");

結果:

[<p>i would liek to say:<b>hello</b></p>]

appendTo：把全部匹配的元素追加到另外一個指定的元素集合中。實際上，使用這個方法是顛倒常規的$(A).append(B)的操做，既不是把b追加到a中，而是把a追加到b中

<p>i would like to say:</p>
<div></div><div></div>
$("p").appendTo("div");

結果：

<div><p>i would like to say:</p></div>
<div><p>i would like to say:</p></div>

prepend;向每一個匹配的元素內部前置內容，這是向全部匹配元素內部的開始處插入內容的最佳方式

<p>i would like to say:</p>
$("p").prepend("<b>hello</b>");

結果：

[<p><b>hello</b>i would like to say:</p>]

prependTo:把全部匹配的元素前置到另外一個、指定的元素元素集合中.實際上，使用這個方法是顛倒了常規的$(A).prepend(B)的操做，即不是把B前置到A中，而是把A前置到B中。

<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");

結果：

<div id="foo"><p>I would like to say: </p></div>

after:在每一個匹配的元素以後插入內容

<p>i would like to say:</p>
$("p").after("<b>hello</b>");

結果：

<p>i would like to say:</p><b>hello</b>

before:在每一個匹配的元素以前插入內容

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");

結果：

<b>Hello</b><p>I would like to say: </p>

insertafter：把全部匹配的元素插入到另外一個、指定的元素元素集合的後面。 實際上，使用這個方法是顛倒了常規的$(A).after(B)的操做，即不是把B插入到A後面，而是把A插入到B後面。

<p>i would like to say:</p><div id="foo">hello</div>
$("p").insertAfter("#foo");

結果:

<div id="foo">Hello</div><p>I would like to say: </p>

insertBefore:把全部匹配的元素插入到另外一個，指定的元素集合前面。實際上，使用這個方法是顛倒了常規的$(A).before(B)的操做，即不是把B插入到A前面，而是把A插入到B前面。

<div id="foo">hello</div><p>i would like to say:<p>
$("p").insertBefore("#foo");

結果

<p>i would like to say:</p><div id-"foo">hello</div>

replacewidth:將全部匹配的元素替換成指定的HTML或DOM元素

<p>Hello</p><p>cruel</p><p>World</p>
$("p").replaceWidth("<b>Paragraph. </b>")

結果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

replaceAll:用匹配的元素替換掉全部 selector匹配到的元素。
empty():刪除匹配的元素集合中全部的子節點。

<p>Hello, <span>Person</span> <a href="#">and person</a></p>  
$("p").empty();

結果：

<p></p>

remove([expr]):從DOM中刪除全部匹配的元素。 這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。但除了這個元素自己得以保留以外，其餘的好比綁定的事件，附加的數據等都會被移除。

<p>Hello</p> how are <p>you?</p>
$("p").remove();

結果：

how are

detach([expr])：從DOM中刪除全部匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來。

<p>Hello</p> how are <p>you?</p> 
$("p").detach();

結果：

how are

clone([Even[,deepEven]]):克隆匹配的DOM元素而且選中這些克隆的副本。在想把DOM文檔中元素的副本添加到其餘位置時這個函數很是有用

<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p");

結果

<b>Hello</b><p><b>Hello</b>, how are you?</p>

CSS

css：訪問匹配元素的樣式屬性
name-要訪問的屬性名稱，properties-要設置爲樣式屬性的名值對，name/value-屬性名，屬性值

$("p").css("color");
$("p".css({color:"#ff0011",background:"blue"});

offset:獲取匹配元素在當前視口的相對偏移。返回的對象包含兩個整型屬性：top和left。此方法只對可見元素有效

position：獲取匹配元素相對父元素的偏移。 返回的對象包含兩個整型屬性：top 和 left。爲精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。

scrollTop([val])：獲取匹配元素相對滾動條頂部的偏移。此方法對可見和隱藏元素均有效（設定垂直滾動條值）

scrollLeft([val])：獲取匹配元素相對滾動條左側的偏移。 height([val|fn]):取得匹配元素當前計算的高度值（px）。 width([val|fn]):取得匹配元素當前計算的寬度值（px）。

$("p").width(20);

innerHeight(),innerWidth(),outerHeight([options]),outerWidth([options]):前兩個是獲取匹配元素的內部區域高度和寬度（包括補白，不包括邊框），後面兩個是獲取匹配元素的 外部高度和寬度（包括補白和邊框）， 後面兩個的默認值是false，設置爲true時，計算邊距在內

事件

ready（fn）:當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，由於它能夠極大地提升web應用程序的響應速度。簡單地說，這個方法純粹是對向window.load事件註冊事件的替代方法。經過使用這個方法，能夠在DOM載入就緒可以讀取並操縱時當即調用你所綁定的函數，而99.99%的JavaScript函數都須要在那一刻執行。有一個參數－－對jQuery函數的引用－－會傳遞到這個ready事件處理函數中。能夠給這個參數任意起一個名字，並所以能夠再也不擔憂命名衝突而放心地使用$別名。請確保在 元素的onload事件中沒有註冊函數，不然不會觸發+$(document).ready()事件。能夠在同一個頁面中無限次地使用$(document).ready()事件。其中註冊的函數會按照（代碼中的）前後順序依次執行。

$(document).ready(function(){})
$(function(){})

on:在選擇元素上綁定一個或多個事件的事件處理函數。on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。
events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。 selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。若是選擇的< null或省略，當它到達選定的元素，事件老是觸發。 data:當一個事件被觸發時要傳遞event.data給事件處理函數。 fn:該事件被觸發時執行的函數。 false 值也能夠作一個函數的簡寫，返回false。

$("p").on("click",function(){
alert($(this).text())});  
function myHanlder(){
alert(event.data.foo);
}
$("p").on("click",{foo:"bar"},myHanlder);

off(events,[selector],[fn]):在選擇元素上移除一個或多個事件的事件處理函數.off() 方法移除用.on()綁定的事件處理程序。當有多個過濾參數，所提供的參數都必須匹配的事件處理程序被刪除. 要刪除特定的委派事件處理程序，提供一個selector 的參數。選擇器字符串必須是徹底匹配遞到.on()事件處理程序附加的選擇器。要刪除非委託元素上的全部事件，使用特殊值 "**" 。和.on()同樣，你能夠傳遞一個 events-map>參數明確的指定而不是用events 和 handler做爲單獨參數。鍵事件和/或命名空間;值是處理函數或爲false的特殊價值。
events:一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，好比"click", "keydown.myPlugin", 或者 ".myPlugin". selector:一個最初傳遞到.on()事件處理程序附加的選擇器。 fn:事件處理程序函數之前附加事件上，或特殊值false.

$("p").off();
$("p").off("click","**");

bind(type,[data],fn):爲每一個匹配元素的特定事件綁定事件處理函數。

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

同時綁定多個事件類型

$("#foo").bind('mouseenter mouseleave',function(){
$(this).toggleClass('entered')});

one(type,[data],fn):爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每一個對象上，這個事件處理函數只會被執行一次。其餘規則與bind()函數相同。這個事件處理函數會接收到一個事件對象，能夠經過它來阻止（瀏覽器）默認的行爲。若是既想取消默認的行爲，又想阻止事件起泡，這個事件處理函數必須返回false。 unbind(type,[data|fn]]):bind()的反向操做，從每個匹配的元素中刪除綁定的事件。 live(type, [data], fn):jQuery 給全部匹配的元素附加一個事件處理函數，即便這個元素是之後再添加進來的也有效。這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而之後再添加的元素則不會有。爲此須要再使用一次 .bind() 才行。 die(type, [fn]):從元素中刪除先前用.live()綁定的全部事件.(此方法與live正好徹底相反。)若是不帶參數，則全部綁定的live事件都會被移除。若是提供了type參數，那麼會移除對應的live事件。若是也指定了第二個參數function,則只移出指定的事件處理函數。

function aClick(){
    $("div").show().fadeOut('slow');
}
$("#unbind").click(function(){
    $("#theone").die("click",aClick);
});

hover([over,]out):一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它爲頻繁使用的任務提供了一種「保持在其中」的狀態。

toggle([speed],[easing],[fn]):用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。 speed: 隱藏/顯示 效果的速度。默認是 "0"毫秒。可能的值：slow，normal，fast。" easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear" fn:在動畫完成時執行的函數，每一個元素執行一次。 blur([[data],fn]):觸發每個匹配元素的blur事件。這個函數會調用執行綁定到blur事件的全部函數，包括瀏覽器的默認行爲。能夠經過返回false來防止觸發瀏覽器的默認行爲。blur事件會在元素失去焦點的時候觸發，既能夠是鼠標行爲，也能夠是按tab鍵離開的

$("p").blur();

change([[data],fn]):觸發每一個匹配元素的change事件
click([[data],fn]):觸發每個匹配元素的click事件。這個函數會調用執行綁定到click事件的全部函數。

$("p").click();

focus([[data],fn]),keydown([[data],fn]):分別是觸發每個匹配元素的focus事件。和觸發每個匹配元素的keydown事件 scroll([[data],fn])：在每個匹配元素的scroll事件中綁定一個處理函數。 select([[data],fn])：觸發每個匹配元素的select事件。這個函數會調用執行綁定到select事件的全部函數，包括瀏覽器的默認行爲。能夠經過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。 submit([[data],fn])：觸發每個匹配元素的submit事件。這個函數會調用執行綁定到submit事件的全部函數，包括瀏覽器的默認行爲。能夠經過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。 unload([[data],fn])：在每個匹配元素的unload事件中綁定一個處理函數。 mousedown（），mouseenter（），mouseleave（），mousemove（），mouseout（），mouseover（）：是一連串的鼠標事件，觸發 匹配元素的mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover事件中綁定一個處理函數

$("button").mousedown(function(){
$("p").slideToggle();});

$("p").mouseenter(function(){
    $("p").css("background-color","yellow");
})                                          

$("p").mouseleave(function(){
    $("p").css("background","#e9e9e4");
})

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

$("p").mouseout(function(){
    $("p").css("background-color","#e9e9e4");
})

$("p").mouseover(function(){
    $("p").css("bakcground-color","yellow");    
})

$("button").mouseup(function(){
    $("p").slideToggle();qaz123
})

resize([[data],fn]):在每個匹配元素的resize事件中綁定一個處理函數。

效果

show(),hidden():顯示隱藏的匹配元素和隱藏顯示的匹配元素 toggle:用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。
slidDown(),slideUp(); 經過高度變化（向下增大）來動態地顯示全部匹配的元素，在顯示完成後可選地觸發一個回調函數。以及向上增大動態顯示全部匹配的元素。動畫只調整元素的高度，可使匹配元素以滑動的方式顯示出來

$(".btn2").click(function(){
$("p").slideDown();
});

$("p").slideDown("slow");

fadeIn，fadeOut，fadeToggle，fadeTo，****這四個只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化
animated:用於建立自定義動畫的函數 stop：中止全部在指定元素上正在運行的動畫

$("#stop").click(function(){
$("#stop").stop();})