Book Image

Instant jQuery Selectors

By : Aurelio De Rosa
Book Image

Instant jQuery Selectors

By: Aurelio De Rosa

Overview of this book

jQuery's selectors is one of the most important concepts of the jQuery library. Usually, the first thing you do is to select one or more elements of a page in order to manipulate them. Therefore, to efficiently learn the usage of jQuery's selectors is one of the first steps to successfully build your website. Instant jQuery Selectors is a practical guide that will teach you how to use jQuery's selectors efficiently in order to easily select theelements of your pages to operate upon with jQuery's methods. You will go through the most common problems that you could face while developing your project and will learn how to solve them with the help of focused examples that Instant jQuery Selectors has to offer. Instant jQuery Selectors, starting from how to set up jQuery and how to choose the right version for your project, explains to you all the selectors available using a multitude of simple and practical recipes that will help you start using selectors in the right way. Reading the presented recipes you'll learn about the numerous selectors and filters of jQuery – almost 100 of them! You will see how to reuse collections, the methods to filter collections, and how to take advantage of the lesser known parameter of jQuery's constructor: context. Also, you'll discover the methods to traverse the DOM and the techniques to improve the performance of your website by just tweaking selectors. Instant jQuery Selectors is the resource to learn everything you need to know about jQuery's selectors.
Table of Contents (7 chapters)

Child filters (Should know)


jQuery also has specific filters to target node's children. Here, you'll discover more about them.

Getting ready

The filters belonging to this category are:

Name

Description

:first-child

Retrieves the elements that are the first child of their parent.

:first-of-type

Collects the elements that are the first of the given type (element name).

:last-child

Retrieves the elements that are the last child of their parent.

:last-of-type

Collects the elements that are the last of the given type (element name).

:nth-child()

Retrieves all elements that are the nth-child of their parent.

:nth-last-child()

Selects all elements that are the nth-child of their parent, counting from the last element to the first.

:nth-last-of-type()

Selects all elements that are the nth-child of their parent, counting from the last element to the first.

:nth-of-type()

Collects all elements that are the nth child of their parent in relation to siblings with the same element name.

:only-child

Retrieves all of the elements that are the only child of their parent.

:only-of-type

Retrieves the elements that have no siblings with the same element name.

The filters :nth-child(), :nth-last-child(), :nth-last-of-type(), and :nth-of-type() accept a selector that can be an index, even, odd, or an equation. Please note that :nth-last-child() and :nth-last-of-type() use the index starting from the end to turn back.

Besides this, there are some differences between these filters and those we've seen in the Selecting by position using filters (Should know) recipe:

Note

Differently from the :eq() and similar filters, their index starts from one (1) instead of zero (0). Besides, while even and odd are very easy to understand, this isn't the same with equation. The latter is a string having unknown variable as n. So, if you want to target the element at position multiple of three (for example 3, 6, 9, and so on), you need to write 3n.

How to do it...

To complete the recipe, follow these steps:

  1. Create a copy of the template.html file and rename it as child-filters.html.

  2. Inside the <body> tag, add the following HTML markup:

    <h1 id="title">A great title</h1>
    <div class="wrapper">
        <h2>A subtitle</h2>
        <p>This is the first paragraph.</p>
        <p id="description" class="border">I'm a paragraph.</p>
    </div>
    <div id="content">
        <h2>jQuery is so cool!</h2>
        <p class="border">I'm yet another paragraph</p>
        <ul>
            <li>The first of the list</li>
            <li>I'm the second, not bad!</li>
            <li>Third list item here</li>
            <li>Fourth list item here</li>
            <li>Fifth list item here</li>
        </ul>
        <h2>Another subtitle</h2>
    </div>
  3. Edit the <head> section of the page adding this code:

    <script>
        $(document).ready(function() {
            $('div > h2:first-of-type').css('background-color', '#976FAC');
            $('li:nth-child(3n+1)').css('color', '#9FB35A');
        });
    </script>
  4. Save the file and open it with your favorite browser.

How it works...

As you can see by looking at the code, the more you read the more our selectors become complex.

In the first line of our recipe, in fact, we're using at the same time the Child selector together with two Element selectors and a Child filter. Our goal is to apply a background color to the <h2> instances that are the first child of a <div> section. If you open the source with your browser, you can see that the background is applied to all of the <h2> instances of the page, but not the one having text Another subtitle. In fact, the latter doesn't match the condition of being the first <h2> inside the <div> section because it appears after the one having text "jQuery is so cool!."

In the second line, we're targeting the <li> instances that are multiples of 3 plus 1 (1, 4, 7, and so on) to change their text color. As you can see, the second line is really interesting because it proves the possibility of using an equation as an index selector. This is a really powerful system since you can not only target multiples of a given number, but also add a specific one, hence the use of the +1 in our equation. Its use can really simplify your life in several cases, so use it when possible instead of creating a complex loop.