Types of Selectors
With the help of jQuery Selectors, developers may locate and work with HTML components inside a document in a clear and effective manner. Effective HTML document traversal, event handling, animation, and Ajax interactions are made possible by these essential jQuery building blocks, which facilitate quick web development.
What are jQuery Selectors?
jQuery selectors are essentially expressions that look like CSS selectors with extra custom options that jQuery offers. The $() factory function, a shortcut for jQuery(), is used with them. $(selector) returns a new instance of the jQuery object when you pass it a selector string. With the help of a thorough Application Programming Interface (API), this object can interact with zero or more Document Object Model (DOM) elements in a variety of ways. The fact that functions called on this jQuery object automatically and implicitly cycle through all matching elements is a significant benefit. This eliminates the need for manual iteration, such as for loops, which are sometimes necessary in plain JavaScript.
Why Use jQuery Selectors?
Using jQuery selectors to access DOM components offers advantages over JavaScript:
Conciseness and Efficiency: Many characters are needed in plain JavaScript to access a single element or collection of elements, which might lead to mistakes. A concise, unified method that is reliable and effective is offered by jQuery.
Cross-Browser Compatibility: The underlying methods of jQuery fill in the gaps in the pure DOM notion and compensate for browser-dependent quirks. This guarantees your code will function consistently in all officially supported browsers.
Rapid Development: Developers may “write less, do more” by using jQuery to streamline routine processes. By lowering the quantity of boilerplate code required for DOM traversal and manipulation, this expedites the development process.
Leveraging CSS Knowledge: Web designers who are already familiar with CSS syntax will find jQuery’s element location mechanism natural as it is based on CSS selectors.
Types of Selectors
Three basic building components are mainly used by the $(selector) factory function to select elements:
| S.No | Category | Selector | Description | Example |
|---|---|---|---|---|
| 1 | Basic Selectors | * | All elements | $(" * ") |
| 2 | #id | Element with specific ID | $("#logo") | |
| 3 | .class | Elements with specific class | $(".menu") | |
| 4 | element | All elements with tag name | $("p") | |
| 5 | selector1, selector2 | Multiple elements | $("h1, .intro") | |
| 6 | Hierarchy Selectors | ancestor descendant | All descendants | $("div p") |
| 7 | parent > child | Direct child | $("ul > li") | |
| 8 | prev + next | Immediate sibling | $("h1 + p") | |
| 9 | prev ~ siblings | All siblings | $("h2 ~ p") | |
| 10 | Attribute Selectors | [attr] | Elements with an attribute | $("[href]") |
| 11 | [attr='value'] | Attribute with exact value | $("[type='text']") | |
| 12 | [attr!='value'] | Attribute not equal to value | $("[type!='submit']") | |
| 13 | [attr^='value'] | Attribute starts with value | $("[href^='https']") | |
| 14 | [attr$='value'] | Attribute ends with value | $("[src$='.jpg']") | |
| 15 | [attr*='value'] | Attribute contains value | $("[title*='jQuery']") | |
| 16 | Form Selectors | :input | All input elements | $(":input") |
| 17 | :text | Text inputs | $(":text") | |
| 18 | :password | Password fields | $(":password") | |
| 19 | :radio | Radio buttons | $(":radio") | |
| 20 | :checkbox | Checkboxes | $(":checkbox") | |
| 21 | :submit | Submit buttons | $(":submit") | |
| 22 | :reset | Reset buttons | $(":reset") | |
| 23 | :button | Button elements | $(":button") | |
| 24 | :file | File upload fields | $(":file") | |
| 25 | :enabled | Enabled inputs | $(":enabled") | |
| 26 | :disabled | Disabled inputs | $(":disabled") | |
| 27 | | Checked checkboxes/radios | $(":checked") | |
| 28 | :selected | Selected option in a dropdown | $(":selected") | |
| 29 | Content Filters | :contains("text") | Elements that contain text | $("p:contains('Hello')") |
| 30 | :empty | Elements with no children or text | $("div:empty") | |
| 31 | :has(selector) | Elements containing child that matches selector | $("div:has(p)") | |
| 32 | :parent | Elements that are not empty | $("div:parent") | |
| 33 | Visibility Filters | :visible | Visible elements | $("div:visible") |
| 34 | :hidden | Hidden elements | $("div:hidden") | |
| 35 | Child Filters | :first | First matching element | $("li:first") |
| 36 | :last | Last matching element | $("li:last") | |
| 37 | :even | Even index elements (0-based) | $("tr:even") | |
| 38 | :odd | Odd index elements | $("tr:odd") | |
| 39 | :eq(index) | Element at specific index | $("li:eq(2)") | |
| 40 | :gt(index) | Greater than index | $("li:gt(1)") | |
| 41 | :lt(index) | Less than index | $("li:lt(3)") | |
| 42 | Other Filters | :not(selector) | Elements that do NOT match selector | $("input:not(:checked)") |
| 43 | :nth-child(n) | nth child (CSS-style) | $("li:nth-child(2)") | |
| 44 | :nth-of-type(n) | nth of specific element type | $("p:nth-of-type(1)") | |
| 45 | :only-child | Element that is the only child of its parent | $("div:only-child") | |
| 46 | :focus | Currently focused element | $("input:focus") |