¡¡¡ 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
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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.