JQuery Utility Methods



Hello dear readers! Welcome back to another edition of our tutorial on JQuery. In this tutorial guide, we are going to be discussing about the JQuery Utilities.

JQuery provides several utilities in the format of $( name space). These methods are very helpful to complete the programming task. A few of these jQuery utility methods are disccused below.

$.trim()

$.trim() is used to remove leading and trailing white space.

$.trim( "               lots of extra whitespace               " );   

$.each()

$.each() is used for iterating over arrays and objects.

$.each( [ "foo",  "bar",  "baz" ],   function( idx,  val )  {
     console.log( "element "  +  idx  +  "is"  +  val );
} );

$.each( { foo:  "bar",     baz:   "bim"  },   function( k,    v )  {
     console.log( k  +  " : "  +  v );
} );

.each can be used on selection to iterate over elements contained in the selection. .each( ), not $.each( ), should be used for iterating over elements in a selection.



$.inArray()

$.inArray() is used for returning a value's index in an array, or -1 if the value is not found in the array.

var  myArray =  [ 1,  2,  3,  4,  5,  6 ];

if   ( $.inArray( 4,  myArray ) !==  -1 ) {
          console.log( " found it! " );
}

$.extend()

$.extend() is used in changing the properties of the first object using properties of subsequent objects.

var  firstObject =  { foo:  "bar",   a:  "b" };
var  secondObject =  { foo:  "baz" };

var  newObject =  $.extend( firstObject,  secondObject );

console.log( firstObject.foo );
console.log( newObject.foo );

$.proxy()

$.proxy() is used for returning a function that will always run in a provided scope. That is, it sets the meaning of this inside the passed function to the second argument.

var  myFunction =  function( ) {
     console.log( this );
}

var  myObject =  { foo:  "bar" };

myFunction( );  // window 

var  myProxyFunction =  $.proxy( myFunction,  myObject );

myProxyFunction( );


$.browser()

$.browser() is used for giving the information about browsers.

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


$.contains()

$.contains() is used to return true if the DOM element given by the second argument, is a descendant of the DOM element provided by the first argument, whether it is a direct child node or nested more deeply.

$.contains( document.documentElement,   document.body );        
$.contains( document.body,   document.documentElement );

$.data()

$.data() is made use of for giving the information about data.

<html  lang = "en">
     <head>
          <title>JQuery Example</title>
          <script  type = "text/javascript"
               src = "https://code.jquery.com/jquery-1.10.2.js">
          </script>
     </head>

     <body>
          <div>
               The values stored were <span></span>
                    and <span></span>
          </div>

          <script  type = "text/javascript">
               var  div =  $( "div" )[ 0 ];

               jQuery.data( div,  "test" ,  {
                    first:  40,
                    last:  "Web design tutorialz"
               } );

               $( "span:first" ).text( jQuery.data( div,  "test" ).first );        
               $( "span:last" ).text( jQuery.data( div,  "test" ).last);
          </script>
     </body>
</html>

Output

Below is the output of the above example -

The values stored were 40 and Web design tutorialz


$.fn.extend()

$.fn.extend( ) is made use of for extending the jQuery prototype.

<html  lang = "en">
     <head>
          <title>JQuery Example</title>
          <script  type = "text/javascript"
               src = "https://code.jquery.com/jquery-1.10.2.js">
          </script>
     </head>

     <body>
          <label><input  type = "checkbox"  name = "android">
               Android</label>
          <label><input  type = "checkbox"  name = "ios">
               IOS
          </label>

          <script  type = "text/javascript">
               jQuery.fn.extend( {

                    check:   function( )  {
                         return  this.each( function( )  {
                              this.checked =  true; 
                         } );
                    },

                    uncheck:  function( )  {
                         return  this.each( function( )  {
                              this.checked =  false;
                         } );
                    }
               } );

               //  Use the newly created .check( ) method 
               $( "input[type = 'checkbox' ]" ).check( );
          
          </script>
     </body>
</html>

Output

Below is the output of the above example -

JQuery Example



$.isWindow()

$.isWindow() is used to recognize the window.

<html  lang = "en">
     <head>
          <title>JQuery Example</title>
          <script  type = "text/javascript"
               src = "https://code.jquery.com/jquery-1.10.2.js">
          </script>
     </head>

     <body>
          Is 'window' a window?  <b></b>

          <script  type = "text/javascript">
               $( "b" ).append( " "  +  $.isWindow( window ) );
          </script>
     </body>
</html>

Output

Below is the output of the above example -

 is 'window' a window? true



$.now()
$.now() returns a number which is representing the current time.

( new Date ).getTime( ) 

$.isXMLDoc()
$.isXMLDoc() is used to check if a file is an xml or not.

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$.globalEval()
$.globalEval() is used to execute the JavaScript globally.

function  test( )  {
     jQuery.globalEval( "var  newVar =  true;  " )
}
test( );


$.dequeue()
$.dequeue( ) is used for executing the next function in the queue.

<html  lang = "en">
     <head>
          <title>JQuery Example</title>
          <script  type = "text/javascript"
               src = "https://code.jquery.com/jquery-1.10.2.js">
          </script>

          <style>
               div {
                    margin:  2px; 
                    width:  40px;
                    position:  absolute;
                    height:  60px; 
                    left:  10px;
                    top:  25px;
                    background-color:  yellow;
                    border-radius:  45px;
               }
               div.red { 
                    background-color:  green;
               }
          </script>

     </head>

     <body>
          <button>Start</button>
          <div></div>

          <script  type = "text/javascript">
               $( "button" ).click( function( )  {
                    $( "div" )
                    .animate( { left:   ' +  =  300px ' } ,   2000 )
                    .animate( { top:  '0px' } ,   600 )

                    .queue( function( ) {
                         $( this ).toggleClass( "red" );
                         $.dequeue( this );
                    } );

                    .animate( { left:  '10px',  top:  '30px' } ,   700 );
               } );
          </script>
     </body>
</html>

You can try the above code out to see the result for yourselves.


Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be introducing the jQuery Plugins to you guys.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.