filosofía menos es más

0

Por admin | Para la categoría de Ajax | noticia del 10-08-2009

Es el lema que reza en el proyecto jquery, como con menos líneas de código podemos hacer más cosas. Una de las ventajas de jquery es la facilidad para poder acceder a diferentes elementos del árbol del dom sin tener que escribir pesadas líneas de código (bucles), para llegar al elemento y poder aplicar un efecto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<script  type="text/javascript"   src="jquery.js"></script>
<style type="text/css">
   .par { color:#995511;   }
   .impar { color:#6666ff; }
   .unica { color:#779999; }
</style>
   <script type="text/javascript">
 
   $(document).ready ( function() {
        $("tr:odd").addClass("impar");
	$("tr:even").addClass("par");
	$('td:contains("tercera")').parent().find("td:eq(2)").addClass("unica");
   }	   
   );
      </script>
</head>
<body>
<table>
 
   <tr>
     <td> elemento uno </td>
     <td> elemento dos </td>
     <td> elemento tres </td>
   </tr>
   <tr>
    <td>  elemento dos uno</td>
    <td>  elemento dos dos </td>
    <td>  elemento dos tres </td>
   </tr>
   <tr>
    <td>  tercera fila </td>
    <td>  elemento tres dos </td>
    <td>  elemento tres tres </td>
   </tr>
 
</table>

cuando la función ready indica que el ábol del dom esta preparado acceder las filas de la tabla es algo rápido y sencillo.
Con $(“tr:odd”).addClass(“impar”) estamos añadiendo la clase css impar a las filas impares de la tabla, para las pares hacemos $(“tr:even”).addClass(“par”);

Tal es la versatilidad de jquery que nos permite acceder al padre “parent” “sibiling” hermano de un elemento del dom.

Para modificar el segundo elmento de la fila de la tabla que contiene la palabra “tercera” hacemos, $(‘td:contains(“tercera”)’).parent().find(“td:eq(2)”).addClass(“unica”); y le aplicamos la clase única.

Comentarios cerrados automáticamente al pasar más de un año