JQuery學習(二)

一、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 爲兩種相反的操作)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章