¡HOLA! SOY DANIEL RUIZ

Soy desarrollador, maquetador, programador y technology learner en HTML, Javascript, PHP, Java y .NET.

12 julio, 2012

¡¡¡ 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:
<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
      También existe una posibilidad de no tener que bajarla y usar el cdn de google para usarla:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    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”:

$("div.wrapper") 

Selecciona todos el divs con parámetro id igual a “wrapper”:

$("div#wrapper") 

Selecciona todos las etiquetas “a” con parámetro “rel” igual a “nofollow”:

$("a[rel='nofollow']")   

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

$("a[href$='.com']")

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:

$("div#wrapper").html() 

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

$("div.wrapper").toggleClass("abcde") 

Selecciona el input de tipo text y dame su contenido:

$("input[type='text']").val() 
      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

$("div.wrapper").append("<span>hola</span>")

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

$("div#wrapper").next()

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

$("div#wrapper").parent()
      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):

$("div#wrapper").innerHeight()

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

$("div#wrapper").remove()

Selecciona el divs con id igual a “wrapper” y envuélvelo con un div:

$("div#wrapper").wrap("div")
      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:

$("div#wrapper").css()

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

$("div#wrapper").css("color", "#000")
      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:

$("div#wrapper").click(function(){alert("Le has hecho click");})
      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”:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});
    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