- 選擇 HTML 屬性,使用標籤名稱:
1
example.hide('h2') //隱藏所有 <h2> 屬性
- 選擇特定 ID 的屬性,一個井字號,然後是 HTML 屬性的 ID:
1
example.hide('#London') //隱藏 id =“ London” 的屬性
- 選擇特定 class 的屬性,一個句點字符後跟 class 的名稱:
1
example.hide('.city') //隱藏所有帶有 class =“ city” 的屬性
- 選擇特定型態的屬性 (Type Selector) :
1
$('div') //對應到 <div></div>
- 選擇子屬性(Descendant selectors) :
1
$('.ex-class div') //使用空白表示階層關係
1
2
3<div class="ex-class">
<div>example</div> //取得此 div 屬性
</div> - 屬性選擇器 (Attribute Selector) :
1
$('[type=text]') //使用中括號包覆
1
<input type="text" > //取得 type 為 text 的
OR :
1
$('#ex-id, .ex-class') //使用逗號 (,) 隔開
1
2<div id="ex-id">id selector</div>
<div class="ex-class">class selector</div>AND :
如下1
2//多個選擇器連接在一起,表示網頁元素須同時滿足所有規格
$('.ex-class.ex-class2') //會找出同時擁有 ex-class 跟 ex-class2 的元件以下則是找出同時擁有 ex-class 和 ex-class2 的 div 元件1
<div class="ex-class ex-class2">class selector</div>
1
$('div.ex-class.ex-class2') //型態應該寫在最前面
.map (handler) :
1
2
3
4//將目前結果逐一送至 Handler 函式執行處理,並回傳陣列結果
var ids = $('li').map(function(index, element) {
return $('li').attr('id');
});.each (handler) :
1
2
3
4
5//將目前結果逐一送至 Handler 函式執行處理
$('li').each(function(index, element) {
// do something
// $(this) is also element
});