從零開始學jQuery（三）：元素的操作

在上一回的學習中灵嫌，我們認識了很多jQuery選擇器，學會了使用選擇器來選擇DOM元素葛作。那選好了元素之后我們要干啥呢寿羞？當然！就是要對元素進行各種操作嘍赂蠢。

操作網頁元素绪穆，最常見的需求是對它進行取值、賦值虱岂、移動和刪除操作玖院。特別的，jQuery允許我們使用同一個函數對網頁元素進行取值和賦值操作第岖，區(qū)別僅在于傳參不同难菌。需要注意的是，jQuery有很多的操作函數蔑滓，并不好記憶郊酒，但我們可以根據實際的操作需求來將它們分類遇绞，然后當我們在進行某個操作時就可以從中選擇最合適的函數×蔷剑基于此摹闽，我們可以將jQuery的元素操作函數分為4類：

取值&賦值
移動
刪除
其它

1. 取值&賦值

jQuery允許我們使用同一個函數來對元素進行取值和賦值操作，區(qū)別僅在于參數不同褐健。如果結果集包含多個元素付鹿，那么賦值的時候，將對其中所有的元素賦值蚜迅；取值的時候舵匾，則是只取出第一個元素的值（.text()例外，它取出所有元素的text內容）慢叨。
例如：.attr()
1）取值

// 取值操作
<!DOCTYPE html>
<html>
<head>
  <style>
  em { color:blue; font-weight:bold; }
  div { color:red; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>
    The title of the emphasis is:<div></div>
  <script>
  var title = $("em").attr("title");  //獲取title屬性的值
    $("div").text(title);
  </script>
</body>
</html>

效果：

2）賦值

// 賦值操作
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
// 為圖片改變alt屬性 和 添加title屬性
$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

其它常見的取值和賦值函數如下：

函數名	功能
.attr()	獲取匹配的元素集合中的第一個元素的屬性的值纽匙。設置每一個匹配元素的一個或多個屬性。
.val()	獲取匹配的元素集合中第一個元素的當前值拍谐。設置匹配的元素集合中每個元素的值。
.css()	獲取匹配元素集合中的第一個元素的樣式屬性的值馏段。設置每個匹配元素的一個或多個CSS屬性轩拨。
.html()	獲取集合中第一個匹配元素的HTML內容。設置每一個匹配元素的html內容院喜。
.text()	得到匹配元素集合中每個元素的合并文本亡蓉，包括他們的后代。設置匹配元素集合中每個元素的文本內容為指定的文本內容喷舀。
.prop()	獲取匹配的元素集中第一個元素的屬性（property）值砍濒。為匹配的元素設置一個或多個屬性（properties）。
.width()	為匹配的元素集合中的第一個元素計算寬度值硫麻。給每個匹配的元素設置CSS寬度爸邢。
.height()	獲取匹配元素集合中的第一個元素的當前高度值。設置每一個匹配元素的高度值拿愧。
.offset()	在匹配的元素集合中杠河，獲取的第一個元素的當前坐標，坐標相對于文檔浇辜。設置匹配的元素集合中每一個元素的坐標券敌，坐標相對于文檔。
.scrollLeft()	獲取匹配的元素集合中第一個元素的當前水平滾動條的位置柳洋。設置每個匹配元素的水平滾動條位置待诅。
.scrollTop()	獲取匹配的元素集合中第一個元素的當前垂直滾動條的位置。設置每個匹配元素的垂直滾動條位置熊镣。
.innerHeight()	為匹配的元素集合中的第一個元素計算高度值卑雁，包括padding立由，但是不包括border。設置匹配的元素集合中每個元素的高度值序厉。
.innerWidth()	為匹配的元素集合中的第一個元素計算寬度值锐膜，包括padding，但是不包括border弛房。設置匹配的元素集合中每個元素的寬度值道盏。
.outerHeight()	為匹配的元素集合中的第一個元素計算高度值，包括padding文捶，border和選擇性的margin荷逞。設置匹配的元素集合中每個元素的高度值。
.outerWidth()	為匹配的元素集合中的第一個元素計算寬度值粹排，包括padding种远，border和選擇性的margin。設置匹配的元素集合中每個元素的寬度值顽耳。

2. 移動

jQuery提供兩組方法來操作元素在網頁中的位置移動坠敷。一組方法是直接移動該元素，另一組方法是移動其他元素射富，使得目標元素達到我們想要的位置膝迎。
例如：假定我們要把一個div元素移到p元素的后面，有兩種方法胰耗。
方法一：使用.insertAfter()把div元素移動p元素后面限次。

$('div').insertAfter($('p'));

方法二：使用.after()把p元素加到div元素前面。

$('p').after($('div'));

兩種方法的效果一樣柴灯，卻有一個重大區(qū)別卖漫，就是它們返回的元素不一樣。第一種方法返回div元素赠群，第二種方法返回p元素羊始。

使用這種模式的操作方法總共有四對：

函數名	功能
.insertAfter() 和 .after()	在現存元素的外部，從后面插入元素乎串。
.insertBefore() 和 .before()	在現存元素的外部店枣，從前面插入元素。
.appendTo() 和 .append()	在現存元素的內部叹誉，從后面插入元素
.prependTo() 和 .prepend()	在現存元素的內部鸯两，從前面插入元素

3. 刪除

函數名	功能
.remove()	將匹配元素集合從DOM中刪除。（注：同時移除元素上的事件及 jQuery 數據长豁。）
.detach()	從DOM中去掉所有匹配的元素钧唐。（注：保存元素上的所有jQuery數據）
.empty()	從DOM中移除集合中匹配元素的所有子節(jié)點。（包括元素里的文本）
.removeProp()	為集合中匹配的元素刪除一個屬性（property）匠襟。
.removeAttr()	為匹配的元素集合中的每個元素中移除一個屬性（attribute）钝侠。
.removeClass()	移除集合中每個匹配元素上一個该园，多個或全部樣式。
.toggleClass()	在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類帅韧，即：如果存在（不存在）就刪除（添加）一個類里初。
.unwrap()	將匹配元素集合的父級元素刪除，保留自身（和兄弟元素忽舟，如果存在）在原來的位置双妨。

注：.remove()和.detach()的功能是一樣的，都是刪除匹配元素叮阅，區(qū)別在于.remove()會同時刪除元素上的jQuery數據刁品，而.detach()不刪除。

4. 其它

函數名	功能
.replaceWith()	用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合浩姥。
.replaceAll()	用匹配元素集替換每個目標元素挑随。
.clone()	創(chuàng)建匹配元素集的深層副本
.addClass()	為每個匹配的元素添加指定的樣式類名。
.hasClass()	確定任何一個匹配元素是否有被給定的（樣式）類勒叠。
.wrap()	在每個匹配的元素外層包上一個html結構/元素兜挨。
.wrapAll()	在所有匹配元素外面包一層HTML結構。
.wrapInner()	在匹配元素里的內容外包一層結構缴饭。
.position()	獲取匹配元素中第一個元素的當前坐標暑劝，相對于offset parent的坐標。( 譯者注：offset parent指離該元素最近的而且被定位過的祖先元素 )

按照“取值&賦值”颗搂、“移動”、“刪除”和“其它”的分類標準將jQuery的操作函數分類后幕垦，我們在使用的時候就可以根據實際需求快速地查找到合適的函數丢氢。當然，這里列出來的只是一些相對常用的函數先改，還有很多請參考jQuery官方文檔或者jQuery API 中文文檔疚察。

碼字不易，如果喜歡這篇筆記的話仇奶，記得點贊哦貌嫡！
如果需要轉載，也請注明出處：
作者：江江醬醬233
原文鏈接：http://www.reibang.com/p/b9e42917e01b

參考：
https://www.jquery123.com/
https://api.jquery.com/
http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html