Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • 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 0th and 2nd index paragraphs.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery eq() Method</title>
     
    <script src=
    </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=
    </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>


Output:

Difference between eq() and get() methods:

jQuery eq() Method

jQuery get() Method

This method return the element as a jQuery object. This method returns a DOM element.
This method retrieves the n-1th jQuery object. This method returns the n-1th DOM element.
This method creates a new object from one element within the set and returns it. This method retrieves the DOM element that matches the jQuery object.
Its return method in an element with index of selected elements. It helps in loading data from the server using a HTTP GET request

Its syntax is -:

$(selector).eq(index)

Its syntax is -:

$.get(URL,data,function(data,status,xhr),dataType)

It takes one parameter as a index. It takes one parameter as a URL.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!