Different types of selectors in jQuery?

Selectors In jQuery

JQuery selector is a function, which uses an expression to find out matching elements from DOM which is based on given criteria. Selectors are used to selecting one or more than one object or element in DOM. Once you select that object or element you can perform different operations on that.

All Selector (“*”):

It will select all elements in Dom. All selector is a very slow selector.

<html>
<head>
    <title>
        JQuery Demos
    </title>


    <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.j"></script>
    <script>
        window.jQuery || document.write(unescape("<script src='/libs/jquery-3.4.1.js' type='text/javascript'%3E%3C/script%3E"));
    </script>

</head>
<body>
    <h1>Hello Sagar</h1>

    <script>
        $(document).ready(function () {
            $("#txtname").val('Jquery Is Present ');
        });

        $("*").css("border", "3px solid red");

        alert($("*").length);
    </script>

    <input type="text" id="txtname" />

    <p>Paragraph One</p>
    <p>Paragraph Two</p>
    <h1>First Heading Tag</h1>
    <h1>Second Heading Tag</h1>
</body>


</html>
Different types of selectors in jQuery?

jQuery animated Selector :

It will select all elements which are in the current progress of animation it means the currently moving or animated object is selected.

$( ":animated" )

But to work this selector you required jquery effect module in your jquery build else it will throw an error.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>animated demo</title>
    <style>
        div {
            background: yellow;
            border: 1px solid #AAA;
            width: 80px;
            height: 80px;
            margin: 0 5px;
            float: left;
        }
        div.colored {
            background: green;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<button id="run">Run</button>
 
<div></div>
<div id="mover"></div>
<div></div>
 
<script>
    $( "#run" ).click(function() {
        $( "div:animated" ).toggleClass( "colored" );
    });
 
    function animateIt() {
        $( "#mover" ).slideToggle( "slow", animateIt );
    }
 
    animateIt();
</script>
 
</body>
</html>

Attribute Contains Prefix Selector [name|=”value”] / attribute

It will select the element with specific attribute with value.

Different types of selectors in jQuery?
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>attributeContainsPrefix demo</title>
    <style>
        a {
            display: inline-block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<a href="example.html" hreflang="en">Sagar Jaybhay</a>
<a href="example.html" hreflang="en-UK">Sagar Jaybhay 1</a>
<a href="example.html" hreflang="english">Sagar Jaybhay 2</a>
 
<script>
    $( "a[hreflang='en']" ).css( "border", "3px dotted green" );
</script>
 
</body>
</html>

This is below tag

 $( "a[hreflang='en']" ).css( "border", "3px dotted green" );

In this hreflang attribute with value en is checked and apply border around this.

Attribute Contains Selector [name*=”value”]

This is used to check the value is present not checked exact match but any occurrence in a text is present or not.

It will select an element if the selector’s string appears anywhere within the element’s attribute value.

Different types of selectors in jQuery?

Select Elements by Name

It is a common selector pattern. In quotes, you need to provide element by name like

$(‘p’) which returns an array of all P elements on-page.

Select Elements by Id

In this pattern, you need to provide the id of an element. But important is that you need to put # symbol before id of an element.

$(“#ID”)

Find by CSS Class

You will able to select an element on the basis of what class applied to them.

$('. CSSClass')

it will find all elements with class=CSSClass.

Find by Input type

in this, you will able to find an element that has same input type.

$(":button")

This will find all button elements on-page.

Even-Odd rows

$('tr:odd') Find all odd rows. (1,3,5,7..)
$('tr:even') Find all even rows.(0,2,4,6..)

Points to Remember

  1. Jquery selector will use to find DOM elements in web page
  2. Syntax: $(‘selector expression’,’context’). context is an optional parameter.
  3. jQuery includes various selector patterns e.g element name, #id, attributes, descendant elements, css class, input types etc.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *