Diseño web y programación

Con el foco en php, laravel y geolocalización

Trucos y consejos para utilizar con Jquery

Jquery es una biblioteca basada en javascript que nos va a permitir crear código de forma mucho más rápida y optimizada. Sobre todo, nos va a ayudar a disminuir los tiempos de desarrollo de nuestros proyectos, a la vez que nos va a proporcionar el apoyo de una gran comunidad de desarrolladores detrás de él.

1. Evitar el envio de formularios al pulsar intro

/////////////////////////////
// Prevenir enter en formulario
/////////////////////////////
$( window ).keydown( function( event ) {
    if( event.keyCode == 13 ) {
        event.preventDefault();
        return false;
    }
});

2. A veces, necesitamos saber si una etiqueta de nuestro html es visible o no, es decir, si está oculta al usuario mediante css.

Para determinar si un campo es visible o no, jquery tiene los siguientes helpers:

.is( ':visible' ) 
.is( ':hideen' )

3. Deshabilitar el botón derecho del ratón

//Deshabilitar boton derecho ratón.
$( document ).bind( 'contextmenu', function( e ) {
    return false;
});

4. La diferencia entre $(windows).load() y $(document).ready() no está clara.

Empecemos primero viendo como se utilizan:

$( window ).load ( function () {
    // mi código
});

frente a...

$( document ).ready( function() {
    // mi código
});

En el caso de $(document).ready(), se ejecuta cuando el código HTML está cargado y el DOM listo, esto no significa que las librerias externas o las imágenes estén cargadas. Mientras que en el caso de $(windows).load(), se ejecuta cuando todo está cargado: imágenes, iframes,...

Y ya que estamos, veamos algunas formas alternativas de usar $(document).ready():

$(function(){ 
    // Ejemplo simplificado
});

jQuery(document).ready(function($) {
    //Este ejemplo es adecuado cuando utilizamos varias librerias, y queremos evitar conflictos entre ellas.
});

5. Usar CDNs para cargar nuestra librerías jquery.

Haciendo esto, mejoramos la latencia, reducimos el número de peticiones a nuestro servidor, cachear jquery se vuelve más eficaz y reducimos el coste de ancho de banda de nuestro servidor.

Algunos ejemplos:

6. comprobar si un elemento existe.

Por ejemplo, ver si un elemento del HTML ha sido creado o no, para ello usamos:

if ( $( "#id_del_elemento_a_comprobar" ).length ) { 
    //El elemento existe!!!!
}

Por ejemplo, si queremos que una parte de nuestro código, solo se ejecute si existe un formulario, si no, ese código no se ejecuta. Por ejemplo:

if( $( '#miFormulario' ) ) {
    $( '#button' ).on( 'submit', function() {
        //Mi código
    })
}

7. Elegir el selector correcto.

El rendimiento de la aplicación puede verse afectado por ello:

$('li[data-selected="true"] a') // Muy lento y poco recomendable
$('li.selected a')              // Mucho mejor, pero aún requiere de interpretación por parte de Jquery
$('#id_del_elemento')           // Lo más rápido y eficaz

¿Por qué complicarse la vida?

8. Determinar el número de elementos contenidos en una etiqueta.

Veamos el siguiente ejemplo:

<div id="var1">
    <div id="var2"></div>
    <div id="var3"></div>
    <div id="var4"></div>
    <span></span>
    <strong></strong>
</div>

Ahora queremos saber el número de elementos <div> contenidos en el contenedor principal <div id="var1">. Para ello, hacemos lo siguiente:

$( '#var1 > div' ).size();

Y nos dará como resultado 3.

9. Hacemos lo contrario al anterior, a partir de un elemento hijo, vamos a encontrar a su padre.

$( '#elemento_hijo' ).closest( 'div' );

Nos devolverá el elemento padre contenedor.

10. Usar Jquery para cargar librerias externas, y en el caso de no conseguirse, cargarlas localmente.

Es decir, vamos a cargar librerias externas, como puede ser jquery, y vamos a hacerlo desde un CDN (como ya explicamos en el punto 5), y en el caso de que el CDN tenga problemas o no consigamos que cargue correctamente, lo que haremos será cargar la copia local que tendremos en nuestro servidor. De forma que usamos el CDN como servidor primario y nuestro servidor como secundario:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='myDirectorio/javascript/jquery-2.1.1.min.js'
 type='text/javascript'%3E%3C/script%3E"));
}
</script>

11. Acceder a los atributos de un elemento.

Es decir, tenemos un elemento <a id="miID" href="http://www.dirección"></a> y queremos acceder al atributo href.

$( '#miID' ).attr( 'href' );

12. Cambiar el estado de un atributo.

Siguiendo con el ejemplo anterior, podemos hacerlos así:

$( '#miID' ).attr( 'disabled', 'disabled' );

Pero jquery nos ofrece una forma directa de hacerlo, y bastante más entendible:

$( '#miID' ).prop( 'disabled', false );

Mi consejo, es usar prop().