¡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

Deja un comentario

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