IntroducciónEn siguiente articulo explicare el manejo de selectores por medio de JQuery. Esta es una gran ventaja que nos ofrece este Framework ya que no ahorra un largo trabajo de programación como por ejemplo: Seleccionar todos los elementos de un arbol DOM que tenga la clase “subTitulo”, otro ejemplo seria seleccionar todo los elementos hijos de un nodo del árbol o simplemente seleccionar todo lo elementos DOM y almacenarlos en un vector.
ContenidoEn el articulo anterior ya dábamos nociones de los selectores por medio de una función global denominada $(), básicamente podemos seleccionar elementos con las siguientes condiciones:
* Por Etiqueta: Seleccionar elementos según su etiqueta por ejemplo<p> o <table>
* Por Identificador: Seleccionar elementos según sea su id
* Por Clase: Seleccionar elementos según la clase CSS que llame.
* Otras mas especializadas que podemos encontrar en el API de JQuery
EjemplosSupongamos el siguiente codigo de una pagina cualquiera:
<script type="text/javascript"> $(function(){
$("#botonNumParrafos").click(function(){
alert($('p').length);
})
$("#botonNumMiClase").click(function(){
alert($('.miClase').length);
})
$("#botonNumHijosDiv1").click(function(){
alert($('#div1 > *').length);
})
$("#botonGetHijosDiv2").click(function(){
str = "";
$('#div2 > *').each(function(){
str += $(this).attr("id")+" Contenido: "+$(this).attr("innerHTML")+"
</br>"; //Concatenamos
})
$("#mostrarResultados").html(str);
})
});
.miClase{
background: #CCC;
}
<div class="miClase" id="div2"> <h3 id="cabecera1">Cabecera H3
</h3> <h4 id="cabecera2">Cabecera H4
</h4>
<div id="mostrarResultados"> <!-- MOSTRAR RESULTATOS -->
<input id="botonNumParrafos" type="button" value="Contar Parrafos"></td> <input id="botonNumMiClase" type="button" value=".miClase Contar"></td> <input id="botonNumHijosDiv1" type="button" value="Contar Hijos de DIV 1"></td> <input id="botonGetHijosDiv2" type="button" value="Consultar Hijos de DIV 2"></td>
1. Deseamos seleccionar todos los párrafos de una pagina, contarlos y mostrar dicho valor en un alert
alert($('p').length);
2. Deseamos seleccionar todos los elementos que tengan asignada la clase CSS “.miClase”, contarlos y mostrar dicho valor en un alert
alert($('.miClase').length); //Existen dos div con la clase asignada .miClase
3. Deseamos seleccionar un elemento identificado como
div1 y contar cuantos hijos tiene
alert($('#div1 > *').length); //div1 tiene 4 parrafos
Estos son ejemplos claros del potencial de JQuery, cuando usamos el selector este nos retorna un objeto que podemos recorrer y consultar, miremos el siguiente escenario:
4. Deseamos seleccionar los hijos del
div2 y mostrar en un alert los identificadores de cada uno de los hijo y el contenido
str = "";
$('#div2 > *').each(function(){
str += $(this).attr("id")+" Contenido: "+$(this).attr("innerHTML")+"</br>"; //Concatenamos
})
$("#mostrarResultados").html(str);
En este punto he tocado funciones que no he mencionado aun, como es
each(), $(this), attr() y html() a continuación esta la explicación de cada uno de ellos:
*
each: realiza un ciclo por cada uno de lo elementos seleccionados
*
$(this): hace referencia a cada uno de los objetos del vector que se esta recorriendo
*
attr(): hace referencia a un atributo del elemento, por ejemplo si quiero consultar el src de una imagen lo hago por medio de attr(‘src’)
*
html(): es lo mismo que realizarle un innerHTML pero mas reducido
ConclusiónComo lo he venido mencionado y lo sigo justificando, JQuery nos ahorra lineas y lineas de código podemos conseguir resultados en muy poco tiempo y nos deja volar la imaginación de una forma increíble. Por ultimo, recomiendo consultar el API porque existen mas formas para seleccionar elementos con ejemplos claros de uso de cada uno de ellos
FUENTE
Mostrar Temas
