Un poco de jQuery Begginers

jQuery es una librería realmente extraordinaria, que a muchos desarrolladores (incluyéndome) han hecho que la vida se vuelva más fácil. Y esto es porque cuanta con amplia lista de métodos que son los que más se reutilizan en sitios web.

Quiero compartir los métodos que me han ayudado a realizar mas rápido el desarrollo.

OBTENER EL VALOR DE ELEMENTO
 



Para eso utiliza el método val(). Cabe mencionar que este método funciona en elemento de tipo input.

Ejemplos:

var nombre = $("#elemento").val();  //Obtenemos el valor que contenga el elemento

$("#elemento").val("NUEVO");  //Modificamos el valor del elemento.

AGERGAR CONTENIDO HTML EN SPAN O DIVS


 
Para esto utilizamos el mtodo html();

Ejemplo: 

var newContent = "Duis arcu mus tortor ac, rhoncus pulvinar a nisi.";

$("#midiv").html(newContent);

El metodo text(), nos permite agregar texto al elemento.

Recuerda que los elementos que podemos manipular con contenido son los div y los spans.

ITERACION ELEMENTOS

Para esto utilizamos el metodo each().

Si has tenido que validar checkbox/radio y utilizado ciclo for para validarlos, este metodo te ayudara bastante.

var miVariable= "";
   $("#form1 input[name='tagNameElemento']:radio").each(function(i){
        if ($(this).is(':checked')) {
            miVariable = $(this).val();
        }
    });  

Checa este post por si necesitas revisar mas a fondo la validación de radios.

MANEJO EVENTOS

Podemos asignar a nuestros elementos de nuestra pagina eventos para asi separar un poco la estructura del sitio con su funcionalidad.

Método bind().

$("#boton").bind("click",function(){

      //tus funciones

});

O podemos ocupar la manera abreviada

$("#boton").click(function(){

      //tus funciones

});

También podemos quitar el evento, para esto utilizamos ubind()

$("#boton").unbind("click",function(){

      //tus funciones

});

Si quieres ampliar más sobre los eventos checa aquí.

Es muy importante que si manejaras los eventos independiente de la estructura de tu site, los colores dentro de $(function(){ });


Ejemplo:

$(function(){
     $("#boton").click(function(){
         //tus funciones
    });
}); 

Con esto aseguramos que los eventos se cargarán al momento que la página este lista.

DISPARAR EVENTOS

Si necesitas disparar un evento, tambien jQuery cuenta con algo para ayudarnos, .trigger()

Con este método podremos ejecutar el evento sin realmente actuar sobre el o los elementos que lo contengan.

Ejemplo:

$(function(){

      $("#buton").click(function(){

             alert("HOLA MUNDO");

      });

      $("#boton").trigger("click");

});

Esto quiere decir que al momento de que la pagina este lista, me ejecutara lo que contenga el evento click de ese botón. Y me arrojara un alert con un HOLA MUNDO.

Espero te sirvan estos ejemplos que les comparto.