English 中文(简体)
jQuery - Utilities
  • 时间:2024-09-17

jQuery - Utipties


Previous Page Next Page  

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

$.trim()

$.trim() is used to Removes leading and traipng 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 ) {
   $( "<span>" + 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>
      <span>
         The values stored were <span></span>
            and <span></span>
      </span>
 
      <script>
         var span = $( "span" )[ 0 ];
			
         jQuery.data( span, "test", {
            first: 25,
            last: "tutorials"
         });
			
         $( "span:first" ).text( jQuery.data( span, "test" ).first );
         $( "span:last" ).text( jQuery.data( span, "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>

It provides the output as shown below −