¡¡¡ Estreno de blog con jQuery !!!

¡Hola!

Estreno mi blog… en el que doy a conocer mi trabajo.

Postearé todo aquello que me parezca interesante, que haya probado, a modo de recopilatorio. Sobre todo escribiré sobre tecnología de web: HTML5, CSS3, PHP, frameworks, javascript, etc…

Comienzo hablando de jQuery…

jQuery, según el slogan de su web, la librería de «escribe menos, haz más». Y la verdad es que es así porque es una librería que en el momento que la incluyes en tus html, si se sabe usar, proporciona una forma de acceder al DOM y una serie de funciones que facilitan mucho la programación frontend.

1. Descarga la librería de su web: http://jquery.com
2. Importala en tu HTML:

[sourcecode language=»plain»]<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>[/sourcecode]

También existe una posibilidad de no tener que bajarla y usar el cdn de google para usarla:

[sourcecode language=»plain»]<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>[/sourcecode]

1. La librería trae una serie de funciones divididas en diferentes campos o bloques:
   1. Selectores: para seleccionar mediante selectores CSS cualquier grupo de elementos con los que después operar:

Selecciona todos los divs con la clase «wrapper»:

[sourcecode language=»plain»]$("div.wrapper") [/sourcecode]

Selecciona todos el divs con parámetro id igual a «wrapper»:

[sourcecode language=»plain»]$("div#wrapper") [/sourcecode]

Selecciona todos las etiquetas «a» con parámetro «rel» igual a «nofollow»:

[sourcecode language=»plain»]$("a[rel=’nofollow’]") [/sourcecode]

Selecciona todos las etiquetas «a» con parámetro «href» conteniendo la palabra «.com»:

[sourcecode language=»plain»]$("a[href$=’.com’]")[/sourcecode]

Existen muchos más tipos de selectores… selectores de hijos, pseudo clases, etc…

1. Atributos: funciones para modificar los atributos de los elementos del DOM:

Selecciona todos los divs con parámetro id igual a «wrapper» y devuélveme su contenido:

[sourcecode language=»plain»]$("div#wrapper").html() [/sourcecode]

Selecciona el divs con clase igual a «wrapper» y, si tiene la clase «abcde», la eliminas y si no la tiene, la incuyes:

[sourcecode language=»plain»]$("div.wrapper").toggleClass("abcde") [/sourcecode]

Selecciona el input de tipo text y dame su contenido:

[sourcecode language=»plain»]$("input[type=’text’]").val() [/sourcecode]

1. Traversing: funciones para moverse por el dom desde un elemento concreto

Selecciona los divs con clase igual a «wrapper» y añádele el html: hola

[sourcecode language=»plain»]$("div.wrapper").append("<span>hola</span>")[/sourcecode]

Selecciona el divs con id igual a «wrapper» y dame el elemento que, a su misma altura en el DOM, le sigue:

[sourcecode language=»plain»]$("div#wrapper").next()[/sourcecode]

Selecciona el divs con id igual a «wrapper» y dame el elemento que es el padre de este:

[sourcecode language=»plain»]$("div#wrapper").parent()[/sourcecode]

1. Manipulación: Estas funciones modifican el DOM de alguna forma:

Selecciona el divs con id igual a «wrapper» y dame su altura interna (sin bordes):

[sourcecode language=»plain»]$("div#wrapper").innerHeight()[/sourcecode]

Selecciona el divs con id igual a «wrapper» y elimínalo de la web:

[sourcecode language=»plain»]$("div#wrapper").remove()[/sourcecode]

Selecciona el divs con id igual a «wrapper» y envuélvelo con un div:

[sourcecode language=»plain»]$("div#wrapper").wrap("div")[/sourcecode]

1. CSS: Obtienen y establecen las propiedades relacionadas con css de los elementos

Selecciona el divs con id igual a «wrapper» y devuélveme su css:

[sourcecode language=»plain»]$("div#wrapper").css()[/sourcecode]

Selecciona el divs con id igual a «wrapper» y establece la propiedad css igual a color como #000:

[sourcecode language=»plain»]$("div#wrapper").css("color", "#000")[/sourcecode]

1. Eventos: Son usados para registrar funciones para los eventos que pueden suceder en la web

Selecciona el divs con id igual a «wrapper» y registra una función que muestra un alert al hacer click sobre él:

[sourcecode language=»plain»]$("div#wrapper").click(function(){alert("Le has hecho click");})[/sourcecode]

1. Efectos: Funciones preestablecidas de movimientos y efectos para los elementos de tu DOM
2. Ajax: Para realizar llamadas Ajax

Lanza una llamada ajax al fichero text.html y, cuando se termine, añádele la clase css «done»:

[sourcecode language=»plain»]$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});[/sourcecode]

1. Utililidades: Una serie de funciones que no tienen relación entre sí pero que son útiles para unas tareas concretas

Me dejo muchísimas funciones sin explicar, sin embargo, te invito a visitar la documentación de jQuery… verás como te suena después de haber leído este artículo

Seguiré escribiendo…

¡¡¡ Un saludo !!!

Daniel Ruiz