Para finalizar la línea de post que habla de la (gran) potencia de selección de la que goza JQuery, solo nos queda ver, los selectores propios de JQuery. Como ya hemos visto en anteriores post, una de las principales características de JQuery es que podemos seleccionar un conjunto de elementos de una forma muy simple, potente y elegante. Esta funcionalidad nos la proporciona la función $ (alias de objeto JQuery), pero no solo puede hacer esto, sino que también nos permite:
- Estable el ciclo de vida del código.
- Seleccionar un conjunto de elementos del DOM.
- Selección básica con selectores CSS.
- Selecciones por medio de atributos, hijos y contenedores.
- Selecciones por medio de la posición.
- Selecciones gracias a los selectores que nos proporciona JQuery.
- Sirve como namespace para usar funciones globales.
- Crea elementos del DOM en base a código HTML.
Los selectores propios de JQuery.
JQuery, para completar la capacidad de selección de la que goza nos proporciona una serie de selectores propios. Estos selectores nos van a permitir realizar acciones que por su naturaleza o finalidad no las podemos realizar con selectores CSS. Supón que quieres seleccionar todos los checkboxes chequeados. Este tipo de acciones son las que nos permiten realizar los selectores propios de JQuery. Veamos cuales son:
- :animated: Selecciona los elementos que se encuentran ejecutando una secuencia de animación.
- :button: Selecciona cualquier objeto input del tipo botón (input[type=button], input[type=submit], input[type=reset]).
- :checkbox: Selecciona los objetos input del tipo checkbox (input[type=checkbox]).
- :checked: Selecciona todos los objetos checkbox o radio button chequeados.
- :contains(text): Selecciona los objetos que contienen el texto text.
- :disabled: Selecciona todos los objetos deshabilitados.
- :enabled: Selecciona todos los objetos que están habilitados.
- :file: Selecciona los objetos input del tipo file (input[type=file]).
- :header: Selecciona todos los elementos del tipo header (h1, h2, h3, h4, h5, h6).
- :hidden: Selecciona los objetos que están ocultos.
- :image: Selecciona todos los objetos input del tipo image (input[type=image]).
- :input: Selecciona los objetos del formulario (input, select, textarea, button).
- :parent: Selecciona objetos que tienen hijos (el texto se entiendo como un hijo).
- :password: Selecciona todos los objetos input del tipo password (input[type=password]).
- :radio: Selecciona todos los objetos del tipo radio (input[type=radio]).
- :reset: Selecciona todos los objetos input del tipo reset (input[type=reset]).
- :selected: Selecciona los objetos del tipo option que están seleccionados.
- :submit: Selecciona todos los objetos del tipo submit (input[type=submit] o button[type=submit]).
- :text: Selecciona solo elementos input del tipo texto (input[type=text]).
- :visible: Selecciona todos los elementos que están visibles.
Como veis, los selectores que proporciona JQuery son bastantes y además muy interesantes. Estos selectores, los podemos ir combinando, y podemos por ejemplo realizar selecciones como la siguiente:
:checkbox:checked:enabled
Que nos devolverá todos los checkbox que están habilitados y chequeados.
Posts relacionados:
- Estable el ciclo de vida del código.
- Seleccionar un conjunto de elementos del DOM.
- Selección básica con selectores CSS.
- Selecciones por medio de atributos, hijos y contenedores.
- Selecciones por medio de la posición.
- Selecciones gracias a los selectores que nos proporciona JQuery.
- Sirve como namespace para usar funciones globales.
- Crea elementos del DOM en base a código HTML.
No hay comentarios:
Publicar un comentario