1-7. 熟悉jQuery強大的選取器
(1) 熟識選取器前先認識幾個方法
| 有關CSS樣式的方法 | 說明 |
|---|---|
| css(propertyName) | 取得指定物件的指定CSS屬性propertyName的結果 [參考][參考] |
| css(propertyName,value) | 設定指定物件的指定CSS屬性為value的內容值 [參考][參考] |
| addClass(className) | 將指定物件加上指定的className類別名稱 [參考][參考] |
| removeClass([className]) | 將指定物件移除指定的className類別名稱, 沒有指定的className時則移除所有類別名稱 [參考][參考] |
| 有關HTML節點的方法 | 說明 |
|---|---|
| text([textString]) | 沒有textString參數時, 是取得指定物件內的內容, 包含所有後代元素的內容文字; 有textString參數時, 表示將參數加入到指定物件成為內容節點 [參考][參考] |
| html([htmlString]) | 沒有htmlString參數時, 是取得指定物件內的內容, 包含所有的HTML原始碼內容; 有htmlString參數時, 表示將參數加入到指定物件成為內容節點, 會辨視標籤呈現HTML的結果 [參考][參考] |
| append(content) | 將content參數的內容新增到指定物件內 [參考][參考] |
PS. ColorValues參考網、HTML色碼表參考網、CSS屬性名稱參考網
(2) jQuery選取器 [參考][參考]
| 基本選取器 | 說明 |
|---|---|
| #id | 選取指定id名稱的元素 |
| .class | 選取指定類別名稱的元素 |
| element | 選取指定標籤名稱的元素 |
| * | 選取所有的元素 |
| selector1,selector2,...,selectorN | 同時選取多個指定名稱的元素 |
| 層次選取器 | 說明 |
|---|---|
| $("ancestor descendant") | 選取ancestor元素裡的所有descendant後代元素 |
| $("parent>child") | 選取parent元素下的child子元素 |
| $('prev+next') | 選取緊接在prev元素後的next元素 |
| $('prev~siblings') | 選取prev元素之後的所有兄弟姊妹的元素 |
| 基本過濾選取器 | 說明 |
|---|---|
| :first | 選取第1個元素 |
| :last | 選取最後1個元素 |
| :not(selector) | 去除指定的selector之後的其他元素 |
| :even | 選取索引號碼是偶數的所有元素(索引從0開始) |
| :odd | 選取索引號碼是奇數的所有元素(索引從0開始) |
| :eq(index) | 選取索引號碼為index的元素 |
| :gt(index) | 選取索引號碼大於index的元素 |
| :lt(index) | 選取索引號碼小於index的元素 |
| :header | 選取所有的標題元素(例如:h1、h2...等) |
| :animated | 選取目前正在執行動畫的所有元素 |
| 內容過濾選取器 | 說明 |
|---|---|
| :contains(text) | 選取含有純文字內容為"text"的元素 [參考] |
| :empty | 選取不包含子元素或者純文字的空元素 [參考] |
| :has(selector) | 選取含有指定選取器的元素 [參考] |
| :parent | 選取含有子元素或者純文字的元素 [參考] |
| 可見性過濾選取器 | 說明 |
|---|---|
| :hidden | 選取所有不可見的元素 [參考] |
| :visible | 選取所有可見的元素 [參考] |
| 屬性過濾選取器 | 說明 |
|---|---|
| [attribute] | 選取擁有指定屬性的元素 [參考] |
| [attribute=value] | 選取指定屬性值等於value的元素 [參考] |
| [attribute!=value] | 選取指定屬性值不等於value的元素 [參考] |
| [attribute^=value] | 選取指定屬性值以value開始的元素 [參考] |
| [attribute$=value] | 選取指定屬性值以value結束的元素 [參考] |
| [attribute*=value] | 選取指定屬性值包含有value的元素 [參考] |
| [attribute|=value] | 選取指定屬性值等於value的元素, 通常會用在語言屬性[參考] |
| [attribute~=value] | 選取指定屬性值等於value的元素, 可包含空格[參考] |
| [selector1] [selector2] [selectorN] |
用屬性選取器合併成一個複合屬性選取器， 滿足多個條件，每選擇一次縮小一次範圍。 |
| 子元素過濾選取器 | 說明 |
|---|---|
| :nth-child(index/even/odd/eq) | 選取每個父元素下的第index個子元素或者奇偶元素(index從1算起) [參考] |
| :first-child | 選取每個父元素的第1個子元素 [參考] |
| :last-child | 選取每個父元素的最後1個子元素 [參考] |
| :only-child | 選取父元素中只有惟一的子元素 [參考] |
| 舉例： | (A) 準備網頁內容為一個表格及三個div區塊
|
結果： |
|
| 舉例： | (F) 新增網頁檔案, 先準備網頁內容, 如下圖
(G) 在<head>區塊內</head>結束前輸入以下程式碼, 設定所有的<li>皆靠左浮動
|
| 結果： |
|
| 舉例： | (H) 修改程式碼, 設定只有第一層的<li>靠左浮動
|
| 結果： |
|
| 舉例： | (I) 設定類別名稱 sp 元素的背景顏色為洋紅色
|
| 結果： |
|
| 舉例： | (K) 設定類別名稱 sp 元素之後同一層的每個 li 元素背景顏色為黃色
|
| 結果： |
|
| 舉例： | (L) 新增網頁檔案, 先準備網頁內容如下
|
| 結果： |
|
