jQuery Selectors: Select elements of a specific class

The example here will select a <ul> element with a class=’rock’.

So only the second list, American Rock is selected.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('ul.rock').css('color', 'navy');
        });
    </script>
</head>
<body>

<h4>British Pop</h4>
<ul>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
</ul>

<h4>American Rock</h4>
<ul class='rock'>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>

jQuery Selectors: Class and ID selectors

When we were learning jQuery we have gone through some examples very similar to below.

Here we show how we can select elements based on class and ID.

The ID used here is #hide-button and the class is .red.

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('#hide-button').click(function () {
                $('.red').hide();
            });
        });
    </script>
</head>
<body>
<h1 id='title' class='bold red'>The Headline</h1>

<div id='container'>
    Class and id selector.
    <p id='description' class='red'>The headline and this p will be hidden.</p>

    <p id='note' class='green'>This happens because of their class attribute's value.</p>
</div>
<button id='hide-button'>Hide elements!</button>
</body>
</html>

jQuery Selectors: Selecting elements based on tags

In the earlier example, we have used * to select all elements.

We could specify multiple elements separated by comma.

The example here uses $(‘h4, p, a’).  Basically all elements that we could style in the page.

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('h4, p, a').css('color', 'blue');
        });
    </script>
</head>
<body>
<h4>Ushuaia</h4>

<p>Southernmost city in the world.</p>
<a href="http://en.wikipedia.org/wiki/Ushuaia">Visit us here.</a>
</body>
</html>

jQuery Selectors: Universal selector *

We first look at the universal selector * where it selects all HTML elements.

The <h4>, <p> and <a>  were all selected using *.

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('*').css('color','blue');
        });
    </script>
</head>
<body>
<h4>Ushuaia</h4>
<p>Southernmost city in the world.</p>
<a href='http://en.wikipedia.org/wiki/Ushuaia'>Visit us here.</a>
</body>
</html>

jQuery Selectors: Introduction

jQuery selector is actually based on CSS selectors.  So knowing CSS selectors will definitely help in learning jQuery Selectors.

As in CSS selectors, jQuery selectors allow you to find HTML elements in many ways.

The most commonly used selectors are the basic ones.

The basic selectors focus on the ID attribute, class attribute, and tag name of HTML elements.

To use jQuery selector, simply use $(selector).

Some examples are $(‘h4’), $(‘p’) and $(‘a’).