Para ello utilizamos la librería jQuery, y su función setTimeout() para controlar el tiempo, y hide() para ocultar el elemento.

Un ejemplo, vamos a hacer desaparecer a los 5 segundos de cargar la página un div que tiene la clase .popup:

$(document).ready(FUNCTION(){				   
   setTimeout("$('.popup').hide();", 5000);
});

Un ejemplo simple. Vamos a buscar en todo el body de la página todas las palabras que sean “León” y las vamos a reemplazar por “León es vida”:

$("body").each(function() {
  $(this).html($(this).html().replace('León', 'León es vida'));
});

El método .position() nos permite recuperar la posición actual de un elemento dentro del DOM.

var elemento = $(".midiv");
var posicion = elemento.position();
alert( "left: " + posicion.left + ", top: " + posicion.top );

A continuación un ejemplo de XML:

<?xml version="1.0" ?>
<lenguaje>
    <item>
        <id>1</id>
        <title>PHP</title>
        <description>PHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas</description>
    </item>
    <item>
        <id>2</id>
        <title>JAVASCRIPT</title>
        <description>JavaScript es un lenguaje de scripting basado en objetos, utilizado para acceder a objetos en aplicaciones</description>
    </item>
</lenguaje>

De esta manera podremos manejar un archivo XML, usando jQuery, sin problemas para obtener lo datos del XML.

$.get('miarchivo.xml',{},function(data){
    $('item',data).each(function(){
        var $this = $(this);
        var id = $this.find('id').text();
        var title = $this.find('title').text();
        var description = $this.find('description').text();
        // etc...
    });
});

Función para mostar ip con jQuery:

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
    alert( "Mi ip: " + data.ip);
});

En ejemplo de uso, vamos a buscar la palabra “León” en todos los div de la página, y si encuentra resultados resaltaremos en negrita “León”:

$("div:contains('León')").css("font-weight", "bold");

Una forma muy limpio para cambiar un elemento de apariencia es agregar una clase css, en vez de añadir los estilos en línea. Usando jQuery, esto es bastante fácil de hacer:

$('#midiv').addClass('miclase');

Quitar una clase css a un elemento

Es genial ser capaz de añadir algunas clases CSS, pero también tenemos que saber cómo eliminar las clases no deseados. La siguiente línea de código hará que:

$('#midiv').removeClass('miclase');

Comprar si un elemento tiene una determinada clase css

Si su aplicación o sitio suele agregar y quitar las clases a un elemento particular, puede ser muy útil para poder comprobar si un elemento tiene una cierta clase CSS

$(id).hasClass('miclase')

Cambiar hoja de estilos con jQuery

Como vimos en los ejemplos anteriores, agregando o quitando los estilos CSS a un elemento es muy sencilla, utilizando jQuery. Pero lo que si quiere eliminar completamente el documento de archivo css y adjuntar una hoja de estilo nuevo? Una buena noticia, es muy simple, así, como se muestra en el ejemplo siguiente:

$('link[media='screen']').attr('href', 'otroestilo.css');

Añadir código html a un elemento

Cuando tenga que añadir algo de HTML a un elemento, el método append () es un protector de la vida:

$('#midiv').append('voy a añadir todo este <strong>texto</strong> html');

Comprobar si existe un elemento

Cuando se trabaja con JavaScript, con frecuencia necesitamos para comprobar si un elemento existe o no. Usando jQuery y la propiedad length, es muy simple de hacer: Si la longitud == 0, no se utilizan elementos de la página.

if ($('img').length) {
    log('Si hay imagenes');
} else {
    log('No hay imagenes');
}

Obtener el elemento primario de un elemento

Al trabajar con el DOM, es posible que necesite saber qué elemento es el padre directo de otro elemento. El más cercano () método le permitirá saber:

var id = $("button").closest("div").attr("id");

Obtener los hermanos de un elemento

la función siblings() es una herramienta muy útil para conseguir los hermanos de un elemento. Como se muestra a continuación, utilizando este método es muy simple:

$("div").siblings()

Quitar una opción de una lista de selección

Cuando se trabaja con listas de selección, es posible que desee actualizar el contenido de acuerdo con las acciones del usuario. Para eliminar una opción de una lista de selección, el siguiente código hará el truco:

$("#miselect option[value='2']").remove();

Accede a la opción seleccionada como texto

Muy útil cuando se necesita para comprobar rápidamente lo que un visitante seleccionados de su lista de selección.

$('#miselect :selected').text();

Aplicar un “efecto cebra” en las tablas

Cuando utilice tablas, es una buena idea, para facilitar la lectura, para dar un estilo diferente a una línea de cada dos. Usando jQuery, esto se puede hacer fácilmente, sin ningún tipo de código HTML adicional.

$("tr:odd").addClass("odd");

Contar los hijos de un elemento

Si deseas contar cuántos elementos son hijos de otro determinado elemento:

$("#midiv > div").length;

Con la función $(window).width() y $(window).height() obtenemos el ancho y altura de la ventana abierta.
Con la función outerWidth() y outerHeight() obtenemos el ancho y altura del div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function(){
 
     $(window).resize(function(){
 
          // aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
          $('.caja').css({
               position:'absolute',
               left: ($(window).width() - $('.caja').outerWidth())/2,
               top: ($(window).height() - $('.caja').outerHeight())/2
          });
 
	});
 
// Ejecutamos la función
$(window).resize();
 
});

Modo de uso:

1
2
3

<div class="caja"> 
<p>Div centrado utilizando jquery</p> 
</div>