jQuery Utility Methods

jQuery utility methods are helpful, standalone functions that can perform various tasks, such as object manipulation, type checking, and debugging. Unlike jQuery methods that operate on DOM elements, utility methods are called directly on the jQuery object itself.

Commonly Used jQuery Utility Methods

Below are some commonly used utility methods, along with examples:

1. $.each()

Iterates over an array or object.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.each() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <div id="output"></div>
    <script>
        $(document).ready(function() {
            var fruits = ["Apple", "Banana", "Cherry"];
            $.each(fruits, function(index, value) {
                $("#output").append(index + ": " + value + "<br>");
            });

            var person = { name: "John", age: 30 };
            $.each(person, function(key, value) {
                $("#output").append(key + ": " + value + "<br>");
            });
        });
    </script>
</body>
</html>

Try It Now

2. $.extend()

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.extend() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var defaults = { color: "blue", fontSize: "14px" };
            var userSettings = { fontSize: "18px", fontWeight: "bold" };

            var finalSettings = $.extend({}, defaults, userSettings);

            console.log(finalSettings);
            // Output: { color: "blue", fontSize: "18px", fontWeight: "bold" }
        });
    </script>
</body>
</html>

Try It Now

3. $.type()

Determines the type of a JavaScript object.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.type() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            console.log($.type("Hello"));       // Output: "string"
            console.log($.type(42));           // Output: "number"
            console.log($.type({}));           // Output: "object"
            console.log($.type([]));           // Output: "array"
            console.log($.type(null));         // Output: "null"
            console.log($.type(undefined));    // Output: "undefined"
        });
    </script>
</body>
</html>

Try It Now

4. $.isArray()

Checks if a variable is an array.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.isArray() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            console.log($.isArray([1, 2, 3])); // Output: true
            console.log($.isArray({}));        // Output: false
        });
    </script>
</body>
</html>

Try It Now

5. $.trim()

Removes whitespace from the beginning and end of a string.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.trim() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    
    <p>Original String: <span id="original"></span></p>
    <p>Trimmed String: <span id="trimmed" class="output"></span></p>
    <script>
        $(document).ready(function() {
            var str = "   Hello World!   ";
            var trimmedStr = $.trim(str);
            
            // Log to console
            console.log("'" + str + "'");        // Output: '   Hello World!   '
            console.log("'" + trimmedStr + "'");// Output: 'Hello World!'

            // Display on webpage
            $("#original").text("'" + str + "'");
            $("#trimmed").text("'" + trimmedStr + "'");
        });
    </script>
</body>
</html>

Try It Now

6. $.inArray()

Searches for a value in an array and returns its index or -1 if not found.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.inArray() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var fruits = ["Apple", "Banana", "Cherry"];
            console.log($.inArray("Banana", fruits)); // Output: 1
            console.log($.inArray("Mango", fruits));  // Output: -1
        });
    </script>
</body>
</html>

Try It Now

7. $.isFunction()

Checks if a variable is a function.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.isFunction() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var testFunc = function() {};
            console.log($.isFunction(testFunc)); // Output: true
            console.log($.isFunction(123));      // Output: false
        });
    </script>
</body>
</html>

Try It Now

8. $.isEmptyObject()

Checks if an object has no enumerable properties.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.isEmptyObject() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var obj1 = {};
            var obj2 = { key: "value" };

            console.log($.isEmptyObject(obj1)); // Output: true
            console.log($.isEmptyObject(obj2)); // Output: false
        });
    </script>
</body>
</html>

Try It Now

9. $.now()

Returns the current timestamp in milliseconds.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.now() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            console.log($.now()); // Output: Current timestamp in milliseconds
        });
    </script>
</body>
</html>

Try It Now

10. $.parseJSON()

Parses a JSON string into a JavaScript object.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $.parseJSON() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var jsonStr = '{"name": "John", "age": 30}';
            var obj = $.parseJSON(jsonStr);

            console.log(obj.name); // Output: John
            console.log(obj.age);  // Output: 30
        });
    </script>
</body>
</html>

Try It Now

Summary

jQuery utility methods provide quick solutions for tasks like:

  • Iterating over arrays/objects ($.each())
  • Manipulating objects ($.extend())
  • Checking types ($.type(), $.isArray(), etc.)
  • Parsing and formatting data ($.trim(), $.parseJSON())
  • Debugging and utility operations ($.now(), $.isEmptyObject())