What is JQuery selector in Web development?

0 votes
55 views
Ethan Karla asked 27-Jul-2021 in Web Application by Ethan Karla

What is JQuery selector in Web development?

1 Answer

1 votes
Ravi Vishwakarma answered 28-Jul-2021 by Ravi Vishwakarma
JQuery selectors allow you to select HTML elements. JQuery selectors are used to find HTML elements based on their name, id, classes, types, attributes, values of attributes and tag name, JQuery selector are same as CSS selector. All JQuery selectors start with the dollar sign and parentheses $() or called factory function.
Tag name (element) selector
 The tag name selector or element selector these are equals. This selector are use tag name for selecting the element of html page.
Syntax
 $(“tag-name”).function ()
<!DOCTYPE html>

<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
    $(document).ready(function () {
        $('button').click(function () {
            $('p').css({'background-color':'yellow'});
        });
    });
</script>
<style>
</style>
</head>
<body>
<p>Click me for hiding the data </p>
<p>Click me again </p>
<p>Click me again and again </p>
    <button>Click Me for change the paragraph color</button>
</body>
</html>
The #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 this id selector use the selecting an elements by using the id. This id selector use with #id-name (#mark, #demo, #red), we will always write with hastag (#).
Syntax
 $(“#id-name”).function ()
<!DOCTYPE html>

<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('#p3').css({ 'background-color': 'yellow' });
                $('#p2').css({ 'background-color': 'blue' });
                $('#p1').css({ 'background-color': 'red' });
            });
        });
    </script>
    <style>
</style>
</head>
<body>
    <p id='p1'>This is #p1</p>
    <p id='p2'>This is #p2</p>
    <p id='p3'>This is #p3 </p>
    <button>Click Me for change the paragraph color using id selector</button>
</body>
</html>
The .class Selector
 JQuery .class selector to find elements with class attribute this selector is used to select an element of an html page, to find elements of a specific class. This selector writes with the period operator (.red, .navbar, .menu)
Syntax
 $(“.class-name”).function ()
<!DOCTYPE html>

<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.cls1').css({ 'background-color': 'yellow' });
                $('.cls3').css({ 'background-color': 'blue' });
                $('.cls2').css({ 'background-color': 'red' });
            });
        });
    </script>
    <style>
</style>
</head>
<body>
    <p class='cls1'>This is .cls1</p>
    <p class='cls2'>This is .cls2</p>
    <p class='cls3'>This is .cls3</p>
    <button>Click Me for change the paragraph color using id selector</button>
</body>
</html>