選擇器 ( Selector ) 、過濾器 ( Filter )

• 包覆其他標籤的標籤稱為 ancestor，被包覆的標籤則稱為 descendant。

• jQuery 操作元素的技術主要運用選擇器 ( Selector ) 與過濾器 ( Filter )，採用與 CSS 相同的格式。

• 基本選擇器包含 ID 選擇器、class 選擇器、type 選擇器。
  範例：

// HTML
<h1 id="topic" class="basic"><a href="#"><span></span></a></h1>
<p><a href="http//tw.yahoo.com">gogogo</a></p>
<p>fire!</p>
<ul>
   <li></li>
   <li><a href="##"></a></li>
   <li class="special"></li>
</ul>

// jQuery
var a = $('#topic');  // ID 選擇器
var b = $('.basic');  // class 選擇器
var c = $('h1'); // type 選擇器

• 進階選擇器包含 後代( descendant )選擇器、子選擇器、屬性( attribute )選擇器、相鄰( adjacent )選擇器。
  範例：

var d = $('#topic span'); // 包含在 #topic 內的標籤可用
var e = $('#topic a'); // 包含在 #topic 內的子標籤可用(中間不可有其他標籤，否則不是父子結構)
var f = $('a[href]'); // 內含 href 屬性的 a 標籤都會被選中
var g = $('a[href="#"]') // href 屬性值為 # 的 a 標籤都會被選中
var h = $('a[href^="http"]') // href 屬性值"開頭"為 http 的 a 標籤都會被選中
var i = $('a[href$="com"]') // href 屬性值"結尾"為 com 的 a 標籤都會被選中
var j = $('a[href*="yahoo"]') // href 屬性值"中間"含 yahoo 的 a 標籤都會被選中
var k = $('h1 + p'); // 只會影響"gogogo"的段落

• 過濾器的用法是選擇器加上冒號，後面接過濾器名稱，主要用來篩選符合特殊條件的元素。
  範例：

$('li:even'); // 篩選出索引值為0、2、4..的 li (也就是第一、三、五..的 li 元素)
$('li:odd'); // 篩選出索引值為1、3、5..的 li (也就是第二、四、六..的 li 元素)
$('li:first'); // 篩選出第一個 li 
$('li:last'); // 篩選出最後一個 li
$('li:not(.special)'); // 篩選出所有li，但排除掉class為special的li
$('li:has(a)'); // 篩選出內含 a 標籤的所有li
$('a:contains(#)'); // 篩選出內含文字#的 a 標籤
// :hidden => 找出以 jQuery hide() 方法隱藏或 CSS 的 display 屬性為 none 的元素
// :visible => 與:hidden相反，找出可見的元素

• jQuery 有兩個特殊的原則：自動迴圈( automatic loop ) 及 鏈結函式( chaining function )。
  範例：

$('li').append('<p>Hello</p>') 
// 自動迴圈( automatic loop )
// 假設找到的 li 有3個，會自動以迴圈逐個增加<p>Hello</p>

$('#topic').width(200)
           .height(100)
           .text('I am topic'); 
// 鏈結函式( chaining function )
// 在函式後面再加上函式，這種鏈結的方法僅"選取一次元素"，效能較好