今天我們來測試一下jQuery的選擇器!
首先,讓我們看看最基本的選擇器。選擇所有元素,代碼如下:
接下來,讓我們選擇所有的段落元素。代碼如下:
如果我們只想選擇id為"test"的元素,代碼如下:
如果我們只想選擇class為"test"的元素,代碼如下:
選擇所有屬性class中包含"test"的元素,代碼如下:
選擇所有屬性href值以"http"開頭的元素,代碼如下:
選擇所有屬性title值包含"hello"的元素,代碼如下:
選擇所有屬性src值以".png"或".jpg"結尾的元素,代碼如下:
選擇文檔中第一個段落元素,代碼如下:
選擇文檔中最后一個段落元素,代碼如下:
選擇文檔中所有偶數段落元素,代碼如下:
選擇文檔中所有奇數段落元素,代碼如下:
這些是最基本的選擇器,當然還有很多高級用法。我們在掌握基本用法后再進一步學習吧!
首先,讓我們看看最基本的選擇器。選擇所有元素,代碼如下:
$("*")
接下來,讓我們選擇所有的段落元素。代碼如下:
$("p")
如果我們只想選擇id為"test"的元素,代碼如下:
$("#test")
如果我們只想選擇class為"test"的元素,代碼如下:
$(".test")
選擇所有屬性class中包含"test"的元素,代碼如下:
$("[class*=test]")
選擇所有屬性href值以"http"開頭的元素,代碼如下:
$("a[href^='http']")
選擇所有屬性title值包含"hello"的元素,代碼如下:
$("a[title*='hello']")
選擇所有屬性src值以".png"或".jpg"結尾的元素,代碼如下:
$("img[src$='.png'], img[src$='.jpg']")
選擇文檔中第一個段落元素,代碼如下:
$("p:first")
選擇文檔中最后一個段落元素,代碼如下:
$("p:last")
選擇文檔中所有偶數段落元素,代碼如下:
$("p:even")
選擇文檔中所有奇數段落元素,代碼如下:
$("p:odd")
這些是最基本的選擇器,當然還有很多高級用法。我們在掌握基本用法后再進一步學習吧!