最近為了學習前端其他新的知識，特意重新複習了一遍jQuery，算是查漏補缺，把之前學習時忽略的知識點補回來順便也把一些知識點做了總結方便自己理解。

JQ的DOM操作分類
1.遍歷
（1）遍歷的介面：父級，後代，同胞兄弟（相鄰元素），過濾
（2）遍歷的結構設計  dir方法   each迭代器


1.1父級遍歷（即通過jQuery可以在DOM樹中向上遍歷）


（1）方法：
.parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素，從有序的向上匹配元素，並根據匹配的元素建立一個新的 jQuery 物件。


.parents()和.parent()方法是相似的，但後者只是進行了一個單級的DOM樹查詢


.parentsUntil() 方法會找遍所有這些元素的前輩元素，直到遇到了跟引數匹配的元素才會停止。返回的jQuery物件中包含了所有找到的前輩元素，除了與 .parentsUntil() 選擇器


匹配的那個元素。




1.2同級遍歷（即通過jq在同級元素之間進行元素查詢篩選）


（1）方法：
.nextAll() 獲得匹配元素集合中每個元素之後的所有同輩元素，由選擇器進行篩選（可選）。
.nextUntil() 獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素為止。
.prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。
.prevUntil() 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。
（以上的方法所獲得的jq物件都是不少於1個的）


.next() 獲得匹配元素集合中每個元素緊鄰的同輩元素。
.prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。
.siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。
（以上的方法所獲得的jq物件只能是一個）


1.3後代遍歷（包括直接子代，即允許向下遍歷，篩選查詢元素）


 （1）方法
.children()獲得匹配元素集合中的每個元素的子元素，選擇性篩選。（篩選出的是直接子代）
.find()返回被選元素的後代元素（篩選的是符合條件的後代元素）
都可以帶參（選擇器）指定性篩選。


1.4過濾（遍歷方法中包含過濾，如何理解兩者關係？遍歷是通過jq可以篩選DOM樹上所有的元素，而過濾即是查找出符合過濾方法的DOM元素）
（1）方法
.eq()匹配元素的集合，根據指定的索引查詢對應的元素。（篩選出的只有一個元素）
.first() 匹配元素集合中的第一個元素
.last()匹配元素集合中的最後一個元素
.gt()匹配大於指定條件的元素集合。
.lt()匹配小與指定條件的元素集合。
.filter()篩選元素集合中匹配表示式 或 通過傳遞函式測試的 那些元素集合。
.map()通過一個函式匹配當前集合中的每個元素,產生一個包含新的jQuery物件。
.slice()根據指定的下標範圍，過濾匹配的元素集合，並生成一個新的 jQuery 物件。
.not()從匹配的元素集合中移除指定的元素。即移除不滿足條件的元素並生成一個新的元素集合。
.has()判斷是否存在符合條件的元素.
.is()判斷當前匹配的元素集合中的元素，是否為一個選擇器，DOM元素，或者jQuery物件，如果這些元素至少一個匹配給定的引數，那麼返回true。


1.5其他遍歷（較少用到）
.add()新增元素到匹配的元素集合中。
.addBck() 新增堆疊中元素集合到當前集合，一個選擇性的過濾選擇器。
.andSelf()新增先前的堆疊元素集合到當前組合。
contents()獲得匹配元素集合中每個元素的子元素，包括文字和註釋節點.
.end()終止在當前鏈的最新過濾操作並返回匹配元素以前的狀態。


2.節點操作（即通過jq可以對DOM樹進行“增（插入），刪（移除），改（屬性操作）”等行為）


2.1插入（增加，通過jq提供的方法在DOM樹上不同位置插入節點）


方法：


（1）插入幷包裹現有內容：
.unwrap() 將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。 注意：unwrap()與remove()一樣，使用時都不帶參。
.wrap() 與unwrap()作用相反，在每個匹配的元素外層包上一個html元素。
.wrapAll()在所有匹配元素外面包一層HTML結構。
.wrapInner()在匹配元素裡的內容外包一層結構。


（2）插入現有內容裡
.append() 在每個匹配元素裡面的末尾處插入引數內容。
.appendTo()將匹配的元素插入到目標元素的最後面（譯者注：內部插入）。
.prepend()將引數內容插入到每個匹配元素的前面（元素內部）。
.prependTo()將所有元素插入到目標前面（元素內）。


注意區分append 、appendTo、prepend、prependTo
假設有A、B兩個元素（A為原本DOM結構中的節點，B為要插入的元素）


append :表示的在A的後面插入B。（$("A").append("B");）
appendTo：表示的將B插入到A的後面 。（$("B").appendTo("A");）
prepend：表示在A的前面插入B，A、B在同一個大的盒子中，屬於內部插入。（$("A").prepend("B");）
prependTo：表示將B插入到A 的前面 （$("B").prenpendTo("A");）




html():有兩個作用，獲取html內容以及設定html內容 
(1)當html()作為獲取html內容時，此時的html()不帶任何引數   獲取集合中第一個匹配元素的HTML內容。
(2)當html()作為設定html內容方法時，此時的html() 此時的引數可以是html結構、js建立的dom節點、在頁面建立好的元素的類。




text() 有兩個作用，獲取文字內容以及設定文字內容 
（1）當text()作為獲取文字內容時，此時text()不接受任何引數 得到匹配元素集合中每個元素的合併文字，包括他們的後代。
（2）當text()作為設定文字內容時，此時的text()可以接受任何形式的引數 （html結構，用js建立的dom節點等）




（3）插入到現有內容外
.before()根據引數設定，在匹配元素的前面插入內容（外部插入）.
.after() 在匹配元素集合中的每個元素後面插入引數所指定的內容，作為其兄弟節點。
在jQuery 1.4中, .before()和.after()同樣對脫離文件的DOM節點（注：脫離文件的DOM節點，即，可能時javascript動態建立的，還沒被插入到html文件中）有效。


.insertBefore() 在目標元素前面插入集合中每個匹配的元素(注：插入的元素作為目標元素的兄弟元素)。
<script>$("p").insertBefore("#foo"); // check before() examples</script> (此處程式碼的作用是將P元素插入到div元素前面作為div元素的兄弟節點)


.insertAfter()在目標元素後面插入集合中每個匹配的元素(注：插入的元素作為目標元素的兄弟元素)。
<script>$("p").insertAfter("#foo"); // check after() examples</script>  (此處程式碼的作用是將P元素插入到div元素後面作為div元素的兄弟節點)


2.2移除（刪除dom節點操作）
.detach()從DOM中去掉所有匹配的元素。
.empty()從DOM中移除集合中匹配元素的所有子節點。
.remove()將匹配元素集合從DOM中刪除。（注：同時移除元素上的事件及 jQuery 資料。）
.unwrap()將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。


注意區分：（1）detach、empty、remove三者之間的區別（從刪除操作執行之後dom結構。以及jquery資料角度來說）
detach：刪除了dom結構，但是jquery資料會保留。下次回撥資料仍然可以被調取。
empty：僅刪除元素節點，dom結構仍然保留。jquery資料也保留。
remove：dom結構連同jquery資料一併刪除。


（2）注：其中remove()常與append()方法成對出現（元素、資料插入之後再移除插入的元素、資料）
          unwrap()場與wrap()成對出現，也是插入之後再移除插入的資料、元素


2.3替換（修改）


方法：
（1）.replaceAll()用集合的匹配元素替換每個目標元素。
（2）.replaceWith()用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合。
注：replaceAll與replaceWitch的用法差不多，只是目標和源的位置不一樣。
假設A是源，B是目標
replaceAll：$("B").replaceAll ("A")
replaceWith：$("A").replaceWith("B")


2.4 class（類）屬性操作


方法：
.addClass() 為每個匹配的元素新增指定的樣式類名
.removeClass() 移除集合中每個匹配元素上一個，多個或全部樣式。
.toggleClass()在匹配的元素集合中的每個元素上新增或刪除一個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（新增）一個類。
.hasClass()確定任何一個匹配元素是否有被分配給定的（樣式）類。


2.5 通用屬性操作
方法：


.attr()
  作用：（1）作為獲取元素的作用時，獲取匹配的元素集合中的第一個元素的屬性的值。設定每一個匹配元素的一個或多個屬性。書寫為：.attr(attributeName 屬性名)
（2）設定每一個匹配元素的一個或多個屬性。設定元素時可以設定一個或者多個。.attr(attributeName,value)
.prop()獲取匹配的元素集中第一個元素的屬性（property）值為匹配的元素設定一個或多個屬性（properties）。
  作用：（1）作為獲取元素的作用時，獲取匹配的元素集合中的第一個元素的屬性的值。設定每一個匹配元素的一個或多個屬性。書寫為：.prop(attributeName 屬性名)
（2）設定每一個匹配元素的一個或多個屬性。設定元素時可以設定一個或者多個。.prop(attributeName,value)
.removeAttr()為匹配的元素集合中的每個元素中移除一個屬性（attribute）。
.removeProp()為集合中匹配的元素刪除一個屬性（property）。


.val()獲取匹配的元素集合中第一個元素的當前值。設定匹配的元素集合中每個元素的值。 


 作用：（1）用作獲取作用時，獲取匹配的元素集合中第一個元素的當前值。不匹配任何引數。
       （2）用作設定作用時，設定匹配的元素集合中每個元素的值。接收引數的形式 .val(value)或者.val(function(index,value))


注意：
（1）當attr用作取第一個匹配的元素時，只能取到一個，如果要取每個元素的屬性值時，應用迴圈的each()或者map().attr()方法只獲取第一個匹配元素的屬性值。要獲取每個單獨


的元素的屬性值， 我們需要依靠jQuery的 .each()或者.map()方法迴圈。


（2）若要檢索和更改DOM屬性,比如元素的checked, selected, 或 disabled狀態，請使用.prop()方法。


(3).attr()用作設定元素屬性的方法時。
.attr(attributeName,value) 可以分為3中種形式
.attr( attributeName, value )<屬性名，屬性值> eg：$('#greatphoto').attr('alt', 'Beijing Brush Seller');
.attr(attributes)<屬性-值的集合> 
 eg：$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});
.attr( attributeName, function(index, attr) )<屬性名，回撥函式>
eg：$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});


(4).attr()與.prop()作用，性質類似，主要的區別是.attr()獲取或者設定的是元素的屬性，prop()獲取或者設定元素特性
元素的attribute只能用attr()獲取或設定，proprietary只能用prop()獲取或者設定




(5).val()一般用作獲取或者設定表單元素（input、textare、radio。checkbox等值，因為像p、div等元素一般沒有value這個屬性，要獲取div、p當中的值、文字一般用text()或者


html()）




2.6樣式操作
方法：
.css()獲取或者設定一個或多個元素的樣式（css屬性）
作用：（1）用做獲取  .css（proprtyName  一個css屬性） .css(proptyNames 一個或多個css屬性陣列)
      （2）用做設定  用做設定  設定一個css屬性 .css("background","red");  設定多個css樣式 .css({"color":"green","border":"1px solid #dbdbdb"})


.width()
作用：（1）獲取元素寬度 不帶參
      （2）設定元素寬度 帶參 .width（value）/.width(function(index,width){})


.height
作用：（1）獲取元素高度 不帶參
      （2）設定元素高度 帶參 .height（value）/.height(function(index,width){})


同理.innerWidth、outerWidth、innerHeight、outerHeight  注意各自包括的範圍 （padding、margin、border）


.offset()
作用：
（1）.offset()獲取:在匹配的元素集合中，獲取的第一個元素的當前座標，座標相對於文件。注意，此方法不接受任何引數
 (2).offset()設定:設定匹配的元素集合中每一個元素的座標， 座標相對於文件。帶引數 .offset( coordinates )/.offset( function(index, coords) )


.position() 獲取匹配元素中第一個元素的當前座標，相對於offset parent的座標。( 譯者注：offset parent指離該元素最近的而且被定位過的祖先元素 ) 不帶引數。


注意：（1）.offset()方法允許我們檢索一個元素相對於文件（document）的當前位置。和.position()的差別在於：.position()是相對於相對於父級元素的位移。當通過全域性操作


（特別是通過拖拽操作）將一個新的元素放置到另一個已經存在的元素的上面時，若要取得這個新的元素的位置，那麼使用 .offset() 更合適。.offset()返回一個包含top 和 left


屬性的物件 。
（2）.position()方法可以取得元素相對於父元素的偏移位置。與.offset()不同, .offset()是獲得該元素相對於documet的當前座標 當把一個新元素放在同一個容器裡面另一個元


素附近時，用.position()更好用。


.position()返回一個包含 top 和 left屬性的物件.


.scrollTop()被捲進去的文件  常用與實現“頁面中某個div滑動到頂部固定的效果”
作用：
（1）獲取匹配的元素集合中第一個元素的當前垂直滾動條的位置或設定每個匹配元素的垂直滾動條位置。 不帶參
（2）設定每個匹配元素的垂直滾動條位置。.scrollTop(value)


.scrollLeft()被捲進去的文件 
作用:
(1)獲取匹配的元素集合中第一個元素的當前水平滾動條的位置或設定每個匹配元素的垂直滾動條位置。 不帶參
（2）設定每個匹配元素的水平滾動條位置。.scrollLeft(value)

以上的總結大都是自己的理解。錯誤之處還望有各位一起學習前端的小夥伴們指出。