Rock N Code: [jQuery]jQuery的.add()方法

開發者不會滿足於透過jQuery取單一元素/值，多半需從龐大DOM中提取符合特定條件的元素，藉由.add()可取得更複雜的元素集合，且1.4版已經支援selector、element、html

■範例1：選取網頁內所有<div>與<span>元素

一般寫法
$('div,span')

使用.add()
$('div').add('span')

範例1還看不出.add()有別於多重selector的強大，接著來看範例2
■範例2：讓div與p元素擁有黃色背景色，且div元素還要帶紅色粗框

範例2的html
<!DOCTYPE html>
<html>
<head>
  <style>
 div { width:60px; height:60px; margin:10px; float:left; }
 p { clear:left; font-weight:bold; font-size:16px; 
     color:blue; margin:0 10px; padding:2px; }
 </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <p>Added this... (notice no border)</p>
<script>
$('div').css('border', '2px solid red')
        .add('p')
        .css('background', 'yellow');
</script>

</body>
</html>

範例2之Demo成果

思考一下Demo成果如何形成
1.先抓取所有div元素，指定border樣式為2px的紅色實線
2.再抓取所有p元素→此時元素集合包含所有div以及p元素！！！
3.針對此時的集合(所有div與p)，指定background為黃色
4.依照這個思考順序，因此...div元素有紅粗框+黃背景；
透過.add()比較晚被抓取出來的p元素則只有黃背景！

瞧瞧~~這種效果就不是單靠selector搭配，運算子(範例1)可輕易達成，但.add()方法快速協助我們取得較複雜的集合以進行其他操作！

參考網址http://api.jquery.com/add/

[jQuery]jQuery的.add()方法

沒有留言: