jQuery - Utilidades

Jquery proporciona varias utilidades en el formato de $ (espacio de nombres). Estos métodos son útiles para completar las tareas de programación. Algunos de los métodos de utilidad son los que se muestran a continuación.

$ .trim ()

$ .trim () se usa para eliminar los espacios en blanco iniciales y finales

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

$ .each ()

$ .each () se usa para iterar sobre matrices y objetos

$.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 () se puede llamar en una selección para iterar sobre los elementos contenidos en la selección. .each (), no $ .each (), debe usarse para iterar sobre elementos en una selección.

$ .inArray ()

$ .inArray () se usa para Devuelve el índice de un valor en una matriz, o -1 si el valor no está en la matriz.

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend ()

$ .extend () se usa para Cambia las propiedades del primer objeto usando las propiedades de los objetos subsiguientes.

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 () se usa para Devuelve una función que siempre se ejecutará en el ámbito provisto, es decir, establece el significado de esto dentro de la función pasada al segundo argumento

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

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$ .browser

$ .browser se utiliza para dar información sobre los navegadores

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

$ .contains ()

$ .contains () se usa para devolver verdadero si el elemento DOM proporcionado por el segundo argumento es un descendiente del elemento DOM proporcionado por el primer argumento, ya sea un hijo directo o anidado más profundamente.

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

$ .data ()

$ .data () se utiliza para dar información sobre los datos

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

Una salida sería la siguiente

The values stored were 25 and tutorials

$ .fn.extend ()

$ .fn.extend () se usa para extender el prototipo jQuery

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

Proporciona la salida como se muestra a continuación:

$ .isWindow ()

$ .isWindow () se usa para reconocer la ventana

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

Proporciona la salida como se muestra a continuación:

$ .now ()

Devuelve un número que representa la hora actual.

(new Date).getTime()

$ .isXMLDoc ()

$ .isXMLDoc () comprueba si un archivo es xml o no

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

$ .globalEval ()

$ .globalEval () se usa para ejecutar javascript globalmente

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

$ .dequeue ()

$ .dequeue () se usa para ejecutar la siguiente función en la cola

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

Proporciona la salida como se muestra a continuación:

↰ Previous page Next page ↱