jQuery Selectors

jQuery selectors are widely used for matching a set of elements in the HTML document.

jQuery selector enables you to select and manipulate HTML element(s). Elements or Tags can be selected based on their name, id, classes and attributes.

All jQuery selectors start with a dollar sign and parentheses: $().


The element Selector

The jQuery element selector find HTML elements based on their tag names.
For example: $(‘h2’) selects all headings <h2> in the document.

Example:
In this example, jQuery element selector hides <h2> elements.

$(document).ready(function() {
    $("h2").hide();
});

The #id Selector

The jQuery #id selector finds HTML element based on id attribute. It is useful for finding single specific element because HTML page can have single unique id assigned to any element.

To find an HTML element with specific ID, write a hash (#) character followed by the id of the HTML element.

Example:
In this example, the elements with id=’main-content’ will be hidden.

$(document).ready(function() {
    $("#main-content").hide();
});

The .class Selector

The jQuery class selector finds elements with a given class name. Class selectors can select multiple elements having the same class name.

To find elements using Class selector, write a dot or period (.) character, followed by the class of the HTML element.

Example:
In this example, the elements with class=”myclass” will be hidden.

$(document).ready(function() {
    $(".myclass").hide();
});

Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.