JQuery total: julio 2010

En cada elemento o etiqueta XHTML se define su propia lista de posibles eventos ya sean uno o varios.
En la siguiente tabla se resumen los eventos más importantes definidos por JavaScript:

onblur
Deseleccionar el elemento
<button>, <input>, <label>, <select>, <textarea>, <body>

onchange
Deseleccionar un elemento que se ha modificado
<input>, <select>, <textarea>

onclick
Pinchar y soltar el ratón
Todos los elementos

ondblclick
Pinchar dos veces seguidas con el ratón
Todos los elementos

onfocus
Seleccionar un elemento
<button>, <input>, <label>, <select>, <textarea>, <body>

onkeydown
Pulsar una tecla (sin soltar)
Elementos de formulario y <body>

onkeypress
Pulsar una tecla
Elementos de formulario y <body>

onkeyup
Soltar una tecla pulsada
Elementos de formulario y <body>

onload
La página se ha cargado completamente
<body>

onmousedown
Pulsar (sin soltar) un botón del ratón
Todos los elementos

onmousemove
Mover el ratón
Todos los elementos

onmouseout
El ratón "sale" del elemento (pasa por encima de otro elemento)
Todos los elementos

onmouseover
El ratón "entra" en el elemento (pasa por encima del elemento)
Todos los elementos

onmouseup
Soltar el botón que estaba pulsado en el ratón
Todos los elementos

onreset
Inicializar el formulario (borrar todos sus datos)
<form>

onresize
Se ha modificado el tamaño de la ventana del navegador
<body>

onselect
Seleccionar un texto
<input>, <textarea>

onsubmit
Enviar el formulario
<form>

onunload
Se abandona la página (por ejemplo al cerrar el navegador)
<body>

[atrr(=)(!=)(^=)($=)(*=)value]

(=)Igual

var myVar = 'es';  
$('a[hreflang='+myVar+']');
$('input[type=checkbox][checked=true]');

(!=)Diferente

$("label[name!='identificador']");

(^=)Empieza

$('a[href^=http]');

$("input[name^='Esto']").val("Aquin");

($=) Acaba>

$('a[href$=html]');

$("a[href$=.jpg], a[href$=.jpeg], a[href$=.png]");

(*=)contiene

$('a').not("[href*=value]")

Selectores Filtro basico

:animated

selecciona los elementos que están en proceso de animación en este momento

$(".navArticals:not(:has(:animated))")

:eq()

Obtiene o modifica el valor de un elemento de la referecia que se le pase

$('a.enlacePdf:eq(2)')

:even

Selecciona los elementos pares en el conjunto resultado (en base 0).

$("tr:even").css("background-color", "#bbbbff");

:odd

Selecciona los elementos impares en el conjunto resultado (en base 0).

$("tr:even").css("background-color", "#ffbbbb");

:first

Selecciona el primer elemento asociado

$("tr:first").css("background-color", "#bbbbff");

:last

Selecciona el ultimo elemento asociado

$("tr:last").css("background-color", "#bbbbff");

:header

Elementos de encabezado como h1, h2, h3

$(":header").css({background:'#CCC', color:'blue'});

:gt()

Selecciona los elementos desde el del índice hasta el ultimo

$("tr:gt(6)").css("background-color", "#bbbbff");

:lt()

Selecciona los elementos desde el primero hasta el del índice dado

$("tr:lt(6)").css("background-color", "#bbbbff");

:not()

Selecciona todos los elementos en conjunto que no coincidan con el valor de la referencia pasada

$('tr').not("[href*=value]")
$("tr:not(':last')")

:hidden - Selecciona elementos que son hidden o estan ocultos por css

:visible - Selecciona elementos que son visible o estan visibles por css

:parent - Selecciona elementos que tiene nodos hijos

:empty - Selecciona elementos sin nodos hijos

:contains() - Selecciona elementos que tiene el valor o texto especificado

:has()- Selecciona elementos que contienen elemento que le pasemos

:first-child - Selecciona el primer elemento hijo de su padre.

:last-child - Selecciona el ultimo elemento hijo de su padre.

:only-child - Selecciona el elemento que esta solo(unico) hijo de su padre

:nth-child

Existe con diferentes valores

:nth-child(even) - Selecciona el elemento hijo de su padre indicado pero con la condición de que sea par

:nth-child(odd) - Selecciona el elemento hijo de su padre indicado pero con la condición de que sea impar

:nth-child(3n+1) - Selecciona el primer elemento hijo de su padre y siguiente sera el tercero

:nth-child(2) - Selecciona el segundo elemento hijo de su padre

$("div p:*****child").text("Cambio texto");

Filtros de formulario

:button

Selecciona todos los elementos de tipo button.

:checkbox

Selecciona todos los elementos de tipo checkbox.

:checked

Selecciona todos los elementos que estan checked.

:disabled

Selecciona todos los elementos que estan disabled.

:enabled

Selecciona todos los elementos que estan enabled

:file

Selecciona todos los elementos de tipo file.

:image

Selecciona todos los elementos de tipo image.

:input

Selecciona todos los elementos input

:password

Selecciona todos los elementos de tipo password.

:radio

Selecciona todos los elementos de tipo radio.

:reset

Selecciona todos los elementos de tipo reset.

:selected

Selecciona todos los elementos de tipo selected.

:submit

Selecciona todos los elementos de tipo submit

:text

Selecciona todos los elementos de tipo text.

JQuery total

lunes, 19 de julio de 2010

Eventos en Javacript

viernes, 2 de julio de 2010

JQuery selectores basicos - selectores formulario - selectores de filtro - selectores de atributos