Updated July 4, 2023
Introduction to jQuery Selectors
When working with JavaScript, you will often find yourself in a situation where you must find and modify some content on the page. In these cases, you must use the selector support in JQuery. JQuery makes it quite easy to find page elements based on their types, values, attributes, etc. These elements are based on CSS selectors, and once you have had some practice, you will see that finding elements in the pages is a cakewalk. Depending on their use, we can classify different types of JQuery Selectors for other kinds. Let’s take a look at some of the most used selectors.
Using a Selector
Following is a syntax of a JQuery Selector:
$(Selector).methodname():If you need, you can chain multiple selectors by adding a “.” Between the methods.
$(selector).method1().method2().method3();Types of Selectors in JQuery
Here are the different types of Selectors in JQuery.
1. Basic JQuery Selectors
We can select page elements using their ID, Class, or tag names. If needed, a combination of these can also be used. Following are some basic selectors:
- : header Selector — This basic selector type lets us find elements with their HTML headings. To do this, we use the verbose $ (“section h1, section h2, section h3”) selector, or we can also use the much shorter $(“section :header”) selector.
- :target Selector — This selector finds targets of the page or hash of the document’s URI. For instance, if the URI of the page is “https://example.com/#test”. Then, the selector $ (“h2:target”) will select the element <h2 id=”test”>.
- :animated Selector — This selector is used to find all animation elements. Remember that for the animation to be selected, it has to be running when the selector is run.
2. Selectors based on Index
JQuery has its own set of index-based selectors that utilize zero-based indexing. Following are some examples:
- :eq(k) Selector — This selector returns the element at index k. It supports negative index values too.
- :lt(k) Selector — This selector returns all elements with an index less than k. As above, negative values are also accepted
- :gt(n) Selector — This selector is similor: lt (k) Selector except it works for Index values greater than or equal to k.
3. Child Selectors
You can use JQuery to select children of any element based on their type or index.
- :first-child — This selector will return all elements which are the first child of their parents.
- :first-of-type — This JQuery selector selects all elements that are the first sibling
- :last-child — As the name suggests, this selector will select the last child of the parent.
- :last-of-type — This will select all children that are last of their type in a parent. If there is more than one parent, it will select multiple elements.
- :only-of-type – We can use the only-of-type selector to find all elements with siblings of the same type on the page.
- :only-child – In situations where you need to find and select elements that are the only child of their parent, you can use this selector. If a parent on the page has more than one child, it will be ignored.
4. Attribute Selectors
Elements can be selected based on their attributes; the following are some common attribute selectors:
- $(“[attribute|=’ valuehere’]”) — The “attribute contains prefix selector” selects all elements with attributes where the value is equal to or starts with the given string followed by a hyphen.
- $(“[attribute~=’valuehere’]”) — This returns all elements with attributes where the value contains a given the word delimited by spaces.
- $(“[attribute*=’valuehere’]”) — It will select elements where the value contains the given substring. As long as the value matches, the location won’t matter
5. Content Selectors
As the name suggests, these JQuery Selectors find and select content inside elements.
- :contains(text) — This selects elements with specified text content inside. One thing to remember when using this selector is that the test here is case-sensitive.
- :has(selector) — It will return elements with at least one element inside that matches the specified selector. For example, $(“section:has(h1)”) will return with all sections that have an h1 element.
- :empty — This selector will return the elements of the page that don’t have any children, including text nodes.
- :parent — This selector selects all the elements of the webpage that have at least one child node. You can consider it as an inverse to the: empty JQuery Selector.
6. Hierarchy selectors
- $(“ancestor descendant”) – It selects all the descendant elements of a parent. In our case, the descendant could be a child, grandchild, and so on.
- $(“parent > child”) – This is used in cases where we only need to select the direct child of a specific parent.
- $(“previous + next”) – In case we need to select all elements that match the “next” selector and that have the parent “previous”. The selected elements will also be immediately preceded by “previous, ” the sibling.
7. Visibility Selectors
Two selectors: visible and: hidden, are also available in JQuery. These finds visible or hidden elements on the webpage. Any element in the webpage is considered hidden if:
- Its display properly is set to none.
- Its width and Hight are defined as zero.
- It has type=hidden mentioned in the form element.
- Any ancestors of the element are already hidden.
Remember that even if an element has opacity set as Zero, it will still be considered visible because it takes up space.
8. Form Selectors
JQuery has sorter versions of selectors for input elements of web forms to save time and hassle.
For example, while $ (“button, input[type=’button’]”) will work to select the button on the page, we can use $ (“:button”) to do it quickly.
Similarly, we can use $ (“: radio”) to select the radio button.
Conclusion
Selectors are one of the important features of JQuery, the selection on JavaScript is not as intuitive and robust, but with the addition of selectors via JQuery, programming for the web has become easier.
Recommended Articles
We hope that this EDUCBA information on “Types of Selectors in JQuery” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
