The jQuery factory function $() is used to find elements on the page to work with.

The function takes a string composed of CSS-like syntax, called a selector expression.

This article covers these selector expression.

">
立诚勿怠,格物致知
It's all about connecting the dots

Selector expressions in jQuery

注:本文内容摘录自《Learning jQuery (4th Edition)》。

The jQuery factory function $() is used to find elements on the page to work with. This function takes a string composed of CSS-like syntax, called a selector expression.

Simple CSS

Simple CSS
Selector Matches
* All elements.
#id The element with the given ID.
element All elements of the given type.
.class All elements with the given class.
a, b Elements that are matched by a or b.
a b Elements b that are descendants of a.
a > b Elements b that are children of a.
a + b Elements b that immediately follow a.
a ~ b Elements b that are siblings of a and follow a.

Position among siblings

Position among siblings
Selector Matches
:nth-child(index) Elements that are the index child of their parent element (1-based).
:nth-child(even) Elements that are an even child of their parent element (1-based).
:nth-child(odd) Elements which are an odd child of their parent element (1-based).
:nth-child(formula) Elements that are the nth child of their parent element (1-based). Formulas are of the form an+b for integers a and b.
:nth-last-chind() The same as :nth-child(), but counting from the las element to the first.
:first-child Elements that are the first child of their parent.
:last-child Elements that are the last child of their parent.
:only-child Elements that are the only child of their parent.
:nth-of-type() The same as :nth-child(), but only counting elements of the same element name.
:nth-last-of-type The same as :nth-last-child(), but only counting elements of the same element name.
:first-of-type Elements which are the first child of the same element name among their siblings.
:last-of-type Elements which are the last child of the same element name among their siblings.
:only-of-type Elements that are the only child of the same element name among their siblings.

Position among matched elements

Position among matched elements
Selector Matches
:first The first element in the result set.
:last The last element in the result set.
:not(a) All elements in the result set that are not matched by a.
:even Even elements in the result set (0-based).
:odd Odd elements in the result set (0-based).
:eq(index) A numbered element in the result set (0-based).
:gt(index) All elements in the result set after (greater than) the given index (0-based).
:lt(index) All elements in the result set before (less than) the given index (0-based).

Attributes

Attributes
Selector Matches
[attr] Elements that have the attribute attr.
[attr=”value”] Elements whose attr attribute is value.
[attr!=”value”] Elements whose attr attribute is not value.
[attr^=”value”] Elements whose attr attribute begins with value.
[attr$=”value”] Elements whose attr attributes ends with value.
[attr*=”value”] Elements whose attr attribute contains the substring value.
[attr~=”value”] Elements whose attr attribute is a space-delimited set of strings, one of which is value.
[attr|=”value”] Elements whose attr attributes is either equal to value or begins with value followed by a hyphen.

Forms

Forms
Selector Matches
:input All <input>, <select>, <textarea>, and <button> elements.
:text The <input> elements with type=”text”.
:password The <input> elements with type=”password”.
:file The <input> elements with type=”file”.
:radio The <input> elements with type=”radio”.
:checkbox The <input> elements with type=”checkbox”.
:submit The <input> elements with type=”submit”.
:image The <input> elements with type=”image”.
:reset The <input> elements with type=”reset”.
:button The <input> elements with type=”button” and <button> elements.
:enabled Enabled form elements.
:disabled Disabled form elements.
:checked Checked checkboxes and radio buttons.
:selected Selected <option> elements.

Miscellaneous selectors

Miscellaneous selectors
Selector Matches
:root The root element of the document.
:header Header elements (for example, <ht>, <h2>).
:animated Elements with an animation in progress.
:contains(text) Elements containing the given text.
:empty Elements with no child nodes.
:has(a) Elements containing a descendant element matching a.
:parent Elements that have child nodes.
:hidden Elements that are hidden, either through CSS or because they are .
:visible The inverse of :hidden.
:focus The elements that has the keyboard focus.
:lang(language) Elements with the given language code (either due to a lang attribute on the element or an ancestor, or a <meta> declaration).
:target Whichever element is targeted by the URI’s fragment identifier, if any.
赞(0) 打赏
文章名称:《Selector expressions in jQuery》
文章链接:https://www.orzzone.com/selector-expressions-in-jquery.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册