jQuery Introduction | Utility Methods | Other Utility Methods $.each() $.extend() $.trim()

Tags:

Other utility methods

jQuery provides many utility methods with convenient features in addition to type checking methods.

$.each() method

The $.each() method is a general-purpose iterator function that can be used with both objects and arrays.

It receives an array or array-like object with a length property and repeatedly runs a callback function for that length. For an object, it repeatedly runs the callback function for the number of properties the object has.

The following example passes an array to the $.each() method and outputs each array element.

var arr = ["a", "b", "c"];
$.each(arr, function(index, value) {
  $("#text").append("index=" + index + ", value=" + value + "<br>");
});

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var arr = ["a", "b", "c"];
    $.each(arr, function(index, value) {
       $("#text").append("index=" + index + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.each()</h1>
  <p id="text"></p>
</body>
</html>

The following example passes an object to the $.each() method and outputs each property of the object.

var site = {
  "name" : "devkuma",
  "url" : "www.devkuma.com"
};

$.each(site, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
});

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var site = {
      "name" : "devkuma",
      "url" : "www.devkuma.com"
    };

    $.each(site, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.each()</h1>
  <p id="text"></p>
</body>
</html>

$.extend() method

The $.extend() method merges all properties from two or more objects into one object.

This method adds all properties of the second object to the first object passed as an argument.
Then it adds all properties of the third object to the first object.
In this order, it adds all properties of every object passed as an argument to the first object.

var obj1 = {
  "name" : "google",
};
    
var obj2 = {
  "url" : "www.google.com",
  "adc" : "def"
};
    
var obj3 = {
  "name" : "devkuma",
  "url" : "www.devkuma.com",
  "book" : "jQuery" 
};

$.extend(obj1, obj2, obj3);
$.each(obj1, function(key, value) {
  $("#text").append("key=" + key + ", value=" + value + "<br>");
});

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var obj1 = {
      "name" : "google",
    };
    
    var obj2 = {
      "url" : "www.google.com",
      "adc" : "def"
    };
    
    var obj3 = {
      "name" : "devkuma",
      "url" : "www.devkuma.com",
      "book" : "jQuery" 
    };

    $.extend(obj1, obj2, obj3);
    $.each(obj1, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.extend()</h1>
  <p id="text"></p>
</body>
</html>

The example above merges all properties of obj2 and obj3 into obj1 in order.
At this time, the duplicated name property is set to the value added last.
Therefore, the value of the name property is set to the devkuma property value from obj3, the object merged last.

Note that the first object passed as an argument to the $.extend() method is modified directly.

$.trim() method

The $.trim() method removes whitespace characters from the beginning and end of a string.

var text = "   Hello. This is devkuma.   ";
$("#text").append("before trim, '" + text + "'<br>");
$("#text").append("after trim, '" + $.trim(text) + "'");

Run code

General utility methods

Method Description
$.contains() Checks whether a DOM element is a descendant of another DOM element.
$.unique() Sorts an array of DOM elements and removes duplicate elements.
$.each() A general-purpose iterator function that can be used with both objects and arrays.
$.data() Stores data related to the selected element or reads stored data values.
$.removeData() Removes stored data.
$.queue() References or manipulates the queue of functions to be run on the selected element.
$.dequeue() Runs the next function in the selected element’s function queue.
$.extend() Merges the contents of two or more objects into one object.
$.noop() Represents an empty function.
$.proxy() Receives a function and returns a new function with a specific context.
$.now() Returns a number representing the current time.
$.trim() Removes whitespace characters from the beginning and end of a string.

$.inArray() method

The $.inArray() method searches an array for the passed value and returns the index of the matching element. If the array does not contain an element that matches the passed value, it returns -1.

Example

var arr = ["devkuma", 123, "abc"];
    
$("#text").append("devkuma : " + $.inArray("devkuma", arr) + "<br>");
$("#text").append("123 : " + $.inArray(123, arr) + "<br>");
$("#text").append("abc : " + $.inArray("abc", arr) + "<br>");
$("#text").append("def : " + $.inArray("def", arr));

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var arr = ["devkuma", 123, "abc"];
    
    $("#text").append("devkuma : " + $.inArray("devkuma", arr) + "<br>");
    $("#text").append("123 : " + $.inArray(123, arr) + "<br>");
    $("#text").append("abc : " + $.inArray("abc", arr) + "<br>");
    $("#text").append("def : " + $.inArray("def", arr));
  });
  </script>
</head>
<body>
  <h1>jQuery $.inArray()</h1>
  <p id="text"></p>
</body>
</html>
Method Description
$.makeArray() Converts an array-like object into a JavaScript Array object.
$.inArray() Searches an array for the passed value and returns the index of the matching element. If there is no matching element, it returns -1.
$.map() Converts all elements of an array or object into a new array.
$.merge() Merges the contents of two arrays into one array.
$.grep() Searches an array for elements that satisfy a filter function. The original array is not changed.
Method Description
$.parseHTML() Parses a string into an array of DOM nodes.
$.parseJSON() Receives a well-formed JSON string and returns it as a JavaScript object.
$.parseXML() Parses an XML document from a string.

References