Horje
JQuery Selectors

What is a jQuery Selector?

jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction.

Syntax:

$(" ")

Note: jQuery selector starts with the dollar sign $, and you enclose the selector inside parentheses ().

We will explore some basic selectors along with the help of examples.

jQuery #id Selector

jQuery #id selector allows you to target specific elements by their unique ID attribute using the # symbol followed by the ID name.

Syntax:

$( "#id-name" )

Example: In this example, we added two buttons with IDs “colorButton” and “hideButton.” The first button is responsible for changing the background color of the first paragraph (with ID “p1”) to sky blue, and the second button is responsible for hiding the second paragraph (with ID “p2”).

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!--jQuery library included -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
     
    <script>
        $(document).ready(function () {
     
            // When the button with ID "colorButton" is
            // clicked, set background color of the
            // paragraph with ID "para1"
            $("#colorButton").click(function () {
                $("#p1").css("background-color", "skyblue");
            });
 
            // When the button with ID "hideButton" is
            // clicked, hide the paragraph with ID "para2"
            $("#hideButton").click(function () {
                $("#p2").hide();
            });
        });
    </script>
</head>
 
<body>
    <h2>Id selector</h2>
 
    <p id="p1">
        In this peragraph we are changing background.
    </p>
    <p id="p2">
        In 2nd peragraph we are going hide this pera.
    </p>
 
    <!-- Button to change background
        color of the first paragraph -->
    <button id="colorButton">
        Change Background Color
    </button>
    <br><br>
 
    <!-- Button to hide the second paragraph -->
    <button id="hideButton">
        Hide Paragraph
    </button>
</body>
 
</html>

Output:

selector-1-id

jQuery .Class Selector

In jQuery, a class selector is used to target HTML elements by their class attribute using the dot ( . ) symbol followed by the class name.

Syntax:

$( ".class" )

Example: In this example, we are using a class selector to target our given p tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!--jQuery library included -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
     
    <script>
        $(document).ready(function () {
 
            $(".colorBtn").click(function () {
                $(".p1").css("background-color", "yellow");
            });
        });
    </script>
</head>
 
<body>
    <h2>Class selector</h2>
 
    <p class="p1">
        In this peragraph we are changing background.
    </p>
 
    <!-- Button to change background
        color of the first paragraph -->
    <button class="colorBtn">
        Change Background Color
    </button>
</body>
 
</html>

Output:

selector-1-class

CSS selector

jQuery Tag Name Selector

In jQuery, a tag name selector is used to target HTML elements by their tag names.

Syntax:

$( "p" );

Example: In this example, we are using a tag name selector to target our p tag and provide some styling, in which we provide green color to our given text and the background color is sky blue to our p tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- jQuery library included -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function () {
            $(".colorBtn").click(function () {
                $("p").css({
                    "background-color": "skyblue",
                    "font-size": "25px",
                    "color": "green"
                });
            });
        });
    </script>
</head>
 
<body>
    <h2> Tag name selector</h2>
 
    <p>
        GeeksforGeeks <br>
        A computer science portal..!
    </p>
 
    <!-- Button to change background
        color, font size,
        and text color of the paragraph -->
    <button class="colorBtn">
        click here
    </button>
</body>
 
</html>

Output:

selector-1-tag-element

tag name selector

List of all jQuery Selectors

The following table shows the various types of selectors available in jQuery:

Selectors Syntax Description
ID selector $(“#id-name”) Specifies an id for an element to be selected.
Class selector $(“.class-name”) Specifies the class for an element to be selected.
Tag name selector $(“element-name”) Select and modify HTML elements based on the element name.
* $(“*”) It is used to select all elements.
.Class, .Class $(“.name1, .name2) It selects all elements with class name1 and name2.
:first $(“p:first”) It is used to select the first <p> element.
:last $(“p:last”) It is used to select the last <p> element.
:first-child $(“p:first-child”) It is used to select all <p> elements that are the first child of their parent.
:last-child $(“p:last-child”) It is used to select all <p> elements that are the last child of their parent.
only-child $(“p:only-child”) It is used to select all <p> elements that are the only child of their parent.
:only-of-type $(“p:only-of-type”) It is used to select all <p> elements that are the only child of its type of their parent.
:header $(“:header”) It is used to select all header elements.
:hidden $(“p:hidden”) It is used to select all hidden <p> element.
::animated $(“:animated”) It is used to select all animated elements.
:root $(“:root”) It is used to select the document’s root element.
:focus $(“:focus”) It is used to select an element if it is is currently focused.
:has(selector) $(“:has(p)”) It is used to select All div elements are selected that have a p element.
:empty $(“:empty”) The empty elements are selected.
[attribute] $(“[href]”) All elements with a href attribute are selected.
[attribute=value] $(“[href=’gfg.css’]”) All elements with a href attribute value equal to gfg.css are selected.
[attribute^=value] $(“[title^=’Hardy’]”) All elements with a title attribute value starting with “Hardy” are selected.
[attribute~=value] $(“[title~=’Good’]”) All elements with a title attribute value containing the specific value “Good” are selected.
[attribute*=value] $(“[title*=’Good’]”) All elements with a title attribute value containing the word “Good” are selected.
:Input $(“:input”) All input elements are selected.
:radio $(“:radio”) All input elements with type=”radio” are selected.
:password $(“:password”) All input elements with type=”password” are selected.
:text $(“:text”) All input elements with type=”text” are selected.
:checkbox $(“:checkbox”) All input elements with type=”checkbox” are selected.
:submit $(“:submit”) All input elements with type=”submit” are selected.
:reset $(“:reset”) All input elements with type=”reset” are selected.
:file $(“:file”) All input elements with type=”file” are selected.
:button $(“:button”) All input elements with type=”button” are selected.
:image $(“:image”) All input elements with type=”image” are selected.
:disabled $(“:disabled”) All disabled input elements are selected.
:enabled $(“:enabled”) All enabled input elements are selected.
:checked $(“:checked”) All checked input elements are selected.
:selected $(“:selected”) All selected input elements are selected.
parent descendant $(“parent descendant”) It is used to select all <p> elements that are descendants of a <div> element.
element + next $(“element + next”) The <p> elements that are next to each <div> elementis selected.
element ~ siblings $(“element ~ sibling”) All <p> elements that are siblings of a <div> elements are selected.
:eq(index) $(“ul li:eq(1)”) It will select the second element in a list (index starts at 0).
:gt(no) $(“ul li:gt(3)”) The list elements with an index greater than 3 are selected.
:lt(no) $(“ul li:lt(2)”) The list elements with an index less than 2 are selected.
:not(selector) $(“input:not(:empty)”) All input elements that are not empty are selected.
:even $(“tr:even”) it will select all even tr elements
:odd $(“tr:odd”) it will select all odd tr elements. 



Reffered: https://www.geeksforgeeks.org

JQuery

Related
How to Change Options of &lt;select&gt; with jQuery ? How to Change Options of &lt;select&gt; with jQuery ?
jQuery Events jQuery Events
What is data-ajax attribute? What is data-ajax attribute?
How to Create Page Loading Animation Effect using jQuery? How to Create Page Loading Animation Effect using jQuery?
How to Disable Text Selection using jQuery? How to Disable Text Selection using jQuery?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 17



 

Horje