Define Selectors in jQuery and What are the types of selectors?
Last Updated :
19 Dec, 2022
Selectors in jQuery: Selectors in jQuery are functions that primarily focus on selecting particular HTML elements and modifying them as per the action they need to perform. These selectors select particular HTML elements as per their name, element type, class, id, attributes or values of attributes, and much more.
In other words, we can say that selectors are used to picking HTML elements and performing some particular action on them, and this picking of elements is based on some factors like id, class, name, element name, attributes, etc. Selectors play an important part in the selection of one or more elements in jQuery.
These selectors are very similar to the CSS selectors, but jQuery has additional customized selectors.
We can compare these selectors to select statements in SQL that select records from the database based on some conditions.
Syntax of selecting HTML elements using jQuery selectors:
$(document).ready(function(){
$(selector).action()
});- In jQuery, we select the selector with a dollar sign($) and put the selectors inside the braces(). $() is termed as the factory function.
- The action() method is the particular action that we want to be performed by the selected HTML element.
find or select elements in jQuery:
| Selector | Description |
| The element selector |
Element selector describes the name of the HTML element available in DOM.
For example: $('li') will fetch all the list items present inside the entire document.
|
| The id selector |
Element selector describes the HTML element that is available with the particular id in DOM.
For example: $('#id1') will fetch all the elements that have the id as 'id1' in the document
|
| The class selector |
Element selector describes the HTML element that is available with the particular class in DOM.
For example: $('.class1') will fetch all the elements that have the class defined as 'class1' in the document
|
We can make use of these selectors in combination with other selectors or they can also be used on their own. All these selectors follow a similar principle in jQuery with some modifications.
Types of selectors in jQuery:
1. The element selector
The element selector in jQuery fetches the HTML elements based on their names.
Syntax:
$(document).ready(function(){
$(htmlElementName).action()
});
Example: The following example shows a selection of all the paragraph tags <p> that are present inside an HTML document. We will be changing the background color of all the <p> elements in the document to green.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Element Selector jQuery Example</title>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("p").css("background-color", "#006600");
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>This is a paragraph tag.</p>
<p id="id1">
This is a paragraph tag with id selector.
</p>
<p class="class1">
This is a paragraph tag with class selector.
</p>
</body>
</html>
Output:
2. The Id selector
The element selector in jQuery fetches the HTML elements based on their defined id.
Syntax:
$(document).ready(function(){
$("#id_of_element").action()
});
Example: The example that shows the selection of those paragraph tags that are having their defined id as 'id1 ' in an HTML document. We will be changing the background color of all the <p> elements having 'id1' as their defined id in the document to "green".
HTML
<!DOCTYPE html>
<html>
<head>
<title>Id Selector jQuery Example</title>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#id1').css("background-color", "#006600");
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>This is a paragraph tag.</p>
<p id="id1">
This is a paragraph tag with id selector.
</p>
<p class="class1">
This is a paragraph tag with class selector.
</p>
</body>
</html>
Output:
3. The Class selector
The element selector in jQuery fetches the HTML elements based on their defined class.
Syntax:
$(document).ready(function(){
$(".class_of_element").action()
});
Example: The following example shows the selection of those paragraph tags that is having their defined class as 'class1 ' in the HTML document. We will be changing the background color of the <p> elements having 'class1' as their defined class in the document to "green".
HTML
<!DOCTYPE html>
<html>
<head>
<title>Class Selector jQuery Example</title>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('.class1').css("background-color", "#006600");
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>This is a paragraph tag.</p>
<p id="id1">
This is a paragraph tag with id selector.
</p>
<p class="class1">
This is a paragraph tag with class selector.
</p>
</body>
</html>
Output:
Similar Reads
What are the fastest/slowest selectors in jQuery ?
jQuery Selectors are used for selecting and manipulating HTML elements. In jQuery, there are mainly three selectors. ID selectorClass selectorElement selector Before moving forward, first, let's briefly see how these selectors are used. Element Selector: jQuery element selector selects the element o
4 min read
What's the difference between selector and filter() in jQuery?
jQuery Selectors: allow us to select and manipulate HTML element(s). It is used to select HTML elements such as ids, classes, types, attributes, etc using jQuery selectors and then add any CSS properties or events to the selected HTML elements. Syntax: For selecting a button tag the syntax would be
2 min read
What is the difference between position() and offset() in jQuery ?
Both the jQueryUI method the returns the object which contains integer co-ordinate properties of the top and left positions. The positions of top and left coordinates are returned in pixels. Both functions are applied only on visible elements, not on hidden elements. Example: The example gives top a
2 min read
What is the usage of Draggable, Droppable, Resizable, Selectable in jQuery UI ?
In this article, we will see the Draggable, Droppable, Resizable, and Selectable widgets in detail with their usages. jQuery UI Draggable: The jQuery UI Draggable widget is used to perform drag operation. This widget allows elements to be moved by using the mouse. There are lots of options, methods
3 min read
What are the methods used to provide effects in jQuery ?
Effects in jQuery are generally used for adding animation to a web page. The jQuery library has several methods which we can use for making custom animation for a web page. In this article, we will see every method that is available in jQuery for making animation. We will discuss all the methods alo
11 min read
jQuery | Selectors and Event Methods
jQuery selectors allow targeting HTML elements using CSS-like syntax, enabling manipulation or interaction. Event methods facilitate handling user actions, like clicks or input changes, by attaching functions to selected elements, enhancing interactivity and dynamic behavior in web development. Tabl
5 min read
What is the use of delegate() method in jQuery ?
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax inte
2 min read
What is the difference between parent() and parents() methods in jQuery ?
The jQuery parent() and parents() methods return the elements which are ancestors of the DOM. It traverses upwards in the DOM for finding ancestors. In this article, we will learn about the difference between parent() and parents() methods. parent() Method: The parent() method traverse only one leve
4 min read
How to use *= operator in jQuery attribute selector ?
This article will show you an idea of using the *= operator in jQuery attribute selectors. The *= operator is used to select the sub-string attribute and apply operations on it. Syntax: $("div[myAttr*='GFG']").jQueryMethod({ // Code }) Approach: We will create HTML div elements with some attributes.
2 min read
Which methods are used to set styles on selected elements in jQuery ?
One or more styles can be added to the HTML elements by using the jQuery css() method. Even we can create some custom CSS classes with the required styles that we want to add and add that class by using the addClass() method. In this article, we will see the two ways of adding one or more style prop
3 min read