- jQuery 1.4 Reference Guide
- Jonathan Chaffer Karl Swedberg Karl Swedberg
- 792字
- 2021-08-20 16:29:44
Attribute selectors
The CSS specification also allows elements to be identified by their attributes. While not widely supported by browsers for the purpose of styling documents, these attribute selectors are highly useful and jQuery allows us to employ them regardless of the browser being used.
When using any of the following attribute selectors, we should account for attributes that have multiple, space-separated values. As these selectors see attribute values as a single string, $('a[rel=nofollow]'); for example, will select <a rel="nofollow" href="example.html">Some text</a> but not <a rel="nofollow self" href="example.html">Some text</a>.
Attribute values in selector expressions can be written as bare words or surrounded by quotation marks. Therefore, the following variations are equally correct:
- Bare words:
$('a[rel=nofollow self]') - Double quotes inside single quotes:
$('a[rel="nofollow self"]') - Single quotes inside double quotes:
$("a[rel='nofollow self']") - Escaped single quotes inside single quotes:
$('a[rel=\'nofollow self\']') - Escaped double quotes inside double quotes:
$("a[rel=\"nofollow self\"]")
The variation we choose is generally a matter of style or convenience. The authors choose to omit quotation marks in this context for clarity, and the examples that follow reflect this preference.
Attribute ([foo])
Select all elements that have the foo attribute, with any value.
Examples
$('[rel]')selects all elements that have arelattribute$('.myclass[style]')selects all elements with the classmyclassthat have astyleattribute
Attribute equals ([foo=bar])
Select all elements that have the foo attribute with a value exactly equal to bar.
Examples
$('[name=myname]')selects all elements that have anamevalue exactly equal tomyname$('a[rel=nofollow]')selects all<a>elements that have arelvalue exactly equal tonofollow
Description
For more information on this attribute selector, see the introduction to Attribute selectors.
Attribute does not equal ([foo!=bar])
Select all elements that do not have the foo attribute, or have a foo attribute but with a value other than bar.
Examples
$('a[rel!=nofollow]')selects all<a>elements that either have norelattribute, or have one with a value other thannofollow$('input[name!=myname]')selects all<input>elements that either have nonameattribute, or have one with a value other thanmyname
Description
As these selectors see attribute values as a single string, the first example will select <a rel="nofollow self" href="example.htm">Some text</a>. Consider the Attribute contains word selector for alternatives to this behavior.
Attribute begins with ([foo^=bar])
Select all elements that have the foo attribute with a value beginning exactly with the string bar.
Examples
$('[id^=hello]')selects all elements that have an ID beginning withhello$('input[name^=my]')selects all<input>elements that have anamevalue beginning withmy
Description
This selector can be useful for identifying elements in pages produced by server-side frameworks that produce HTML with systematic element IDs.
Attribute ends with ([foo$=bar])
Select all elements that have the foo attribute with a value ending exactly with the string bar.
Examples
$('[id$=goodbye]')selects all elements that have an ID ending withgoodbye$('input[name$=phone]')selects all<input>elements that have anamevalue ending withphone
Attribute contains ([foo*=bar])
Select all elements that have the foo attribute with a value containing the substring bar.
Examples
$('[style*=background]')selects all elements that have astylevalue containingbackground$('a[href*=example.com]')selects all<a>elements that have anhrefvalue containingexample.com
Description
This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Therefore, $('p[class*=my]') will select <p class="yourclass myclass">Some text</p>, <p class="myclass yourclass">Some text</p> and <p class="thisismyclass">Some text</p>.
Compare this selector with the Attribute contains word selector, which is more appropriate in many cases.
Attribute contains word ([foo~=bar])
Select all elements that have the foo attribute with a value containing the word bar, delimited by spaces.
Examples
$('[class~=myclass]')selects all elements that have the class ofmyclass(and optionally other classes as well).$('a[rel~=nofollow]')selects all<a>elements with arelvalue includingnofollow.
Description
This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words. Thus, the first example is equivalent to $('.myclass').
This selector is similar to the Attribute contains selector, but substring matches within a word do not count. Therefore, the second example matches <a rel="nofollow" href="example.html">Some text</a> as well as <a rel="nofollow self" href="example.html">Some text</a>, but does not match <a rel="nofollowself" href="example.html">Some text</a>.
Attribute contains prefix ([foo|=bar])
Select all elements that have the foo attribute with a value either equal to bar, or beginning with bar and a hyphen (-).
Examples
$('[id|=hello]')selects all elements with an ID ofhelloor an ID that begins withhello-$('a[hreflang|=en]')selects all<a>elements with anhreflangvalue ofenor beginning withen-
Description
This selector was introduced into the CSS specification to handle language attributes. The second example, for instance, matches <a href="example.html" hreflang="en">Some text</a> as well as <a href="example.html" hreflang="en-UK">Some text</a>.
- Instant Vert.x
- 創意UI：Photoshop玩轉移動UI設計
- Getting Started With Oracle SOA Suite 11g R1 – A Hands/On Tutorial
- SOLIDWORKS Visualize 實例詳解（微視頻版）
- 碼上學會：中文版Creo 3.0機械設計全能一本通（雙色版）
- 中文版After Effects 2022基礎教程
- Cinema 4D基礎培訓教材
- Photoshop人像精修秘笈
- Flash CS6 動畫制作實戰從入門到精通
- 藝術二維碼設計與制作完全攻略 PHOTOSHOP+ILLUSTRATOR+FLASH
- Adobe Premiere Pro CC 2019經典教程（彩色版）
- SQL編程基礎（原書第3版）
- 中文版CINEMA 4D R18 實用教程
- 新編 中文版CorelDRAW X8入門與提高
- 中文版Premiere Pro CC實戰視頻教程