elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Aporte] JQuery (Selectores)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Aporte] JQuery (Selectores)  (Leído 2,944 veces)
AFelipeTrujillo

Desconectado Desconectado

Mensajes: 160



Ver Perfil WWW
[Aporte] JQuery (Selectores)
« en: 4 Enero 2011, 18:08 pm »

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
  1.    <head>
  2.        <script src="jquery.js"></script>
  3.        <script type="text/javascript">
  4.            $(function(){
  5.                $("#botonNumParrafos").click(function(){
  6.                    alert($('p').length);
  7.                })
  8.  
  9.                $("#botonNumMiClase").click(function(){
  10.                    alert($('.miClase').length);
  11.                })
  12.  
  13.                $("#botonNumHijosDiv1").click(function(){
  14.                    alert($('#div1 > *').length);
  15.                })
  16.  
  17.                $("#botonGetHijosDiv2").click(function(){
  18.                    str = "";
  19.                    $('#div2 > *').each(function(){
  20.                        str += $(this).attr("id")+" Contenido: "+$(this).attr("innerHTML")+"</br>"; //Concatenamos
  21.                    })
  22.                    $("#mostrarResultados").html(str);
  23.                })
  24.            });
  25.  
  26.        </script>
  27.  
  28.        <style>
  29.            .miClase{
  30.                background: #CCC;
  31.            }
  32.  
  33.        </style>
  34.    </head>
  35.  
  36.    <body>
  37.        <div id="div1">
  38.            <p id="p1">Parrafo 1</p>
  39.            <p id="p2">Parrafo 2</p>
  40.            <p id="p3">Parrafo 3</p>
  41.            <p id="p4">Parrafo 4</p>
  42.        </div>
  43.  
  44.        <div class="miClase" id="div2">
  45.            <h3 id="cabecera1">Cabecera H3</h3>
  46.            <h4 id="cabecera2">Cabecera H4</h4>
  47.        </div>
  48.  
  49.        <div id="mostrarResultados">
  50.            <!-- MOSTRAR RESULTATOS -->
  51.        </div>
  52.  
  53.        <table>
  54.                <tr>
  55.                    <td>
  56.                    <input id="botonNumParrafos" type="button" value="Contar Parrafos"></td>
  57.                    <td>
  58.                    <input id="botonNumMiClase" type="button" value=".miClase Contar"></td>
  59.                    <td>
  60.                    <input id="botonNumHijosDiv1" type="button" value="Contar Hijos de DIV 1"></td>
  61.                    <td>
  62.                    <input id="botonGetHijosDiv2" type="button" value="Consultar Hijos de DIV 2"></td>
  63.                </tr>
  64.  
  65.        </table>
  66.    </body>
  67. </html>

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

Código
  1. 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
  1. 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
  1. 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
  1. str = "";
  2. $('#div2 > *').each(function(){
  3.   str += $(this).attr("id")+" Contenido: "+$(this).attr("innerHTML")+"</br>"; //Concatenamos
  4. })
  5. $("#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



En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Aporte] Lightbox y JQuery
Desarrollo Web
AFelipeTrujillo 0 2,821 Último mensaje 22 Junio 2010, 23:41 pm
por AFelipeTrujillo
[Aporte] JQuery
Desarrollo Web
AFelipeTrujillo 4 4,127 Último mensaje 4 Enero 2011, 14:43 pm
por AFelipeTrujillo
[Aporte] JQuery: Color Picker
Desarrollo Web
AFelipeTrujillo 0 2,916 Último mensaje 8 Enero 2011, 18:46 pm
por AFelipeTrujillo
[Aporte]jShowOff: Un Plugin para jQuery para Rotar Contenido
Desarrollo Web
AFelipeTrujillo 0 3,398 Último mensaje 16 Febrero 2011, 18:54 pm
por AFelipeTrujillo
[Aporte] Slide-Jquery
Desarrollo Web
TrokaMc 4 2,172 Último mensaje 19 Diciembre 2013, 09:19 am
por TrokaMc
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines