一、jQuery DOM 操作
1)獲得內容 :text()、html() 以及 val();
- text() 設置或返回所選元素的文本內容;(不返回html標記信息)
- html() 設置或返回所選元素的內容(包括 HTML 標記);
- val() 設置或返回表單字段的值;(一般用於返回表單信息進行表單驗證等操作)
2)獲取屬性 : attr();//常用方法,用於獲取屬性值。
3)設置元素內容 :text(“value”)、html(“value”) 以及 val(“value”);//設置內容以參數形式傳入即可
4)設置元素屬性 :attr("attrname",“attrvalue”); //對應屬性名和內容以參數形式傳入即可,參數格式爲json類型
5)添加新的 HTML 內容:append / prepend / after / before
- append() 在被選元素的結尾插入內容(尾插,作爲最後一個元素)
- prepend() 在被選元素的開頭插入內容(頭插,作爲第一個元素)
- after() 在被選元素之後插入內容(後插)
- before() 在被選元素之前插入內容(前插)
6)刪除元素/HTML 內容:empty / remove
jQuery remove() 方法刪除被選元素及其子元素。
jQuery empty() 方法刪除被選元素的子元素。
(前者都刪除,後者只是刪除子元素, remove() 方法也可接受一個參數,允許您對被刪元素進行過濾。)
7)操作 CSS:addClass / reoveClass / toggleClass
- addClass() 向被選元素添加一個或多個類;(元素添加 class 屬性,可以添加多個類以空格分隔)
- removeClass() 從被選元素刪除一個或多個類;(元素刪除 class 屬性,可以限定刪除類的名稱)
- toggleClass() 對被選元素進行添加/刪除類的切換操作;(元素添加或刪除 class 屬性)
- css() 設置或返回樣式屬性;
css("propertyname"); //返回首個滿足匹配名稱的css值
css("propertyname","value");//設置所有匹配名稱爲propertyname的值爲value
8)尺寸方法:width / height / innerWidth / innerHeight / outerWidth / outerHeight
- width():設置或返回元素的寬度(不包括內邊距、邊框或外邊距)。
- height():設置或返回元素的高度(不包括內邊距、邊框或外邊距)。
- innerWidth():返回元素的寬度(包括內邊距)。
- innerHeight():返回元素的高度(包括內邊距)。
- outerWidth():返回元素的寬度(包括內邊距和邊框)。
- outerHeight():返回元素的高度(包括內邊距和邊框)。
下圖爲元素寬/高度、內寬/高度、外寬/高度的示例:
二、DOM樹的遍歷(核心&重點)
jQuery 遍歷,意爲"移動",用於根據其相對於其他元素的關係來"查找"(或選取)HTML 元素。以某項選擇開始,
並沿着這個選擇移動,直到抵達您期望的元素爲止。(上行(祖先)、下行(孩子)、水平(兄弟)三種遍歷)
1)遍歷祖先:parent()返回選定元素的直接父元素;parents()返回選定元素的所有父元素,一直到根元素html
(也可限定結束元素位置);parentsUntil() 返回介於選定元素和約束元素之間的所有元素;
2)遍歷後代:children() 方法返回被選元素的所有直接子元素;find() 方法返回被選元素的後代元素,
一路向下直到最後一個後代。
3)遍歷兄弟:siblings / next / pre / nextAll / preAll
- siblings():返回被選元素的所有同胞元素。
- next():返回被選元素的下一個同胞元素。
- nextAll():返回被選元素的下面所有同胞元素。
- nextUntil():返回介於兩個給定參數之間的所有跟隨的同胞元素。
- prev():返回被選元素的前一個同胞元素。
- prevAll():返回被選元素的前面所有同胞元素。
- prevUntil():返回介於兩個給定參數之間的所有跟隨的同胞元素。
4)遍歷的過濾:基本的過濾方法是 first(), last() 和 eq()
first() 方法返回被選元素的首個元素。last() 方法返回被選元素的最後一個元素。
eq() 方法返回被選元素中帶有指定索引號的元素。(根據索引去尋找元素,類似於數組下標索引從0開始)
filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。(批量篩選)
not() 方法返回不匹配標準的所有元素。(相當於非操作)
(注: not 和 filter 爲兩種相反的操作)