jQuery屬性操作

設定或獲取元素固有屬性值prop()

所謂元素固有屬性就是元素本身自帶的屬性，比如<a>元素裡面的href，在比如<input>元素裡面的type。

獲取屬性語法

prop('屬性')

設定屬性語法

prop('屬性','屬性值')

設定或獲取元素自定義屬性值attr()

使用者自己給元素新增的屬性，我們稱為自定義屬性。比如geidiv新增 index='1'。

獲取屬性語法

attr('屬性') // 類似於原生getAttribute()

設定屬性語法

attr('屬性','屬性值') // 類似原生setAttribute()

資料快取 data()

data() 方法可以在指定的元素上存取資料，並不會修改DOM元素結構。一旦頁面重新整理，之前存放的資料都將被移除。

附加資料語法

data('name','value') // 向被選元素附加資料

獲取資料語法

data('name') // 向被選元素獲取資料

\(jQuery\) 內容文字值

普通元素內容html()（相當於原生的innerHTML）

html() // 獲取元素的內容

html('內容') // 設定元素的內容

普通元素文字內容text() （相當於原生的innerText）

text() // 獲取元素文字內容

test('文字內容') // 設定元素文字內容

表單的值val()（相當於原生的value）

val() // 獲取屬性值

val(屬性值) // 設定屬性值

\(jQuery\) 元素操作

遍歷元素

jQuery隱式迭代是對同一類元素做了同樣的操作。如果想要給同一類元素作不同的操作，就需要用到遍歷。

語法一

$('div').each(function(index,domEle){ ... })

1. each()方法遍歷匹配的每一個元素。主要用DOM處理。each每一個
2. 裡面的回撥函式由兩個引數：index是每個元素的索引號；demEle是每個DOM元素物件，不是jQuery物件。
3. 所以想要使用jQuery方法，需要給這個DOM元素轉為jQuery物件$(domEle)
   
   

語法二

$.each(object,function(index,element){ ... })
 

1. $.each()方法可用於遍歷任何物件。主要用於資料處理，比如陣列，物件。
   2.裡面的函式由兩個引數：index是每個元素的索引號；element遍歷內容
   
   

建立元素

語法：

$("<li></li>");

動態建立一個<li>

新增元素

內部新增

element.append(element) // 把內容放入匹配元素內部最後面，類似原生appendChild。

element.prepend(element) // 把內容放入匹配元素內部最前面

外部新增

element.after(element)  // 把內容放入目標元素後面

element.before(element) // 把內容放入目標元素前面

刪除元素

element.remove() // 刪除匹配元素本省

element.empty()  // 刪除匹配元素集合中所有的子節點

element.html('') // 清空匹配元素的內容

\(jQuery\) 尺寸、位置操作

\(jQuery\) 尺寸

\(jQuery\)位置

位置主要有三個：offset()、position()、scrollTop()/scrollLeft()

offset()設定或獲取元素偏移

1. offset()方法設定或返回被選元素相對於文件的偏移座標，跟父級沒有關係。
2. 該方法有兩個屬性left、top。offset().top 用於獲取距離文件頂部的距離，offset().left使用者獲取距離文件左側的距離。
3. 可以設定元素的偏移，例如：offset({top:10,left:30})

position() 獲取元素偏移

position()方法用於返回被選元素相對於帶有定位的父級偏移座標，如果父級都沒有定位，則以文件為準。

scrollTop()/scrollLeft()設定或獲取元素被捲去的頭部和左側

scroll()方法設定或返回被選元素被捲去的頭部。