JQUERY

Versiones

1.X con compatibilidad para IE 6, 7 y 8

2.X no compatible con IE 6, 7 y 8

Agregar la librera

Bajamos nuestra propia copia y la

agregamos a nuestros archivos HTML
como cualquier otro script.

<script type="text/javascript" src="jquery1.10.2.min.js"></script>

Selectores

Se utiliza el smbolo $ para poder llamar a los

objetos contenidos en el DOM.
La forma de llamar a los objetos es similar a la
forma en que los referenciamos en los estilos CSS

$(elemento); // todos los tags

$('#id') // Tag con cierto id
$(elemento.clase') // todos los elementos de cierta
clase
$(elemento[atributo=valor]') // elementos con
cierto valor de atributo.
$(selectorPadre > selectorHijo')

Selectores

Tambin tenemos selectores especficos de jQuery

que nos facilitan encontrar cierto tipo de elementos
como:
:button
:checkbox
:checked
:hidden
:image
:password
:radio
:text
:visible

Selectores

:parent // para etiquetas delimitadoras,

elementos que son padres de al menos 1
elemento
:has(otro selector) // para etiquetas
delimitadoras
:contains(cadena) // para etiquetas
delimitadoras
:empty // para etiquetas delimitadoras,
elementos que no contienen otros elementos
Lo que obtenemos de los selectores es un
conjunto de objetos el cual podemos manipular.

Grupos de elementos

elemento.find(selector) // permite buscar

un subconjunto de elementos
Conjunto.each(callback) // permite
recorrer los elementos
Elemento.next()
Elemento.prev()
Elemento.children()
Elemento.parent()

Callback

Es una funcin que se ejecuta al

terminar de ejecutarse otra funcin.
Pueden hacerse callbacks de funciones
sin parmetros, mandando solo el
nombre, o si se requiere una funcin con
parmetros se utilizan las funciones
annimas.

La funcin $(document).ready()
Es la funcin que jQuery nos ofrece para
iniciar el cdigo una vez que se han
cargado todos los elementos del DOM
Dentro de ella se ponen las funciones
llamadas como callback de manera
annima.
$(document).ready(function(){
$(".oculto").css('display', 'none');
});

Eventos

.blur()
.change()
.click()
.dblclick()
.focus()
.hover()
.keydown()
.keyup()
.keypress()
.mouseenter()
.mouseleave()
.resize()
.scroll()
.submit()

Modificadores de estilos

Podemos agregar o quitar clases de un

elemento usando:
elemento.addClass(clase)
elemento.removeClass (clase)
elemento.toggleClass (clase).
Tambin podemos manipular
directamente un atributo de estilo
usando
elemento.css(atributo, valor);

Modificadores de atributos

elemento.attr(atributo, valor);
Hay que notar que con attr y con css si
no damos un valor la llamada a la
funcin nos devuelve el valor actual del
elemento;

Contenido de los elementos

elemento.append(elementoHTML)
elemento.prepend(elementoHTML)
elemento.html(codigoHTML)
elemento.text()
elemento.clone() //copia un elemento

Efectos

Mostrar u ocultar:

elemento.hide([velocidad])
elemento.show ([velocidad])
elemento.toggle ([velocidad])
elemento.fadeIn ([velocidad])
elemento.fadeOut ([velocidad])
elemento.fadeTo([velocidad, opacidad])
elemento.slideDown ([velocidad])
elemento.slideUp ([velocidad])

Animar

La animacin el jQuery se hace al

cambiar algunas propiedades de CSS, las
cuales se modificarn poco a poco.
elemento.animate({atributoCss:valor,
otro atributoCSS:otroValor}, velocidad)

AJAX

AJAX = Asynchronous JavaScript and

XML
Consiste en hacer llamadas al servidor
remoto y actualizar lo que ste devuelve
de respuesta en una parte del
documento HTML sin tener que
recargarlo de nuevo.
Se puede utilizar tanto el mtodo post
como get