1.-Selección de elementos (http://docs.jquery.com/Selectors)

• Seleccion por id: $(”#id_elemento”)
• Seleccion por class: $(”.clase”)
• Seleccion de todos los elementos de un tipo: $(”p”), $(”img”), $(”input”)
• Seleccion con filtro por valor de atributo: $(”input[name='username']“) (selecciona todos los input cuyo atributo name sea igual a “username”).
• Podemos combinarlos: $(”input.clase[name='username']“)

2.- Atributos , Clases y Estilos CSS (http://docs.jquery.com/Attributes)

• Obtener valor de atributo: $(selector).attr(”attr_name”) (devuelve un string).
• Establecer valor: $(selector).attr(”nombre_atributo”, “valor”)
• Eliminar atributo: $(selector).removeAttr(”nombre_atributo”)
• Añadir clase (class): $(selector).addClass(”nombre_clase”)
• Eliminar clase: $(selector).removeClass(”nombre_clase”)
• Obtener valor (value): $(selector).val()
• Establecer valor (value): $(selector).val(”valor”)
• Establecer valor de estilo CSS: $(selector).css(”elemento”, “valor”) ( pj: .css(”display”, “none”) )
• Obtener valor de elemento CSS: $(selector).css(”elemento”)
• Establecer tamaño CSS: $(selector).width(anchura), $(selector).height(altura)
• Obtener tamaño CSS: $(selector).width(), $(selector).height()

3.- Manipulación de contenido (http://docs.jquery.com/Manipulation)

• Obtener contenido HTML: $(selector).html()
• Establecer contenido HTML: $(selector).html(”contenido”)
• Añadir contenido al principio: $(selector).prepend(”contenido”)
• Añadir contenido al final: $(selector).append(”contenido”)

4.- Eventos (http://docs.jquery.com/Events)

• Función de click, se llama al hacer click sobre el elemento: $(selector).click( fn ).
• Función de focus, se llama al hacer focus en un elemento: $(selector).focus( fn ).
• Función de submit (típica de un formulario, se llama cuando este se envia): $(selector).submit( fn ).

5.- Efectos (http://docs.jquery.com/Effects)

• Esconder/Mostrar un elemento: $(selector).hide(), $(selector).show() Esto esconderá/mostrará un elemento al momento, pero podremos animarlo con un simple .hide(velocidad), donde “velocidad” puede ser un string de entre “slow”, “normal” y “fast” o bien un valor numérico en milisegundos que durará dicha animación. Ademas podremos añadir una parámetro más en el que definiremos una función que se llamará cuando finalice la animación, ideal para componer animaciones ( .show(”slow”, function(){…})).
• Efecto slide (cortina): $(selector).slideUp(velocidad) $(selector).slideDown(…).
• Efecto desvanecimiento: $(selector).fadeIn(velocidad), $(selector).fadeOut(…)
• Parar animación en curso: $(selector).stop()

Compartir