Skip to main content

jQuery Selectors

jQuery is a powerful JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. One of the core features of jQuery is the ability to "select" and manipulate HTML elements. These selections are made using what jQuery calls "selectors".

What are jQuery Selectors?​

jQuery selectors allow you to select and manipulate HTML elements. They are used to "find" or select HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in fact, you can use any CSS selector in jQuery.

Types of jQuery Selectors​

There are several types of jQuery selectors, each with its own purpose. Let's take a look at some of these:

1. Element Selector​

The jQuery element selector selects elements based on the element name. For instance:

$("p")

The above code selects all <p> elements.

2. #id Selector​

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element. For example:

$("#test")

The above code selects the element with id="test".

3. .class Selector​

The jQuery .class selector finds elements with a specific class. For example:

$(".test")

The above code selects all elements with class="test".

4. Universal (*) Selector​

The jQuery universal (*) selector selects all elements available in a DOM. For example:

$("*")

The above code selects all elements.

5. Multiple Elements E, F, G Selector​

The jQuery E, F, G, etc. selectors select multiple elements with different names. For example:

$("div, p, span")

The above code selects all divs, paragraphs and span elements.

Using jQuery Selectors​

To use jQuery selectors, you need to reference the jQuery library, either from a CDN or downloaded and stored locally.

After you have referenced it, you can start using jQuery selectors. Here is an example:

$(document).ready(function(){
    $("p").css("color", "red");
});

This will select all paragraph elements on the page and change their text color to red. Note that the $() function is used to define jQuery, and $(document).ready() makes sure the jQuery code doesn't run until the document is ready.

Conclusion​

jQuery selectors are a powerful tool that allows us to select and manipulate HTML elements. Understanding how to use them effectively is crucial to making the most of the jQuery library. There are many more selectors available in jQuery beyond what we've covered here, so don't hesitate to explore further and experiment. Happy coding!