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)

Selecting by tag (Must know)


In this recipe, you'll learn how to select elements by their tag name using what is known as element selector. The goal of this task is to show you how to select and hide the paragraphs in the page.

How to do it...

To achieve our goal, perform the following the steps:

  1. Create a copy of the template.html file and rename it as selecting-by-tag-names.html.

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

    <h1>The Tag name selector</h1>
    <div>
        This example shows you how to use a tag name.
        <p>After you'll click the button below, both the paragraph of this page will be hidden.</p>
        <p>I'm yet another paragraph</p>
    </div>
    <button id="hide-button">Hide elements!</button>
  3. Edit the <head> section of the page adding this code:

    <script>
        $(document).ready(function() {
            $('#hide-button').click(function() {
                $('p').hide();
            });
        });
    </script>
  4. Save the file and open it with your favorite browser.

How it works...

Although the entire recipe is slightly different from the previous one, it acts differently. As usual, before typing some JavaScript, we set up a short content for our page.

Once the markup is in place, we wrote the listener for the document.ready event and the click event on the button. Inside the latter, we used the jQuery constructor and passed it a tag name. I chose to hide the two paragraphs, but you can replace it with the tag you prefer. Unlike the other selectors we've seen so far, to collect elements by their tag name, we don't need to add any additional character (as we do in CSS). Thus, to hide the paragraphs, we just pass p to the constructor and then call the hide() function.

There's more...

Tag names can be combined with other selectors. Let's learn how.

Selecting and using tag names with classes and IDs

The Element selector can be used in conjunction with class and ID selectors to restrict the retrieved collection by just prepending them. For example, we can ask jQuery to hide all of the paragraphs having class red. To do that, we can write the following code:

$('p.red').hide();

Another example is to use a tag name with an ID. For example we can select the paragraph having as its ID description, as follows:

$('p#description').hide();

In such cases, jQuery performs a supplementary test before identifying the element as a match. Therefore, it'll retrieve the first (if any) paragraph having ID description. Recalling what I pointed out in the Selecting by ID (Must know) recipe, you should never need to use the tag name with the ID selector since you should have just one element with a given ID.

getElementsByTagName()

Where possible, jQuery uses getElementsByTagName() to select elements using their tag name. This function is widely supported by all of the major browsers, including Internet Explorer starting from version 6 with full support and 5.5 with partial support.