Saturday, May 16, 2020

JQuery Utility Methods



Hello guys! Welcome to a new section of my tutorial on JQuery. In this tutorial, am going to be discussing about 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 the utility methods are disccused below.

$.trim()

$.trim() is used in removing leading and trailing white space.

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

$.each()

$.each() is used for iterating over arrays and as well as 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 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 return 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 making use of 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 in returning a function that will always run in a given scope. That is, it sets the meaning of this inside the passed function unto the second argument.

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

var  myObject =  { foo:  "bar" };

myFunction( );  // window 

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

myProxyFunction( );

RECOMMENDED POST: JQuery UI Library Based Methods 

$.browser()

$.browser() is used in giving information about browsers. 

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


$.contains()

$.contains() is used in returning 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 node or nested more deeply.

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

$.data()

$.data() is used to give 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 used 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() checks whether 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()
The $.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! We have come to the end of this tutorial on JQuery utilities. If you found this post helpful and interesting, kindly make use of the share button to share this post. Feel free to ask your questions where necessary.

Follow us on our various social media platforms available and subscribe to our newsletter to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.