jQuery Selectors: Class and ID selectors

This entry is part 4 of 33 in the series jQuery 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

This entry is part 3 of 33 in the series jQuery Selectors

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 *

This entry is part 2 of 33 in the series jQuery Selectors

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>