Loading...
Loading...
Loading...
Loading...
Loading...
$("p:first-child")
:找到 p 標籤,然後相對於父元素,如果是第一個子元素的話,就符合。
$("p:last-child")
:找到 p 標籤,然後相對於父元素,如果是最後一個子元素的話,就符合。
$("p:only-child")
:找到 p 標籤,然後相對於父元素,如果是只有自己一個元素的話,就符合。例如以下的段落就符合:
$("p:nth-child(3)")
:p 標籤且是第3個子元素,就符合。
延續 practice/selectors.html
頁面,試以下例子:
以中括號 [ ] 代表該標籤的屬性。
$("[id='my_title']")
:不指定標籤,只要 id 等於 my_titile,即可取到元素。
$("h1[id='my_title']")
:h1 標籤,且 id 等於 my_titile 的元素。
$("h1[id!='my_title']")
:h1 標籤,且 id 不等於 my_title 的元素。
$("h1[id^='my_']")
:h1 標籤,且 id 的屬性值開頭等於 my_
的元素。
$("h1[id$='tle']")
:h1 標籤,且 id 的屬性值結尾等於 tle
的元素。
$("p[class*='ara']")
:p 標籤,且 class 的屬性值有包含 ara
字串的元素。
延續 practice/selectors.html
頁面,請試試以下例子:
$("p")
:找到標籤名稱為 p 的元素。
$("h1")
:找到標籤名稱為 h1 的元素。
$("#my_id")
:# 表示的是 id,即找到 id 為 my_id 的元素。
$("h1#my_title")
:找到 h1 標籤,且 id 為 my_title 的元素。
$(".my_style")
:. 表示的是 class,即找到 class 為 my_style 的元素。
$("p.my_style")
:找到 p 標籤,且 class 為 my_style 的元素。
請先建立 practice/selectors.html
檔案,用於練習,內容如下:
試著輸入以下例子,看是否有效:
以下範例,直接在 practice/selectors.html
頁面中測試觀察:
找到的所有項目中的第一個。例:
找到的所有項目中的最後一個。
第幾個元素,從 0 開始,0 代表第一個。以此類推。
-1
代表倒數第一個;-2
代表倒數第二個。以此類推。
從索引值開始(start),到最後的索引值(last),但並不包含最後一個。
如果 last 沒有提供,就是直接取到最後一個。
用來判斷是否符號指定的規則。
在 practice/selectors.html
新增以下原始碼:
例:同層前一個
例:同層下一個
在 practice/selectors.html
頁面中,新增以下原始碼:
例:往父層找,找到第一個符合 el 的元素:
例:找到第一層子元素
例:找到第一層子元素為 p 標籤的元素:
例:一直往內層找(不只是第一層子元素),找到所有的 p 標籤的元素: