23 de agosto de 2015

Arrancar con jQuery. Declaracion Inicial


Para arrancar a trabajar con jQuery es necesario iniciar con la declaración principal, la cual es la raíz de todo el trabajo que vamos a realizar en nuestro código de javascript.

Antes de arrancar a trabajar con jQuery se debe adicionar a la sección head del documento HTML.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  

El código más básico de jQuery se compone de 3 partes esenciales las cuales veremos a continuación:

$(selector).metodo(argumentos);

$ (elemento jQuery)

Es el elemento principal, o la invocación principal que se realiza para poder trabajar con jQuery. Sin este objeto jQuery no funcionara, y no será tenido en cuenta por el browser cuando este cargando la página.

selector

El elemento selector, es el encargado de identificar cual es el elemento del DOM que vamos a afectar con nuestro código. Los selectores basicos son:

Por id 

Los selectores por Id son los mas comunes y frecuentes de usar, pues permiten obtener un elemento del DOM seleccionandolo por su atributo HTML Id. Como este debe ser unico, entonces podremos seleccionar un solo elemento de manera eficaz.

 $("#saludo")  

Por clase

Los selectores por clase son menos comunes pero muy utilizados, y permiten seleccionar uno o varios elementos del DOM tomando como filtro el atributo HTML class.

 $(".saludo")  

Por tipo del nodo

Los selectores por tipo son tambien comunes, pues permiten seleccionar todos los elementos que tienen un cierto tipo de elemento HTML en el DOM.

 $(div)  

Es posible consultar todos los selectores de jQuery en el siguiente link jQuery Selectors.

metodo

El método es la funcion que vamos a emplear para afectar el objeto seleccionado. La lista es bastante amplia en el caso de jQuery (acá esta completa).

 $("#saludo").click()  

argumentos

Son los datos que debe recibir el metodo que vamos a emplear. Pueden estar conformados por un solo dato constante o por una funcion anonima que se ejecuta cuando el metodo es llamado. Tenemos las siguientes dos opciones:

Ejemplo de un metodo solo con funcion anonima

 $("#saludo").click(function(){  
     alert("hola jQuery");
})  

Ejemplo de un metodo con funcion anonima y constante. 

En este caso la constante es un parametro para el metodo fadeOut que cambia el tiempo que se demora el metodo en ejecutar la accion de desaparecer el elemento del DOM (cambiar su atributo de CSS "display" a "none".

 
$("#saludo").fadeOut("slow",function(){
   alert("me fui!");
})


Por el momento no es mas lo que tengo por contarles, y espero que compartan la entrada si les gusto y comenten si algo no quedo claro!. Hasta la proxima!.

No hay comentarios.:

Publicar un comentario