¡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.
- Descarga la librería de su web: http://jquery.com
- 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]
- La librería trae una serie de funciones divididas en diferentes campos o bloques:
- 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…
- 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]
- 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]
- 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]
- 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]
- 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]
- Efectos: Funciones preestablecidas de movimientos y efectos para los elementos de tu DOM
- 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]
- 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