¡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