jQuery (一、基本選擇器)
目標：
1、瞭解jQuery有哪些選擇器
2、熟悉基本選擇器、層級選擇器和屬性選擇器的使用
大綱：
一、 jQuery選擇器簡介
1） jQuery是一個以css選擇器為核心的JavaScript庫
2） jQuery支援css規範1到3的幾乎所有選擇器
3） 它降低了學習的門檻
4） 編碼時。我們往往需要首先使用選擇器選擇元素，然後再對其進行操作
二、 jQuery選擇器的分類
1） 基本選擇器
2） 層級選擇器
3） 屬性選擇器
4） 過濾選擇器
5） 表單選擇器
1、 基本選擇器
1）#id 這就是id選擇器，舉例：
$(‘#aa’)它將會返回id值為aa的第一個元素的jQuery物件
注意：如果文件中包含多個id值為aa的元素，它也只會返回第一個
2）element這就是元素選擇器，舉例：
$(‘button’)它將會返回文件中所有button元素的jQuery物件
3）.class這就是類選擇器，舉例：
$(‘.cc’)它將會返回所有的class屬性值為cc的元素jQuery物件
4）* 這就是通配選擇器，舉例：
$(‘*’)它將返回文件中所有的元素
5）selector1, selector1, selectorN 這就是群組選擇器，舉例：
$(‘#aa,.cc’)它將返回id值為aa的第一元素，並且會返回class屬性值為cc的所有元素
2、層級選擇器
1) ancestor descendant後代選擇器，例如：
$(‘.sports.football’)它將返回class為sports的元素後代中所有的class為football的元素
2) Parent>child子選擇器，例如：
$(‘.sports>li’)它將返回class為sports的子元素中所有的li元素
3）prev + next緊接下一個元素選擇器，例如：
$(‘.sports+li’)它將返回class為sports的緊接著的下一個li元素
5）prev~siblings 選擇以後的所有兄弟元素，例如：
$(‘.sports~li’)它將返回class為sports的兄弟元素中的li元素
3、 屬性選擇器
1）[attribute] 選取包含某個屬性的元素，例如：
$(‘[type]’)它將返回包含屬性type的所有元素
2）[attribute] 選取屬性值為特定值的元素，例如：
$(‘[type=”ccc”]’)它將返回屬性type的值為ccc的所有元素
3）[attribute!=value] 選取屬性值不為特定值的元素，例如：
$(‘[type !=“aaa”]’)它將返回屬性type的值不為aaa的所有元素
4）[attribute^=value] 選取屬性值以某個值開頭的元素，例如：
$(‘[type^=“ccc”]’)它將返回屬性type的值以cc開頭的所有元素
5）[attribute$=value] 選取屬性值以某個值結尾的元素，例如：
$(‘[type$=“ee”]’)它將返回屬性type的值以ee結尾的所有元素
6）[attribute*=value] 選取屬性值包含某個值的元素，例如：
$(‘[type*=“o”]’)它將返回屬性type的值中包含o的所有元素
7）[attrSel1][attrSel2][attrSelN] 選取同時符合多個條件的元素，例如：
$(‘[class][type^=”c”]’) 它將返回有class屬性，並且type屬性值以c開頭的所有元素
4、過濾選擇器
A、基本過濾選擇器
1）：first 選取第一個元素，例如：
$(‘tr:first’)返回第一個tr元素
2）：last選取最後一個元素，例如：
$(‘tr:last’)返回最後一個tr元素
3）：not(selector)去除與給定選擇器匹配的元素，例如：
$(‘tr:not(“.new”)’)首先選擇所有的tr元素，然後取出其中包含class值為new的tr元素
4）：even選取索引值為偶數的元素，例如：
$(‘tr:even’)返回索引值為偶數的所有tr元素
5）：odd 選取索引值為奇數的元素，例如：
$(‘tr:odd’)返回索引值為奇數的所有tr元素
6）：eq（index）選取索引值為特定值的元素，例如：
$(‘tr:eq(0)’)返回索引值為0的tr元素，實際上與$(‘tr:first’)效果一樣
7）：gt(index)選取索引值大於某個特定值的元素，例如：
$(‘tr:gt(1)’)返回索引值大於1的所有tr元素
8）：lt（index）選取索引值小於某個特定值的所有元素， 例如：
$(‘tr:lt(1)’)返回索引值小於1的所有tr元素
9）：header選擇<h1>~<h6>標籤，例如：
$(‘:header’)返回文件中<h1>~<h2>所有元素
10）：animated選取執行的動畫元素
11）：focus選取當前獲得焦點的元素
B、內容過濾選擇器
1) :contains(text)選取包含某個特定文字的元素，例如：
$(‘td:contains(“日本”)’)返回文字中包含“日本”的td元素
2）：empty選取不包含任何子元素或者文字的空元素，例如：$(‘:empty’)返回空元素
3）：has(selector)選取包含選擇器所匹配的元素的元素。例如：$(‘tr:has(“th”)’)返回包含th元素的tr元素
4）：parent選取包含子元素或者文字的元素，例如：
$(‘:parent’)返回非空元素
C、可見性過濾選擇器
1）：hidden選取隱藏的元素，例如：
$(‘tr:hidden’)返回隱藏的tr元素
2）：visible選取顯示的元素，例如：
$(‘tr:visible)返回未隱藏的tr元素
D、子元素過濾選擇器
1）：nth-child選取特定位置的子元素，例如：
$(‘tr:nth-child(1)’)返回第一個子元素
注意：nth-child是jQuery中唯一一個從1開始計數的選擇器
2）：first-child選取每個父元素中的第一個子元素，例如：
$(‘tabletr:first-child’)返回每個table的第一個tr
3）：last-child選取每個父元素的最後一個子元素，例如：
$(‘table tr:last-child’)返回每個table的最後一個tr
4）：only-child如果元素是其父元素的唯一子元素，該元素將被返回，例如：
$(‘tr td:only-child’)返回具有唯一子元素的td
5、表單選擇器
A、表單元素選擇器
1）：input 選取input、textarea、select和button元素
2）：text選取所有的單行文字框<input type=”text”>
3）：password選取所有的密碼框
<input type=”password”>
4)：radio選取所有的單選按鈕
5）;checkbox選取所有的複選框
6）：submit選取所有的提交按鈕
7）：image選取所有的影象域
8）：reset選取所有的重置按鈕
9）：button選取所有的按鈕
10）：file選取所有的檔案域
11）：hidden選取所有的隱藏域
B、表單屬性選擇器
1）：enabled選取所有的可用元素
2）：disabled選取所有的不可用元素
3）：checked選取所有的處於選中狀態的單選框和複選框
4）：selected選取所有的處於選中狀態的option元素
//程式碼DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
table{
margin-right:auto;
margin-left:auto;
margin-bottom:30px;
}
span,h1,h2{
display:block;
text-align:center;
font-size:20px;
}
td {
padding:6px;
margin-bottom:5px;
}
</style>
<script>
$(document).ready(function () {
$('button').click(function () {
//$('table:first').css('color', 'red');
//$('tr:last').css('color', 'red');
//$('table:first tr:last').css('color', 'red');
//$('tr:not(".head")').css('color', 'red');
//$('tr:even').css('color', 'red');
//$('tr:odd').css('color', 'red');
//$('tr:eq(2)').css('color', 'red');
//$('tr:gt(2)').css('color', 'red');
$(':header').css('color', 'red');
});
});
</script>
</head>
<body>
<button>按鈕</button>
<h1>旅遊服務的商品列表</h1>
<span>旅遊服務的商品列表</span>
<table>
<tr class="head">
<th>商品名</th>
<th>價格</th>
<th>已銷售</th>
</tr>
<tr>
<td>泰國普吉島一週遊</td>
<td>5000￥</td>
<td>1000</td>
</tr>
<tr>
<td>泰國曼谷一週遊</td>
<td>4000￥</td>
<td>2000</td>
</tr>
<tr>
<td>柬埔寨一週遊</td>
<td>4000￥</td>
<td>2350</td>
</tr>
<tr>
<td>新加坡一週遊</td>
<td>1000￥</td>
<td>10</td>
</tr>
<tr>
<td>馬來西亞一週遊</td>
<td>2000￥</td>
<td>100</td>
</tr>
</table>
<h2>旅遊紀念品的商品列表</h2>
<span>旅遊紀念品的商品列表</span>
<table>
<tr class="head">
<th>商品名</th>
<th>價格</th>
<th>已銷售</th>
</tr>
<tr>
<td>中國國旗</td>
<td>2￥</td>
<td>1000</td>
</tr>
<tr>
<td>泰國雕塑</td>
<td>200￥</td>
<td>500</td>
</tr>
<tr>
<td>釣魚島勳章</td>
<td>10￥</td>
<td>50000</td>
</tr>
<tr>
<td>馬來西亞國徽</td>
<td>5￥</td>
<td>500</td>
</tr>
</table>
</body>
</html>