3.2 屬性

以中括號 [ ] 代表該標籤的屬性。

屬性值等於 ( = )

$("[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 頁面，請試試以下例子：

$("[id='my_title']").css("color", "red");

$("h1[id='my_title']").css("color", "red");

$("h1[id!='my_title']").css("color", "red");

// 這會連 html 、head、body 標籤也加上文字顏色變紅色的樣式
$("[id!='my_title']").css("color", "red");

$("h1[id^='my_']").css("color", "red");

$("h1[id$='tle']").css("color", "red");

$("p[class*='ara']").css("color", "red");