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>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        $(function () {
            $('#hide-button').click(function () {
<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>
<button id='hide-button'>Hide elements!</button>

Series Navigation<< jQuery Selectors: Selecting elements based on tags
jQuery Selectors: Select elements of a specific class >>

Leave a comment

Leave a Reply