jQuery Miscellaneous Functions

jQuery offers a variety of miscellaneous utility functions that are not directly related to DOM manipulation, AJAX, or events but are helpful for specific scenarios in development. These functions include type checking, array manipulation, string handling, and more.

1. jQuery Type Checking and General Utilities

Function Description Example
$.type(obj) Returns the type of the given object (e.g., string, number, array, object, etc.). $.type([]); // "array"
$.isArray(obj) Checks if the object is an array. (Deprecated in jQuery 3.3. Use Array.isArray instead.) $.isArray([1, 2, 3]); // true
$.isFunction(obj) Checks if the object is a function. (Deprecated in jQuery 3.3.) $.isFunction(function() {}); // true
$.isNumeric(obj) Checks if the object is numeric (e.g., 3, "3.5", NaN is excluded). $.isNumeric("3.14"); // true
$.isEmptyObject(obj) Checks if an object is empty (has no enumerable properties). $.isEmptyObject({}); // true
$.isPlainObject(obj) Checks if the object is a plain object (created with {} or new Object()). $.isPlainObject({}); // true
$.trim(str) Removes leading and trailing whitespace from a string. (Deprecated in jQuery 3.5. Use String.prototype.trim instead.) $.trim(" Hello "); // "Hello"

2. jQuery String and Array Utilities

Function Description Example
$.each(obj, callback) Iterates through objects or arrays. Returns false to break the loop. $.each([1, 2, 3], function(index, value) { console.log(index, value); });
$.map(array, callback) Transforms an array by applying a callback function to each element. let result = $.map([1, 2, 3], function(val) { return val * 2; }); // [2, 4, 6]
$.inArray(value, array) Checks if a value exists in an array. Returns the index or -1 if not found. $.inArray(2, [1, 2, 3]); // 1
$.merge(array1, array2) Merges two arrays into the first array. $.merge([1, 2], [3, 4]); // [1, 2, 3, 4]
$.grep(array, callback) Filters an array based on a callback function’s condition. let even = $.grep([1, 2, 3, 4], function(val) { return val % 2 === 0; }); // [2, 4]
$.makeArray(obj) Converts an array-like object into a true array. let arr = $.makeArray($("p"));
$.uniqueSort(array) Sorts an array and removes duplicate elements. (Available since jQuery 1.12 and 2.2) $.uniqueSort([3, 1, 2, 1]); // [1, 2, 3]

3. jQuery Deferred/Promise Utilities

Function Description Example
$.Deferred() Creates a Deferred object for managing asynchronous operations. let deferred = $.Deferred();
$.when(deferreds) Waits for one or more Deferred objects or promises to resolve. $.when($.ajax("data.json"), $.ajax("data2.json")).done(function(resp1, resp2) { ... });

4. jQuery Data and DOM Utilities

Function Description Example
$.data(element, key, value) Attaches data to an element. $.data($("#div")[0], "key", "value");
$.removeData(element, key) Removes data from an element. $.removeData($("#div")[0], "key");
$.contains(container, contained) Checks if a DOM element is a descendant of another. $.contains(document.body, $("#child")[0]); // true

5. jQuery Performance and Miscellaneous Utilities

Function Description Example
$.now() Returns the current timestamp in milliseconds since January 1, 1970. $.now(); // 1690234809123
$.proxy(fn, context) Changes the this context of a function. let boundFn = $.proxy(myFunction, obj);

Examples

1. Using $.map() to Double Array Values

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery $.map()</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            let originalArray = [1, 2, 3, 4];
            let doubledArray = $.map(originalArray, function(value) {
                return value * 2;
            });
            console.log("Doubled Array:", doubledArray);
        });
    </script>
</head>
<body></body>
</html>

Try It Now

2. Using $.when() to Handle Multiple AJAX Requests

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery $.when()</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $.when(
                $.ajax("data1.json"),
                $.ajax("data2.json")
            ).done(function(response1, response2) {
                console.log("Data 1:", response1[0]);
                console.log("Data 2:", response2[0]);
            }).fail(function() {
                console.log("Error fetching data");
            });
        });
    </script>
</head>
<body></body>
</html>

Try It Now

3. Using $.contains() to Check Parent-Child Relationship

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery $.contains()</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            let result = $.contains(document.body, $("#child")[0]);
            console.log("Is #child in the body?", result); // true
        });
    </script>
</head>
<body>
    <div id="parent">
        <div id="child">Child Element</div>
    </div>
</body>
</html>

Try It Now

Key Points

  1. Utility Functions: jQuery miscellaneous functions simplify common tasks like type checking, array manipulation, and string trimming.
  2. Asynchronous Handling: Deferred objects and $.when() streamline complex asynchronous workflows.
  3. Performance: Use functions like $.each() and $.map() for efficient iterations over arrays and objects.