Skip navigation

Category Archives: Ejemplos

A la hora de programar en jQuery suelo crear elementos para añadir a la página. Normalmente solía realizar, por ejemplo, los siguientes pasos:

var li = document.createElement(‘li’);
li.id = ‘acerca-de';
li.innerHTML = ‘Acerca de';
$(‘#nav’).append(li);

Como veis, estoy creando un nuevo elemento de una lista, asignándole un ID, insertando su html correspondiente y añadiéndolo a una lista que ya tengo con identificador #nav.

Lo bueno que tiene jQuery es que está desarrollado para poder anidar instrucciones, haciendo que cada función devuelva el mismo elemento. De este modo estos pasos quedarían:

var li = $(document.createElement(‘li’)).attr(‘id’,’acerca-de’).html(‘Acerda de’).appendTo(‘#nav’);

Dejando un código mucho más sencillo, limpio y reducido.

La gente de Queness nos proponen un ejemplo de como realizar una validación de un formulario con jQuery.
ajaxform
Si revisamos el código fuente de la página veremos que en el evento click() del botón del formulario se comprueba que todos los campos obligatorios hayan sido cubiertos.
Si esto es correcto se realizará la llamada AJAX al servidor para procesar el pedido y realizar la operación oportuna dependiendo del resultado.

Ir al ejemplo

Voy a traducir dos artículos de la web Queness.com donde recopilan algunos consejos y trucos útiles a la hora de desarrollar con jQuery, tanto para solucionar pequeñas incidencias como para optimizar los resultados.

1.- Evitar conflictos entre librerías

Existe la posibilidad de que en una misma web se estén utilizando diferentes frameworks de javascript. Esto puede provocar conflictos entre ellos. Para el caso de jQuery se puede evitar asignando el método a otra variable diferente al dólar:

var $j = jQuery.noConflict();
$j(‘#myDiv’).hide();

2.- Comprobar que jQuery está cargado

Antes de llamar a nuestro desarrollo conviene comprobar que jQuery se ha cargado correctamente. Para ello podemos usar cualquiera de estas dos opciones:

/* Metodo 1 */
if (jQuery) {
// jQuery esta cargado
} else {
// jQuery no esta cargado
}

/* Metodo 2 */
if (typeof jQuery == ‘undefined’) {
// jQuery no esta cargado
} else {
// jQuery esta cargado
}

3.- Mejorar la selección de elementos

Al buscar en el DOM por los elementos siempre conviene realizarlo en base al ID del mismo en vez de la clase (aunque en las nuevas versiones de la librería se haya optimizado mucho).

/* ID */
$(“#myid”).html();
/* es mas rapido que */
$(“.myclass”).html();

Y en caso de seleccionar por clase, siempre es mejor idicando el tipo de elemento:

$(“ul.myclass”);
/* es mas rapido que */
$(“.myclass”);

4.- Obtener el total de elementos seleccionados

Al realizar una selección de elementos como la que comentábamos anteriormente puede que nos interese saber el número de elementos que se han visto afectados. Para ello podemos usar la siguiente función:

$(‘.someClass’).length;

5.- Obtener jQuery de los servidores de Google

Cargar la librería desde los servidores de Google ofrece unas ventajas muy interesantes. Para integrarlo en nuestro proyecto tenemos dos opciones, una más estandar y otra más eficiente:

<script src=”http://www.google.com/jsapi”></script&gt;
<script type=”text/javascript”>
google.load(“jquery”, “1.2.6”);
google.setOnLoadCallback(function() {
//Code to be inserted in this area
});
</script>

/* la mejor forma */
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script&gt;
<script type=”text/javascript”>
$(document).ready(function() {
//This is more like it!
});
</script>

6.- Comprobar que una checkbox está marcada

Tenemos tres formas de realizar esta comprobación:

// Primera
$(‘#checkBox’).attr(‘checked’);
// Segunda
$(‘#edit-checkbox-id’).is(‘:checked’);
// Tercera
$(“[:checkbox]:checked”).each(
function() { … }
);

7.- Convertir el elemento LI completamente en el enlace

Solemos basarnos en el elemento UL para realizar nuestros menús. En ocasiones, el area del LI es superior a la del enlace que contiene, por lo que el elemento no es funcional 100%. Para evitarlo podemos hacer lo siguiente:

$(“ul li”).click(function(){
// se obtiene la url del enlace que contiene y se lanza
window.location=$(this).find(“a”).attr(“href”); return false;
});

8.- Obtener las coordenadas X e Y del cursor del ratón

$().mousemove(function(e){
//muestra las coordenadas X e Y en un parrafo
$(‘p’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});

9.- Como activar y descativar un elemento con jQuery

// Para desactivar
$(‘.someElement’).attr(‘disabled’, ‘disabled’);

// Para activar
$(‘.someElement’).removeAttr(‘disabled’);
// O puedes asignar el attr a “”
$(‘.someElement’).attr(‘disabled’, ”);

10.- Desactivar las animaciones de jQuery
Esta instrucción deshabilitará todas las animaciones de la librería:

jQuery.fx.off = true;

En buildinternet.com nos hacen un repaso de seis formas en las que podemos implementar una caja de texto que se posicionará sobre una imagen al situar el cursor sobre ella gracias a la función animate()

slidingboxes

Ideal para implementar directamente en alguno de nuestros proyectos web.

Vía: xyberneticos

Use jQuery es un directorio que recopila aquellas webs que usan la librería jQuery.

usejquery

Cada web está etiquetada en base al uso que se realiza del framework, por lo que podemos movernos fácilmente a los ejemplos que más nos interesan.

Sin duda es un buen sitio para inspirarse y conocer los trabajos que realizan otros desarrolladores.

Vía: intenta
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.