JQ & HTML
JQ作為一個JS庫，很好地繼承了JS和HTML互動的特點，並且還給出了包裝得更好，操作層次更高的方法。和之前JQ的內容一樣，方法的表現形式是$(selector).action()。下面根據操作分類來進行一些羅列
■ 文檔 & 屬性操作
● 獲得/設置內容
text(...) 當沒有參數時返回被選元素的文本內容，當設置有參數時指設置被選元素的內容為參數值
html(...) 和text類似，只不過獲取/設置的對象是html代碼
val(...) 用於獲取/設置表單中輸入框的值
● 屬性操作
attr("attribute") 返回被選元素某個屬性的值，如果選擇到多個元素就返回第一個匹配元素的相關值。
attr("attribute","value") 設置所有被選元素某個屬性的值，如果需要設置多個屬性的值，可以傳進一個對象（{"attribute1":"value1","attribute2":"value2"...}）作為參數
removeAttr("attribute") 刪除被選元素的一個屬性
addClass("className") 向被選元素添加一個class，其類名是className
removeClass("className") 刪除指定被選元素的一個class，如果參數為空則刪除所有類
toggleClass("className"[, switch]) 如果被選元素有名為className的類，就刪除之，如果沒有則添加之。switch設置為true時只添加不刪除，false時只刪除不添加。
以上三個類相關的方法中，"className"這個位置的參數也可以換成一個函數function(index,class)。規定這個函數必須返回需要添加或刪除的一個或多個類名。
hasClass("className") 檢查是否含有指定的那個類
除了attr之外，在比較新的jquery版本中還引入了一種新的屬性操作方法，prop。prop和attr的區別在於，attr主要用於設置/獲取我們自定義的屬性，而prop則主要針對那些html自帶的屬性。比方說用jquery獲取一個checkbox的input是否被選中了。我記得在另外文我提到過可以用$(element).is(':checked')，這固然是一種辦法，不過略僵硬。更加好的辦法可以這樣:
$('input[type=checkbox]').prop('checked')，設置可以通過prop('checked',true/false)來進行
類似的，select，radio等組件也可以通過prop而非attr來進行設置
● 添加元素
append(...) 在元素末尾，在元素內部增加若干個新元素，新元素可以以html代碼、jQuery創建的新元素對象，JS創建的新元素對象等形式體現，並且各個新元素間用逗號隔開。比如：
function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 創建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 創建新元素 var txt3=document.createElement("p"); // 以 DOM 創建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }
prepend(...) 在元素開頭，在元素內部增加若干個新元素，同上
after(...) 在元素后面追加若干新元素，新元素和被選元素是並列關系，新元素的形式也是以上三種方式。
before(...) 在元素前追加若干新元素。。
insertAfter(...) 這個略微特殊一些。之前的所有方法都是選定一個元素后在這個元素的周邊一些位置進行新增元素的操作，且新元素由方法的參數指明。但是這個方法選定元素和方法參數都是選擇器，即$(selector1).insertAfter(selector2)。這個的意思就是說，把selector1選中的所有元素作為新增元素移動到selector2選中的所有元素后面。同時，被selector1選中元素從原來的位置被刪除。實例：
*注意點：前面的selector里要是寫的就是html代碼的話那么可以往selector2指定的元素周邊增加上一個新元素了。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1,h2").insertAfter("p"); }); }); </script> </head> <body> <h1>title1</h1> <h2>title2</h2> <p>paragraph1</p> <p>paragraph2</p> <button>在每個 p 元素之后插入 h1與h2 元素</button> </body> </html>
點擊按鈕后，新的段落順序是paragraph1,title1,title2,paragraph2,title1,title2。感受一下。。
insertBefore(...) 和前者相反
appendTo(...) 和上面兩個一樣，前后兩個selector，當然和insert不同是插入在selector2選中元素內部的末尾
preappendTo(...) 和上者相反
● 替換元素
replaceWith(...) 將被選中的元素替換成參數中的一段html代碼所代表的內容,另外參數可以是一個函數，返回一些內容。
$(content).replaceAll(selector) replaceAll的格式和經典的$(selector).action不同，它把content放在方法前面，就是說把selector選中的元素替換成content的內容，相當於和replaceWith的參數順序反了反。另外replaceAll不能用函數作為參數
● 刪除元素
detach() 從DOM中刪除所有匹配的元素,但是在jQuery中會保留下這些元素的所有性質，包括綁定的事件和其他數據。
empty() 刪除被選中元素的所有子節點，注意：文本也屬於其所屬節點的子節點（所謂文本節點）。所以$("p").empty()會刪掉所有p里面的文字的
remove() remove也是從DOM中刪除元素，和detach的不同在於它在刪除DOM中的元素后再jQuery中只保留元素對象本身而不保留綁定的事件等其他數據。
$("button").click(function{alert("Message Ari!")});
var temp = $("button").detach() //detach有返回值，是因為所有不是獲取類的jQuery方法都會返回this
$("body").append(temp[0]) //加下標0是因為之前得到的temp是個jQuery對象，其通過下標訪問來得到具體的DOM節點
//此時點擊按鈕仍然會跳出提示框來
var temp = $("button").remove()
$("body").append(temp[0])
//此時點擊按鈕不會有反應，因為remove的時候把事件等也一起從button上刪掉了
● 包裹元素
wrap(wrapper) 將被選中元素用wrapper包裹起來。wrapper通常是個可以盛放別的東西的容器元素比如div,span之類的。然后wrapper可以用html代碼表示也可以用JS/JQ代碼創建的新元素，還可以是JQselector選出的一些元素（現有的元素）。比如$("p").wrap("<div></div>")。當選擇器選到的不止一個元素的情況，每個被選中的元素都會單獨得被一個單獨的wrapper包裹起來。
unwrap() 解開元素的包裹，即刪除所有被選中元素的父元素。
wrapAll(wrapper) 將所有被選中元素包裹在一個wrapper中,如果被選中的元素不是連續的話，那么就把所有元素的在文檔流中的位置聚集到第一個匹配的元素的位置，然后在那個位置進行包裹。
● 復制元素
clone(withEvents) 復制一份所有被選中元素的副本，withEvents是一個boolean，默認是false，其控制副本是不是也復制原元素的事件和事件處理函數等屬性。
■ 外觀變化操作
● CSS操作
JQ可以對CSS做出調整。說到CSS調整，最先想到的就是通過類的變化來調整了，那么通過類的變化在上面對類的操作方法中都已經提過了，就不在多提了。
如果想要對CSS做出更加靈活細致的調整，可以用css()方法。和前面一些方法一樣，css()方法有兩種形式的使用，當只對單一的CSS屬性作調整時只要用css("attribute","value")即可，如果要對多個CSS屬性作調整那么就需要css({"attribute1":"value1","attribute2":"value2"})這樣的object作為參數的方式。
*為防混淆，特意再提下JQ動畫方法animate中的屬性設置。之前在JQ基礎篇中提到過，animate方法也是接受一個object作為參數，且它有幾個要注意的地方（http://www.cnblogs.com/franknihao/p/6682810.html）。這些注意點中的一部分，放到css()方法中也是通用的。比如屬性名沒有引號引起來的話要用駝峰形式寫，屬性值要用引號引起來。總之需要記住，這里的object類型的參數，雖然看起來和CSS樣式表都有大括號長得很像，但是完全是語法不同的兩個東西。
下面給出一個實例：
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css({backgroundColor:"yellow","font-size":"200%","padding":"10px"}); }); }); </script> </head> <body> <h2>這是標題</h2> <p style="background-color:#ff0000">這是一個段落。</p> <p style="background-color:#00ff00">這是一個段落。</p> <p style="background-color:#0000ff">這是一個段落。</p> <p>這是一個段落。</p> <button>為 p 元素設置多個樣式</button> </body> </html>
● 尺寸操作
JQ另一個可操作的東西就是尺寸了。JQ不僅可以獲取設置窗口的尺寸，也可以對元素進行尺寸操作。（之前應該也說過，如果選擇窗口就是$(window)即可）
width(...) 有參數就設置，無則獲取被選物寬度
height(...) 設置/獲取被選物高度
innerWidth,innerHeight()
outerWidth,outerHeight() 不多說了。。
scrollLeft(...) 設置或獲取被選元素相對滾動條左側的位移（如果是設置，相當於是自動滾動滾動條咯？）
scrollTop(...) 設置或獲取被選元素相對於滾動條頂側的位移
jQuery 遍歷
遍歷方法，是指通過調用一個方法來得到一些和當前元素有特殊關系的元素。當然有時候被選元素有許多具備這種關系的其他元素，這時候我們的方法得到的就是一個相關元素的元素集合。在選出這樣一個集合之后直接調用一些方法，可以把這個方法應用到這個集合中的所有元素身上。這是因為大多JQ方法都是自帶遍歷性質的。例子，比如$("p").parents().css({"color":"red"})會讓所有p元素的所有前輩元素都變成紅色。
在JQ中遍歷，往往是鏈式調用的，一般的模式就是$(selector).action1().action2().action3()...每個action可以對當前的選擇結果集合的堆棧做出增刪改，最后來一個總結的action_final，這個才是真正的操作，統一對修改過后的選擇結果集合中所有選擇結果進行統一的實質性的操作。
■ 對前輩的遍歷
即向上遍歷元素。向上遍歷元素主要用到的方法是:
parent() 返回被選元素的父元素
parents() 返回所有被選元素的前輩元素。
parentsUntil(s) 返回從被選元素的父元素開始到s這個選擇器指定的某個前輩元素為止，之間的所有前輩元素。
■ 對后輩的遍歷
即向下遍歷
children() 返回被選元素的所有子元素。
find(s) 返回被選元素的所有匹配s選擇器的后輩元素
■ 對同輩的遍歷
即水平遍歷
siblings() 返回被選元素的所有同輩元素
next() 返回被選元素的下一個同輩元素，如果被選元素已經是最后一個同輩元素了，自然就沒有next()了，返回一個空對象
nextAll() 返回被選元素之后的所有同輩元素
nextAllUntil(s) 返回被選元素后一個開始到s這個選擇器匹配的元素為止，之間的所有同輩元素
和next系列三個方法類似的還有prev(),prevAll(),prevAllUntil()三個方法，不在贅述。
■ 對選擇結果的過濾
JQ自帶一些過濾方法，可以對選擇器得到的結果進行過濾。所以過濾方法不僅僅局限於遍歷出來的結果，也適用於普通情況下選擇器選擇出來的結果。所以，把這一節放到遍歷的章里面不太合理。。有如下基本的過濾方法：
first() 返回選擇結果中的第一個元素，相當於var selection = $(selector);var result = selection[0]的意思吧
last() 最后一個。。
eq(n) 返回被選元素的返回結果中index是n的那個元素。
*這里我想提一句。。要搞清楚JS中元素對象和JQ中元素對象的區別。從形式上來說，console.log(JSobject)得到的就是一個標簽，而console.log(JQobject)得到的會是一個像字典一樣的東西，而其中有一些item是index:JSObject。（相當於JQ的元素對象把一個JS元素對象封裝，同時還增加了一些其他的指標）。從功能上說，JSobject的操作要遵照原生的JS規則，比如想要改背景色應該JSObject.style.backgroundColor = xxx，但是JQObject可以調用JQ方法比如css({"background-color":"yellow"})。在eq(n)中，返回的依然是JQ對象，所以可以$("p").eq(1).css(xxx)但是不能$("p")[1].css(xxx)而應該$("p")[1].style.backgroundColor=xxx。其他的JQ方法也是，返回的對象都是JQ對象而不是JS對象。
JQ對象可以用.get()方法來轉換成一個數組，這樣也就是轉換成一個JS對象
filter(selector) filter方法參數也是一個選擇器，意思是進行雙重選擇，從第一個選擇器的選擇結果中再選擇一次。
not(selector) 對第一個選擇器選擇得到的結果進行反選
■ 其他一些遍歷中可以用的方法（http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp）
andSelf() 之前的遍歷方法，基本上是先定位一些元素再以這些元素為起點找其他元素。這樣就導致最后得到的選擇結果中，最開始定位器定位到的那些元素不被包括在內。andSelf方法的作用就是把最開始定位器選擇到的元素也加入到選擇結果的堆棧中
add() add方法可以手動地給選擇結果堆棧加入一些元素。之前的所有遍歷方法，都只能有一個選擇器，如果想要額外地讓其他一些元素也被選中，那么就需要另寫一條語句，而add方法可以讓你直接在這條語句里解決，比如$("div").add("p").css(xxx)這樣就可以在一條語句里同時對所有div和p改變CSS。（當然就這個實例而言你可以$("div,p")，在這我只是想說明add方法的意思）
each(func) 對多個被選元素中的每一個執行一次func函數。
end() end方法可以讓最近的一個選擇/定位操作失效從而讓整個堆棧返回到更久之前的狀態。end方法可以讓整個動作鏈更加自然，比如$(selector).find(selector2).css(xxx).end().find(selector3).css(xxx)，第一個css方法旨在改變selector2選擇到的那些元素的CSS，然后調用end讓find(selector2)失效，把堆棧重回最開始的selector狀態，然后在find(selector3)，把selector3匹配的元素的CSS變化掉。
is(selector) is方法參數是一個selector，其作用是檢查前面的selector選擇出來的結果是否也能匹配這個參數selector，返回true/false
map(func(index,object)) map方法參數是第一個函數，將selector選擇到的結果中一個個元素傳遞給函數func，然后將返回結果一一放入一個JQ對象，map方法返回這個對象。可以通過調用get()方法來把這個對象轉化成一個JS數組然后在處理這個數組。參數func的兩個參數，index代表當前遍歷元素的index是多少，object代表當前遍歷元素的對象。