jQuery Selectors

By: Rajesh P.S.

The jQuery selector serves as a potent tool facilitating the discovery of DOM elements within your webpage. Typically, your initiation into this process involves invoking the selector function $() within the jQuery framework. These selectors assume the key role of "locators," enabling the identification and retrieval of HTML elements predicated on a spectrum of attributes including names, IDs, classes, types, and attribute values, among other discerning criteria. Akin to the CSS conventions, these selectors expedite the task of web authors, affording them the ability to promptly and effortlessly discern specific clusters of page components for manipulation through the array of methods offered by the jQuery library.

jQuery selectors start with the dollar sign and parentheses - $() . A jQuery statement typically follows the syntax pattern:

$(selector).methodName();

Continue Reading...

How to use jQuery Selectors and CSS Selectors

example

To find elements with a specific class, write a period character , followed by the name of the class:

$(".MyClass")

jQuery Basic Selectors

All Selector ("*")

To select all elements of the page, we can use all selectors, for that we need to use * (asterisk symbol).

example

Element Selector

To select all elements of specific type , we can use element selector. We need to use the html tag name.

$("p").text('Paragraph Changed...');

<p>This is a Paragraph</p>

Browser View

This is a Paragraph

The above code shows how to change the content of a paragraph with new content.

Full Source

<html> <head> <title>Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").text('Paragraph Changed...'); }); }); </script> </head> <body> <p>This is a Paragraph</p> <button>Click me</button> </body> </html>

Selecting Elements by ID

Each element possesses a distinctive and singular ID within the confines of a web page. The hash (#) operator assumes the key role of facilitating the selection of elements predicated on their unique ID attributes. Through the utilization of the id selector pattern, you gain the ability to pinpoint a specific element with precision.

$('#myID').append(' Added here');

The above code shows how to append string to the existing in the paragraph element using jQuery ID selector .

Browser View

I am Here...

Full Source

<html> <head> <title>Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $('#myID').append(' Added here'); }); }); </script> </head> <body> <br> <br> <p id="myID">I am Here...</p> <button>Click me</button> </body> </html>

Selecting Elements by Class

The jQuery class selector is instrumental in identifying elements that bear a designated class. When seeking out elements associated with a particular class, employ the period character followed by the class name to pinpoint these specific elements.

$('.myClass').append(' Added here');

The above code shows how to append string to the existing in the paragraph element using jQuery Class selector.

Browser View

I am Here...

Full Source

<html> <head> <title>Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $('.myClass').append(' Added here'); }); }); </script> </head> <body> <p class="myClass">I am Here...</p> <button>Click me</button> </body> </html>

Multiple Selectors

It is possible to designate an array of selectors for amalgamation into a unified outcome. However, it's crucial to note that the sequence of DOM elements within the jQuery object may not necessarily mirror the original order.

$(".myClass, #myID").css("background-color", "red");

<p class="myClass">Paragraph with Class selector</p> <p id="myID">Paragraph with ID selector</p>

Browser View

Paragraph with Class selector

Paragraph with ID selector

Full Source

<html> <head> <title>Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(".myClass, #myID").css("background-color", "red"); }); }); </script> </head> <body> <p class="myClass">Paragraph with Class selector</p> <p id="myID">Paragraph with ID selector</p> <button>Click me</button> </body> </html>

Select Elements by Attribute

jQuery further extends its capabilities by enabling the retrieval of elements predicated on the attributes assigned to them. This is accomplished through the utilization of the attr(properties) method, which facilitates the assignment of a key/value object as properties to all elements that correspond to the specified criteria.

Syntax

selector.attr({property1:value1, property2:value2})

jQuery empowers us with the capability to adeptly manipulate the properties of HTML elements. Following the acquisition of access to these properties, we retain the flexibility to effect alterations to the attributes at a later juncture.

$("img").attr({ src: "change.png", title: "Attribute", alt: "Attribute Change", border: "4px solid black" });

The above code use jQuery to change the image source, the alt attribute, the title attribute and add additional border attributes to image.

Browser View

Full Source

<html> <head> <title>Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("img").attr({ src: "change.png", title: "Attribute", alt: "Attribute Change", border: "4px solid black" }); }); }); </script> </head> <body> <img src="logo.png" title="None" alt="None" /> <br> <button>Click me</button> </body> </html>

Conclusion

jQuery selectors provide a powerful mechanism for identifying and selecting HTML elements based on various criteria such as classes, IDs, and attributes. These selectors enable efficient manipulation and modification of element properties, granting developers the flexibility to work with specific elements within a webpage.

Next > jQuery Attributes

Related Topics