Types of Selector in JQuery

Introduction to JQuery Selectors and their types

When you are working with JavaScript, you will often find yourself in a situation where you need to find and modify some content on the page. In these cases, you will need to use the selector support in JQuery. JQuery makes it quite easy to find elements of the page 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 in different types. 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 their tag name. If needed, a combination of these can also be used. Following are some basic selectors:

• :header Selector — This is a basic selector type that 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 in 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 finding all elements that have animation. Keep in mind 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 that have index less than k. Just as above, negative values are also accepted
• :gt(n) Selector — This selector is similor: lt (k) Selector except it works for Index value 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 is used to select 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 are more than one parent, it will select multiple elements.
• :only-of-type – We can use the only-of-type selector to find all elements that have siblings of the same type in 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. In case 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, 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 word delimited by spaces.
• $(“[attribute*=’valuehere’]”) — It will select elements with 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 are used to find and select content inside elements.

• :contains(text) — This is used to select elements that have a specified text content inside. One thing to keep in mind when using this selector is, that the test here is case sensitive.
• :has(selector) — It will return with elements which have at least one element inside that matches the specified selector. For an 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 is used to select 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 is used to select all the descendant elements of a parent. The descendant in our case 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 proceeded by “previous” which is the sibling.

7) Visibility Selectors

Two selectors: visible and: hidden are also available in JQuery. These can be used to find visible or hidden elements in the webpage respectively. Any element in the webpage is considered hidden if:

• Its display properly is set to none.
• Its width and Hight are defined zero.
• It has type=hidden mentioned in the form element.
• Any ancestors of the element are already hidden.

Keep in mind that even if an element has opacity set as Zero, it will still be considered visible because it will still take up space.

8) Form Selectors

To save time and hassle, JQuery has sorter versions of selectors for input elements of web forms.

For an example, while $ (“button, input[type=’button’]”) will work to select the button in 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 bit with the addition of selectors via JQuery, programming for the web has become easier.

Recommended Articles

This is a guide to Types of Selector in JQuery. Here we discuss the basic concept with different types of JQuery Selectors in detail respectively. You may also have a look at the following articles to learn more –

1. jQuery Methods
2. jQuery Alternatives
3. Uses Of JQuery
4. jQuery querySelector