1. 程式人生 > >【JQuery】JQuery學習筆記:JQuery操作HTML,即JQuery DOM操作

【JQuery】JQuery學習筆記:JQuery操作HTML,即JQuery DOM操作

1,jQuery DOM操作,設定或獲得內容:   設定,在()內填入內容即可,有回撥函式;

  • text() - 設定或返回所選元素的文字內容
  • html() - 設定或返回所選元素的內容(包括 HTML 標記)
  • val() - 設定或返回表單欄位的值

2,jQuery DOM操作,設定或獲得屬性:    設定,在()內填入內容即可,有回撥函式;

  • attr() - 設定或返回表單欄位的值

3,jQuery DOM操作,新增元素:

  • append() - 在被選元素的結尾插入內容
  • prepend() - 在被選元素的開頭插入內容
  • after() - 在被選元素之後插入內容
  • before() - 在被選元素之前插入內容

     注:append/prepend 是在選擇元素內部嵌入。after/before 是在元素外面追加。

4,jQuery DOM操作,刪除元素:

  • remove() - 刪除被選元素(及其子元素)   引數可以填入選擇器,過濾被刪除的元素
  • empty() - 從被選元素中刪除子元素

5,jQuery DOM操作,獲取並設定CSS:

  • addClass() - 向被選元素新增一個或多個類
  • removeClass() - 從被選元素刪除一個或多個類
  • toggleClass() - 對被選元素進行新增/刪除類的切換操作
  • css() - 設定或返回樣式屬性   
  •    CSS設定:css({"propertyname
    ":"value","propertyname":"value",...}),可以多個值; 
  •    CSS獲取:css("propertyname");  通過屬性名獲取即可

6,jQuery DOM操作,尺寸操作:

  • width():設定或返回元素的寬度(不包括內邊距、邊框或外邊距)
  • height():設定或返回元素的高度(不包括內邊距、邊框或外邊距)
  • innerWidth():返回元素的寬度(包括內邊距)
  • innerHeight():返回元素的高度(包括內邊距)
  • outerWidth():返回元素的寬度(包括內邊距和邊框)
  • outerHeight():返回元素的高度(包括內邊距和邊框)