What is the difference between eq() and get() methods in jQuery ?

Last Updated : 10 Aug, 2022

In this article, we will discuss all the differences between eq() and get() methods in jQuery.

eq() Method: This method is used to locate the selected elements directly and returns an element with a specific index.

Syntax:

$(selector).eq(index)

Example: In this example, we will set the different text colors on the 0^th and 2^nd index paragraphs.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>jQuery eq() Method</title>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h3>jQuery eq() Method</h3>


    <p class="text">HTML</p>



    <p class="text">CSS</p>



    <p class="text">JavaScript</p>




    <script>
        $(document).ready(function () {
            $(".text").eq(0).css("color", "red");
            $(".text").eq(2).css("color", "blue");
        });
    </script>
</body>

</html>

Output:

get() method: This method loads the data from the server by using the GET HTTP request. This method returns XMLHttpRequest object.

Syntax:

$.get( url, [data], [callback], [type] )

Example: In this example, we will get the data from the server and display it on the screen. This code will run on the server.

Filename: gfg.php

PHP

<?php
if( $_REQUEST["name"] ) {
  
   $name = $_REQUEST['name'];
   echo "A ". $name . " portal for geeks";
}
  
?>

Filename: index.php

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS get() Method
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>CSS get() Method</h3>

    <div id="GFG">
        Welcome to GeeksforGeeks
    </div>
    <br>

    <input type="button" id="Geeks" value="Load Data" />

    <script>
        $(document).ready(function () {
            $("#Geeks").click(function (event) {
                $.get(
                    "gfg.php", {
                    name: "Computer Science"
                },
                    function (data) {
                        $('#GFG').html(data);
                    });
            });
        });
    </script>
</body>

</html>