在jQuery選擇器中,^符號表示以指定字符串開頭的元素。
$(document).ready(function(){ $("p[class^='intro']").css("background-color", "yellow"); });
上述代碼中,選擇所有class屬性以“intro”開頭的<p>元素,并將它們的背景顏色設置為黃色。
需要注意的是,在使用^選擇器時,指定的字符串必須出現在屬性值的開頭。如果屬性值中包含多個以該字符串開頭的子串,則該元素仍然會被匹配。例如:
$(document).ready(function(){ $("p[class^='intro-']").css("background-color", "yellow"); });
該代碼將選擇所有class屬性以“intro-”開頭的<p>元素,并將它們的背景顏色設置為黃色。這也包括了類名為“intro-example”的元素。
需要特別注意的是,如果屬性值中包含該字符串的一個完全等同的子串,該元素也不會被匹配。例如:
$(document).ready(function(){ $("p[class^='intro']").css("background-color", "yellow"); });
該代碼將不會選擇以下元素:
<p class="introduction">Introduction</p> <p class="example-intro">Example Introduction</p>
因為這些元素的class值中包含了“intro”這個子串,但不是從頭開始的。