viernes, 28 de marzo de 2014

JQuery tutorial principiante, uso de selectores : como seleccionar un elemento


JQuery, la famosa libreria Javascript para manejo de infinidad de cosas en la web, sino la conoces, pues deberías, con una gran cantidad de funcionalidad y plugins para casi todo, hasta existen motores de juegos basados en esta librería.

En esta ocasión, un tutorial muy básico para principiantes de esta librería donde observarán como utilizar una de las mejores facilidades de JQuery, los selectores.



Un selector, es la forma como puedes referencias a un elemento dentro de una página web. JQuery, utiliza los mismos formatos de selectores que podrías usar utilizando CSS3.

Por ejemplo supongamos que tienes un código similar al siguiente :

<span> Hey mirame!!! </span>

Y tu quieres seleccionar este elemento, bueno JQuery te permite seleccionar los elementos de tu pagina por etiqueta, usando:
$("mi-etiqueta") para el ejemplo $("span"). Ahora esto seleccionará todos, repito TODOS, los elementos span.

Pero si tu quieres seleccionar especificamente ese elemento, sera mejor que le des un id, tener muy en cuenta que los id, dentro del html no DEBEN ni PUEDE repetirse.

En nuestro ejemplo :

<span id="mi_elemento" > Hey mirame!!! </span>

Entonces para seleccionarlo, usamos el selector #, que es el mismo que se usa en CSS, este nos permite seleccionar un elemento por su ID

$("#mi_elemento")

Bueno, ahora digamos que tienes varios span, dentro de tu pagina pero quieres que solo algunos tengan determinado estilo, como por ejemplo un color de fondo, entonces, utilizas las clases, asi que definimos nuestra propiedad class con un nombre

<span > Hey mirame!!! </span>
<span class="mi_span_de_color" > Hey mirame!!! </span>
<span > Hey mirame!!! </span>
<span class="mi_span_de_color" > Hey mirame!!! </span>

Para ello utilizamos el selector . (punto), el cual al igual que en CSS, nos permite seleccionar los elemento(S) de una misma clase.
Asi que, que al hacer $(".mi_span_de_color"), lo que haremos es seleccionar todos los elementos de la clase mi_span_de_color

Para ejemplificar, vamos a utilizar otra funcion que tiene JQuery, que es css, con ella podemos definir el valor de una propiedad o estilo, su sintaxis es $(selector).css("propiedad", "valor")
Para nuestro ejemplo, haremos que los elementos de la clase mi_span_de_color, tengan el color de letra rojo .

$(".mi_span_de_color").css("color", "red");

Ejemplo


Primer span
Segundo span
Tercer span
Cuarto span



Cabe anotar, que puedes tener la misma definicio de clase para diversos elementos, por ejemplo puedes tener un li class="mi_elemento_de_color" , o un p class="mi_elemento_de_color"; y ambos tener propiedades o estilos diferentes, esto lo logras anteponiendo la etiqueta al punto, tu selector sería li.mi_elemento_de_color y p.mi_elemento_de_color, sirve tanto para CSS como para JQuery.

Usualmente esos son los selectores que mas usarás pero en algunos casos, puedes requerir, algunos como por ejemplo:

Seleccionar los elementos de un contenedor con JQuery


$("padre > * ");

$("#miLista li");


Seleccionar el primer elemento de una lista con JQuery


$("#miLista li:first-child");

$("#miLista li:nth-child(1)");


Seleccionar el ultimo elemento de una lista con JQuery


$("#miLista li:last-child");


Seleccionar el elemento numero [x] en una lista


$("#miLista li:nth-child(3)");


Hacer una lista <li> tenga lineas zebra


La propiedad odd no peternece al standard de CSS

$("#miLista li:odd").css("background-color", "orange");


Ejemplo

  • Fila 1
  • Fila 2
  • Fila 3
  • Fila 4



Seleccionar el padre o contenedor de un elemento


$("#mielemento").parent.css("background-color", "orange");


Seleccionar solo los elementos tipo Text de un formulario


$("#mi_formulario input[type=text]").parent.css("background-color", "orange");

Existen infinidad de selectores que provee JQuery, les dejo el enlace (JQuery > Selectors) para que investiguen, y si tienen dudas, me dejan un comentario y los ayudaré con gusto.

No hay comentarios:

Publicar un comentario

 
Powered by Blogger