La libreria jQuery aprovecha el poder de los selectores de las hojas de estilo en cascada (CSS) para dejarnos rapida y facilmente acceder a los elementos o grupos de elementos en el document object model (DOM). Un selector jQuery es una funcion que hace uso de expresiones para descubrir los elementos que coinciden desde el DOM a base de los criterios dados.
La funcion factory $()
Todo tipo de selectores disponibles en jQuery, siempre comienzan con el signo dolar y parentesis: $().
La funcion factory $() hace uso de los tres siguientes bloques de construccion, mientras selecciona los elementos en un documento dado:
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| jQuery | Descripcion |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Nombre de la etiqueta | Representa un nombre de una etiqueta disponible en el DOM. Por ejemplo $('p') selecciona todos los parrafos del documento. |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Etiqueta ID | Representa una etiqueta con un ID dado en el DOM. Por ejemplo, $('#algun-id') selecciona el elemento unico en el documento que tiene el id algun-id. |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Etiqueta Clase | Representa una etiqueta disponible con una clase dada en el DOM.Por ejemplo $('.alguna-clase') selecciona todos los elementos en el documento que tienen la clase alguna-clase |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+Todos los elementos anteriores se pueden usar ya sea por si solos o en combinacion con los otros selectores. Todos los selectores de jQuery se basan en el mismo principio, salvo algunos.
NOTA: la funcion factory $() es un sinonimo de la funcion jQuery() asi que en caso de que utilice cualquier otra libreria de javascript donde el signo $ este en conflicto con alguna cosa mas, entonces se puede sustituir el signo $ por el nombre jQuery y se puede utilizar la funcion jQuery() en lugar de $().
Ejemplo:
A continuacion se presenta un ejemplo sencillo que hace uso del selector de etiquetas. Esto selecciona todos los elementos con un nombre de etiqueta p.
<html>
<head>
<title>Titulo</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pars = $("p");
for(i = 0; i < pars.length; i++){
alert("Parrafo encontrado: " + pars[i].innerHTML);
}
});
</script>
</head>
<body>
<div>
<p class="miclase">Este es un parrafo</p>
<p id="miid">Este es el segundo parrafo</p>
<p>Este es mi tercer parrafo</p>
</div>
</body>
</html>
¿Como utilizar los selectores?
Los selectores son muy utiles y seran requeridos en cada paso durante el uso de jQuery. Consiguen el elemento exacto que usted quiere de su documento HTML. La siguente tabla enumera todos los selectores basicos y les explica con ejemplos.
+-----------------------------+--------------------------------------------------------------------------------------+
| Selector | Descripcion |
+-----------------------------+--------------------------------------------------------------------------------------+
| Nombre | Selecciona todos los elementos que coincidan con el elemento dado el nombre. |
+-----------------------------+--------------------------------------------------------------------------------------+
| #ID | Selecciona un elemento unico que coincide con el ID dado. |
+-----------------------------+--------------------------------------------------------------------------------------+
| .Clase | Selecciona todos los elementos que coinciden con la .clase dada. |
+-----------------------------+--------------------------------------------------------------------------------------+
| Universal (*) | Selecciona todos los elementos disponibles en el DOM. |
+-----------------------------+--------------------------------------------------------------------------------------+
| Elementos multiples E, F, G | Selecciona los resultados combinados de todos los selectores especificados E, F o G. |
+-----------------------------+--------------------------------------------------------------------------------------+De manera similar a la sintaxis y ejemplos anteriores, los elementos siguientes son para que se de su compresion sobre el uso diferente de otros selectores utiles:
$('*') : Este selecciona todos los elementos del documento.
$("p > *") : Este selecciona todos los elementos que son hijos de un elemento parrafo.
$("#idEspecial") : Esta funcion obtiene el elemento con id="idEspecial".
$(".claseEspecial") : Este selector se lleva todos los elementos que tienen la claseEspecial.
$("li:not(.miclase)") : Selecciona todos los elementos que coinciden con <li> que no tienen class="miclase".
$("a#idEspecial.claseEspecial") : Este selector coincide con los enlaces con id="idEspecial" y una class="claseEspecial".
$("p a.claseEspecial") : Este selector coincide con todos los enlaces con la class="claseEspecial" que estan declaradas dentro de los elementos p.
$("ul li:first") : Este selector solo obtiene el primer <li> del <ul>
$("#contenedor p") : Selecciona todos los elementos que coinciden con p que son descendientes de un elemento con el id="contenedor"
$("li > ul") : selecciona todos los elementos que coincidan con <li> que son hijos de un elemento que coincide con <ul>.
$("strong + em") : Selecciona todos los elementos que coinciden con <em> que siguen inmediatamente de un elemento hermano que coincide con <strong>.
$("p ~ ul") : Selecciona todos los elementos que coinciden con <ul> que sigue a un elemento hermano que coincide con p.
$("code, em, strong") : selecciona todos los elementos que coinciden con <code> o <em> o <strong>.
$("p strong, .miclase") : Selecciona todos los elementos que coinciden con <strong> que son descendientes de un elemento que coincide con <p>, asi como todos los elementos que tienen una clase .miclase.
$(":empty") : Selecciona todos los elementos que no tienen hijos.
$("p:empty") : Selecciona todos los elementos que coinciden con <p> que no tienen hijos.
$("div[p]") : Selecciona todos los elementos que coinciden con <div> que contienen un elemento que coincide con <p>.
$("p[.miclase]") : Selecciona todos los elementos que coinciden con <p> que contienen un elemento con la clase .miclase.
$("a[@rel]") : selecciona todos los elementos que coincidan con <a> que contengan el atributo rel.
$("input[@name=minombre]") : selecciona todos los elementos que coinciden con <input> que tienen un valor name exactamente igual a minombre.
$("input[@name^=minombre]") : selecciona todos los elementos que coinciden con <input> que tienen un valor de name comenzando por minombre.
$("a[@rel$=self]") : selecciona todos los elementos que coinciden con <a> que tienen un valor de atributo rel terminando con el mismo.
$("a[@href*=dominio.com]") : selecciona todos los elementos que coincidan con <a> que tienen un valor href que contiene dominio.com.
$("li:even") : selecciona todos los elementos que coincidan con <li> que tengan un valor de indice incluido.
$("tr:odd") : selecciona todos los elementos que coincidan con <tr> que tengan un valor de indice impar.
$("li:first") : selecciona el primer elemento <li>.
$("li:last") : selecciona el ultimo elemento <li>.
$("li:visible") : selecciona todos los elementos que coinciden con <li> que son visibles.
$("li:hidden") : selecciona todos los elementos que coinciden con <li> que estan ocultos.
$(":radio") : selecciona todos los botones de opcion en el formulario.
$(":checked") : selecciona todas las casillas de verificacion en el formulario.
$(":input") : buscamos solamente elementos del formulario (input, select, textarea, button).
$(":text") : buscamos solamente elementos de texto (input[type=text]).
$("li:eq(2)") : selecciona el tercer elemento <li>.
$("li:eq(4)") : selecciona el quinto elemento <li>.
$("li:lt(2)") : selecciona todos los elementos que coinciden con el elemento <li> antes del tercero, en otras palabras los dos primeros elementos <li>.
$("p:lt(3)") : selecciona todos los elementos que coinciden con el elemento <p> antes del cuarto, en otras palabras los primeros tres elementos <p>.
$("li:gt(1)") : selecciona todos los elementos que coinciden con <li> despues del segundo.
$("p:gt(2)") : selecciona todos los elementos que coinciden con <p> despues del tercero.
$("div/p") : selecciona todos los elementos que coinciden con <p> que son hijos de un elemento acompañado de <div>.
$("div//code") : selecciona todos los elementos que coinciden con <code> que son descendientes de un elemento acompañado de <div>.
$("//p//a") : selecciona todos los elementos que coinciden con <a> que son descendientes de un elemento acompañado de <p>
$("li:first-child") : selecciona todos los elementos que coinciden con <li> que son el primer hijo de su padre.
$("li:last-child") : selecciona todos los elementos que coinciden con <li> que son el ultimo hijo de su padre.
$(":parent") : selecciona todos los elementos que son padres de otro elemento, incluyendo el texto.
$("li:contains(segundo)") : selecciona todos los elementos que coincidan con <li> que contiene el texto segundo.
Puede utilizar todos los elementos anteriores con cualquier elemento HTML/XML en forma generica. Por ejemplo si el selector $("li:first") trabaja para el elemento <li> entonces $("p:first") tambien trabajaria para el elemento <p>.
Este articulo ha sido traducido desde TutorialsPoint.
No hay comentarios:
Publicar un comentario