Lesson 10 – Utilities

jQuery also has a large number of built-in utilities which help you complete different types of task rather easily. They also have a very simple syntax that is $(name). In the following lines, we are going to see quite a few of these utilities in action.

For example, $.inArray() is a commonly used utility with a sole purpose of returning a value in the array. It iterates over the entire array and returns the value if it is in the array or -1 if it is not in the array.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Visual Effects</title>
    https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

    
     
      var array = [ "one", "two", "three", "five" ];
  
  if ( $.inArray( "four", myArray ) !== -1 ) {
     console.log( "found it!" );
  }
         
      
 
 </head>
 <body>
      
 </body>
 </html>
 
 

Similarly, there is the $.trim() utility which removes all the trailing and leading white space. Here is its syntax.

$.trim( "    removes extra whitespace    " );

$.extend() is another important utility that uses the properties of the proceeding objects to change the properties of the previous objects. In other words, they change the properties of object using the properties of the next object. Here is its syntax.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Visual Effects</title>
    https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

    
     
      $(document).ready(function () {
 
       var previousObject = { foo: "car", a: "c" };
       var subsequentObject = { foo: "ok" };
       
       var newObject = $.extend( previousObject, subsequentObject );
       
       console.log( previousObject.foo ); 
       console.log( subsequentObject.foo );
 
      });
  
      
 
 </head>
 <body>
      
 </body>
 </html>
 

If you want to give information about the browser, you will use $.browse utility. Here is its syntax.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Visual Effects</title>
    https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

    
     
      $(document).ready(function () {
 
       jQuery.each( jQuery.browser, function( i, val ) {
    $( "
" + i + " : " + val + "" ) .appendTo( document.body ); }); }); </head> <body> </body> </html>

Congratulations. You have successfully completed jQuery for Beginners’ course. Now, you must learn advanced jQuery concepts to further your grip on this extremely popular and useful JavaScript Library. It will not only make web development easier for you but will also help you save a lot of time and effort as well.