[Aporte] JQuery (Selectores)

Introducción

En 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.

Contenido

En 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

Ejemplos

Supongamos el siguiente codigo de una pagina cualquiera:

Código

<html>
    <head>
        <script src="jquery.js"></script>
        <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);
                })
            });
 
        </script>
 
        <style>
            .miClase{
                background: #CCC;
            }
 
        </style>
    </head>
 
    <body>
        <div id="div1">
            <p id="p1">Parrafo 1</p>
            <p id="p2">Parrafo 2</p>
            <p id="p3">Parrafo 3</p>
            <p id="p4">Parrafo 4</p>
        </div>
 
        <div class="miClase" id="div2">
            <h3 id="cabecera1">Cabecera H3</h3>
            <h4 id="cabecera2">Cabecera H4</h4>
        </div>
 
        <div id="mostrarResultados">
            <!-- MOSTRAR RESULTATOS -->
        </div>
 
        <table>
                <tr>
                    <td>
                    <input id="botonNumParrafos" type="button" value="Contar Parrafos"></td>
                    <td>
                    <input id="botonNumMiClase" type="button" value=".miClase Contar"></td>
                    <td>
                    <input id="botonNumHijosDiv1" type="button" value="Contar Hijos de DIV 1"></td>
                    <td>
                    <input id="botonGetHijosDiv2" type="button" value="Consultar Hijos de DIV 2"></td>
                </tr>
 
        </table>
    </body>
</html>

1. Deseamos seleccionar todos los párrafos de una pagina, contarlos y mostrar dicho valor en un alert

Código

alert($('p').length);

2. Deseamos seleccionar todos los elementos que tengan asignada la clase CSS “.miClase”, contarlos y mostrar dicho valor en un alert

Código

alert($('.miClase').length); //Existen dos div con la clase asignada .miClase

3. Deseamos seleccionar un elemento identificado como div1 y contar cuantos hijos tiene

Código

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

Código

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ón

Como 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