A Comprehensive Look at jQuery Selectors

Whether you want to manipulate the content of an element on a web page, attach an event to it, or do something else, you will need to select it first. This is where jQuery selectors come into play: they form a crucial part of the library.

In this tutorial, I will cover all of these selectors and point out important things that you need to keep in mind while using them.

jQuery Selectors

The main purpose of these selectors is to select elements on a web page that meet certain criteria. The criteria can be anything like their id, classname, attributes or a combination of any or all of these. Most of the selectors in jQuery are based on existing CSS selectors but the library also has its own custom selectors.

Basic selectors

You can select elements on a webpage using their ID $("#id"), their class $(".class") or their tag name $("li") . You can also use a combination of these selectors like $(".class tag") or select combined result of multiple selectors like $("selectorA, selectorB, selectorC").

jQuery also offers few other basic selectors that I have listed below:

• :header Selector — Let's say you have to select all the headings like <h1>, <h2>, <h3> in a <section>. In this case, you could either use the verbose $("section h1, section h2, section h3") selector or the much shorter $("section :header") selector. Both will do the same job and the latter one is comparatively easier to read. The header selector has set the background of all headlines to yellow in this demo.

• :target Selector — This selector returns the element whose id matches the fragment identifier or hash of the document's URI. For instance, if the URI is "http://ift.tt/2aNzf0f". Then, the selector $("h2:target") will select the element <h2 id="hash">.

• :animated Selector — This selector returns all elements that have an animation in progress when the selector is run. This implies that any element whose animation starts after the selector has been executed, won't be returned. Also, keep in mind that if you are using a custom jQuery build without the effects module, this selector will throw an error. In this demo only the animated box turns orange because of the selector.

Index-based selectors

Besides the basic selectors we discussed above, you can also select elements on the basis of their index. jQuery provides its own set of index-based selectors which use zero-based indexing. This means that to select the third element you will have to use the index 2.

Here is a list of all index based selectors:

• :eq(n) Selector — This selector will return the element at index n. From version 1.8 onward, it accepts both positive and negative index value. When a negative value is supplied counting occurs backward from the last element.
• :lt(n) Selector — This selector will return all elements with index less than n. It also accepts both positive and negative values from version 1.8 onward. Just like the :eq(n) selector, when a negative value is provided counting occurs backward from the last element.
• :gt(n) Selector — This selector is just like :lt(n). The only difference is that it returns all elements with an index greater than or equal to n.
• :first Selector — This will return the first matched DOM element on a webpage. It is equivalent to :eq(0) and :lt(1). One difference between :first and :first-child selector is that :first-child can select multiple elements each of which is first child of their parent.
• :last Selector — This one is similar to the :first selector but returns the last child instead.
• :even Selector — This will return all elements with an even index. Since indexing in jQuery is zero-based, the selectors selects first child, third child and so on. This seems counter-intuitive but that's how it works.
• :odd Selector — This one works like the :even selector but returns elements with odd indexes.

In the following example, you can click on the three buttons :lt, :gt and :eq and they will randomly generate an index and apply the resulting selector to a list:

See the Pen Index-based Selectors by SitePoint (@SitePoint) on CodePen.

As you can see, using :first and :last only selects the respective first and last elements on the webpage and not within every parent.

Child selectors

jQuery enables you to select the children of an element based on their index or type. The CSS child selectors are different from jQuery ones in the sense that they don't use zero-based indexing.

Here is a list of all child selectors:

• :first-child — This selector returns all elements which are the first child of their parent.

• :first-of-type — This one selects all elements which are the first sibling of their own kind among many others.

• :last-child — This will select the last child of a parent. Just like :first-child, it can select multiple elements in case of many parents.

• :last-of-type — It selects all children that are the last of their type in a parent. In case of multiple parents, it can select multiple elements.

• :nth-child() — This one is a bit complex. It can accept a variety of values as parameter like a number greater than or equal to 1, the strings even and odd or an equation like 4n+1.

• :nth-last-child() — This selector is similar to the previous one and accepts the same parameters. The only difference is that it begins its counting from the last child.

• :nth-of-type() — This selector returns all elements that are the nth child of their parent with respect to their siblings with same name.

• :nth-last-of-type() — This selector functions just like the :nth-of-type() selector but the counting begins from the end.

Continue reading %A Comprehensive Look at jQuery Selectors%

by Baljeet Rathi via SitePoint