Tutorial básico de selectores de #jquery. #selectors

Este articulo trata sobre lo más básico que se utiliza al programar con jquery, los selectores.

Seré breve ya que posteriormente haré algunos artículos más avanzados sobre este mismo tema, pero para este comenzaremos por definir que es un selector.

Un selector como su nombre lo dice, es un medio que nos proporciona jquery para seleccionar un elemento o conjunto de elementos DOM, y aplicar a estos una gama de acciones que de igual manera nos proporciona jquery.

Para ellos los selectores al igual que en CSS funcionan englobándose en 3 tipos y son los siguientes:

Selector por tipo de elemento

Este selector sirve para seleccionar un conjunto de elementos (o un elemento) por medio del nombre de estos, tal como se llama por ejemplo si deseamos seleccionar los table de HTML de toda una página basta con hacer los siguiente:

$("input");

Selector por clase

Este selector sirve para seleccionar un conjunto de elementos los cuales comparten una misma clase, para ellos aplicamos la función de jquery $() y dentro de esta el nombre de la clase, anteponiendo un punto, por ejemplo:

$(".NombreDeClase");

Selector por id

Este selector como los anteriores sirve para realizar una selección de un elemento del DOM, este selector es el único que nos dará solo un elemento, respetando el estándar de que un id en una página solo debe existir una vez, y se utiliza de la siguiente manera:

$("#IdDeMiElemento");

Ahora que ya sabemos que son los selectores vamos a la magia de estos, para ello utilizaremos el siguiente código HTML, un código simple que solo contiene unos divs dentro de otros y estos contienen input los cuales tienen libros, como cuando vamos a una biblioteca, los divs son los libreros, y los input el libro en sí.

<div id="divBiblioteca">

	<div class="Horror" >

    	<div id="Lovecraft">
            <input id="MontanasLocura" type="text"  value="En las montañas de la locura" />
            <input id="Necronomicon" type="text"  value="Necronomicon" />
        </div>

        <div class="EscritoresModernos" id="King">
            <input id="Cementerio" type="text"  value="Cementerio de Mascotas" />
            <input id="Eso" type="text"  value="Eso" />
        </div>
    </div>

    <div class="Negras" >

    	<div class="EscritoresModernos" id="Katzenbach">
            <input id="Psicoanalista" type="text"  value="El Psicoanalista" />
            <input id="ElLoco" type="text"  value="El Loco" />
        </div>
    </div>

</div>

<p>Dar clic en los links de abajo para obtener el resultado del selector</p>
<a href="" style="cursor:pointer;" onclick="jsTodosLosLibros()">Todos los Libros</a><br />
<a href="" style="cursor:pointer;" onclick="jsEscritoresModernos()">Escritores Modernos</a><br />
<a href="" style="cursor:pointer;" onclick="jsStephenKing()">Libros de Stephen King</a>

Tenemos 3 funciones las cuales tienen los 3 tipos de selectores explicados anteriormente, cada función se invoca por medio de los links (<a>) y dentro de las funciones podemos ver el selector aplicado.

//Esta funcion utiliza el selector tipo Elemento, y obtenemos todos los input los cuales tienen los nombres de todos los libros
function jsTodosLosLibros(){
	cadenaLibros=""
	$("input").each(function(){
		cadenaLibros+=$(this).attr("value")+"n"
	})

	alert(cadenaLibros)
}

//Esta funcion utiliza el selector de clase y obtenemos los que tienen la clase EscritoresModernos
function jsEscritoresModernos(){
	cadenaLibros=""
	$(".EscritoresModernos input").each(function(){
		cadenaLibros+=$(this).attr("value")+"n"
	})

	alert(cadenaLibros)
}

//Esta funcion selecciona el div con id #King y sus hijos que son tipo input
function jsStephenKing(){
	cadenaLibros=""
	$("#King input").each(function(){
		cadenaLibros+=$(this).attr("value")+"n"
	})

	alert(cadenaLibros)
}

Y para ver este ejemplo corriendo, den clic aquí.

Este es un pequeño tutorial de selectores, próximamente pondré algo más avanzado.