jQuery - Utilities

Jquery provides serveral utilities in the formate of $(name space). These methods are helpful to complete the programming tasks.a few of the utility methods are as show below.

$.trim()

$.trim() is used to Removes leading and trailing whitespace

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

$.each()

$.each() is used to Iterates 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 called on a selection to iterate over the elements contained in the selection. .each(), not $.each(), should be used for iterating over elements in a selection.

$.inArray()

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

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

 

if ( $.inArray( 4, myArray ) !== -1 ) {

   console.log( "found it!" );

}

$.extend()

$.extend() is used to Changes the properties of the first object using the 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 to Returns a function that will always run in the provided scope — that is, 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 to give the information about browsers

jQuery.each( jQuery.browser, function( i, val ) {

   $( "<div>" + i + " : <span>" + val + "</span>" )

   .appendTo( document.body );

});

$.contains()

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

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

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

$.data()

$.data() is used to give the information about data

<html lang = "en">

 

   <head>

      <title>jQuery.data demo</title>

      <script 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>

         var div = $( "div" )[ 0 ];

                                    

         jQuery.data( div, "test", {

            first: 25,

            last: "tutorials"

         });

                                    

         $( "span:first" ).text( jQuery.data( div, "test" ).first );

         $( "span:last" ).text( jQuery.data( div, "test" ).last );

      </script>

 

   </body>

           

</html>

An output would be as follows

The values stored were 25 and tutorials

$.fn.extend()

$.fn.extend() is used to extends the jQuery prototype

<html lang = "en">

 

   <head>

      <script 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>

         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>

$.isWindow()

$.isWindow() is used to recognise the window

<!doctype html>

<html lang = "en">

 

   <head>

      <meta charset = "utf-8">

      <title>jQuery.isWindow demo</title>

      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>

   </head>

           

   <body>

 

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

 

      <script>

         $( "b" ).append( "" + $.isWindow( window ) );

      </script>

 

   </body>

 

</html>

$.now()

It returns a number which is representing the current time

(new Date).getTime()

$.isXMLDoc()

$.isXMLDoc() checks whether a file is an xml of 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 to execute the next function in the queue

<!doctype html>

<html lang = "en">

 

   <head>

      <meta charset = "utf-8">

      <title>jQuery.dequeue demo</title>

                       

      <style>

                       

         div {

            margin: 3px;

            width: 50px;

            position: absolute;

            height: 50px;

            left: 10px;

            top: 30px;

            background-color: green;

            border-radius: 50px;

         }

                                    

         div.red {

            background-color: blue;

         }

                                    

      </style>

                       

      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>

   </head>

 

   <body>

 

      <button>Start</button>

      <div></div>

 

      <script>

         $( "button" ).click(function() {

            $( "div" )

            .animate({ left: '+ = 400px' }, 2000 )

            .animate({ top: '0px' }, 600 )

                                                

            .queue(function() {

               $( this ).toggleClass( "red" );

               $.dequeue( this );

            })

                                                

            .animate({ left:'10px', top:'30px' }, 700 );

         });

      </script>

 

   </body>

           

</html>