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.

description

Resumen de selectores JQuery

Transcript of 3- Selectores en JQuery

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"