3- selectores en jquery

2
Los selectores en Jquery Sintaxis básica es : $ ( selector ). acción () Un signo $ para definir / acceso jQuery A ( selector ) para "consulta (o encontrar)" elementos HTML A jQuery acción () para realizar en el elemento (s) Los selectores son el modo con el cual se accede a los elementos incluídos en el DOM HTML, al igual que con CSS se modifican los estilos accediendo al elemento o elementos seleccionados. En Jquery siempre para acceder a un selector/es hay que utilizar la siguiente sintaxis -> $("selector/es"), si ya conoces el funcionamiento de las Hojas de Estilo CSS, no tendrás problemas en entender el uso de selectores en Jquery. A continuación vamos a ver distintas formas de acceder a los selectores ... $("div") -> Selecciona todos los divs del documento $("#id") -> Selecciona el elemento con el id nombre "id" $(".class") -> Selecciona todos los elementos que contengan la clase "class" $("input[type='button']") -> Selecciona todos los input button, útil para acceder a los campos de formulario: submit, button, reset, text, password, email, radio, checkbox, file, ... $("input[name='campo']") -> Seleccionar el input cuyo atributo name es igual a campo, eje.: <input type='text' name='campo'> $("ul li:eq(0)") -> selecciona el primer elemento li de las etiquetas ul, es una forma de indexar los elementos, al primer elemento siempre le corresponde el index 0.

Upload: pomelo09

Post on 04-Oct-2015

3 views

Category:

Documents


0 download

DESCRIPTION

Resumen de selectores JQuery

TRANSCRIPT

Los selectores en JquerySintaxis bsica es: $ ( selector ). accin () Un signo $ para definir / acceso jQuery A ( selector ) para "consulta (o encontrar)" elementos HTML A jQuery accin () para realizar en el elemento (s)

Los selectoresson el modo con el cual se accede a los elementos includos en el DOM HTML, al igual que conCSSse modifican los estilos accediendo al elemento o elementos seleccionados.

En Jquery siempre para acceder a un selector/es hay que utilizar la siguiente sintaxis -> $("selector/es"), si ya conoces el funcionamiento de lasHojas de Estilo CSS, no tendrs problemas en entender el uso de selectores enJquery.

A continuacin vamos a ver distintas formas de acceder a los selectores ...

$("div")-> Selecciona todos los divs del documento

$("#id")-> Selecciona el elemento con el id nombre "id"

$(".class")-> Selecciona todos los elementos que contengan la clase "class"

$("input[type='button']")-> Selecciona todos los input button, til para acceder a los campos de formulario: submit, button, reset, text, password, email, radio, checkbox, file, ...

$("input[name='campo']")-> Seleccionar el input cuyo atributo name es igual a campo, eje.:

$("ul li:eq(0)")-> selecciona el primer elemento li de las etiquetas ul, es una forma de indexar los elementos, al primer elemento siempre le corresponde el index 0.

$("ul li:first-child")-> selecciona el primer elemento li de las etiquetas ul

$("ul li:last-child")-> selecciona el ltimo elemento li de las etiquetas ul

$("div p")-> Selecciona todos los prrafos descendientes de div

$("div, span")-> Selecciona todos los div y span del documento

$("div>a")-> Selecciona todos los links hijos directos de div

$("h1+p")-> Selecciona todos los prrafos inmediatamente precedidos por un h1 hermano

$("div~p")-> Selecciona todos los divs precedidos por un elemento prrafo

$("div:has(span)")-> Selecciona todos los divs que contienen un elemento span

$("div.clase")-> Selecciona todos los divs que tienen la clase "clase"

$("img[alt]")-> Selecciona todos los elementos img con el atributo "alt" activo

$("button[id*=boton]")-> Selecciona todos los botones con atributo "id" que contengan la palabra botn.

$("a[href$=.php]")-> Selecciona todos los links con atributo href terminados en .php

$("a[title^=ti]")-> Selecciona todos los links cuyo atributo title comienza por "ti"