jQuery Selectors

The jQuery selector enables you to find DOM elements in your web page. Most of the times you will start with selector function $() in the jQuery. jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. How to use jQuery Selectors and CSS Selectors jQuery selectors start with the dollar sign and parentheses - $() . A jQuery statement typically follows the syntax pattern:
$(selector).methodName();
example To find elements with a specific class, write a period character , followed by the name of the class:
$(".MyClass")

jQuery Basic Selectors

Complete List of jQuery Selectors

All Selector ("*")

To select all elements of the page, we can use all selectors, for that we need to use * (asterisk symbol). example
<script language="javascript" type="text/javascript"> $( "*" ).css( "border", "3px solid red" ); </script>

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>
run this source code 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 have an unique ID in the web page. Hash (#) operator is used to select the elements based on Id attribute . You can get a particular element by using id selector pattern.
$('#myID').append(' Added here');
<p id="myID">I am Here...</p>
The above code shows how to append string to the existing in the paragraph element using jQuery ID selector .
run this source code 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 finds elements with a specific class. To find elements with a specific class, write a period character , followed by the name of the class.
$('.myClass').append(' Added here');
<p class="myClass">I am Here...</p>

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

run this source code 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

You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.
$(".myClass, #myID").css("background-color", "red");
<p class="myClass">Paragraph with Class selector</p> <p id="myID">Paragraph with ID selector</p>
run this source code 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 also allows you to find an element based on attributes set on it. The attr( properties) method set a key/value object as properties to all matched elements. Syntax
selector.attr({property1:value1, property2:value2})
jQuery gives us the means to manipulate the properties of the HTML elements . We can modify the attributes later on after getting access to those properties.
$("img").attr({ src: "change.png", title: "Attribute", alt: "Attribute Change", border: "4px solid black" });
<img src="logo.png" title="None" alt="None" />
The above code use jQuery to change the image source, the alt attribute, the title attribute and add additional border attributes to image.
run this source code Browser View
None


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>