PROGRAMACIÓN JAVASCRIPT - SELECTORES JQUERY

 MANERAS DE DESARROLLAR CON JQUERY

El primer selector que nos encontramos es aquel que selecciona un componente dentro de nuestro mapa documental mediante su atributo “id”. Como sabemos, el atributo “id” que tiene un componente debería ser único dentro del documento (esto es que no hubiera otro componente con el mismo valor de id)  Para seleccionar unívocamente un componente se usa este tipo de selector y su sintaxis es la que sigue: 

var a = $(“#nombre_del_id”); 

Como se ve, hay que preceder al id del signo ‘#’ y entrecomillar. Dentro de la variable a, por tanto, estará nuestro componente seleccionado mediante su id.

SELECTOR POR TIPO

El selector por tipo es aquel que selecciona por el nombre de la etiqueta (o tag), es decir, por el tipo de los componentes que se encuentran dentro de nuestro mapa documental. En contra del selector visto anteriormente, este selector puede seleccionar más de un elemento por lo que devuelve un array de valores con todos los elementos seleccionados. Su sintaxis es la que sigue:

 var a = $(“tipo”);

Únicamente debemos ingresar en el string entrecomillado el tipo de los elementos que queremos seleccionar, como:

 var a = $(“div”);

 En este ejemplo, la variable a contendría un array con todos los div que hubiera en nuestro documento.

SELECTOR POR CLASE

El selector por clase es un tipo de selector que selecciona a través del atributo class que tengan los componentes. Así, con un mismo selector, podemos seleccionar componentes de diferentes tipos solo con que compartieran la misma clase. Como ocurre con el selector por tipo, este tipo de selector puede seleccionar más de un componente a la vez con lo que nos devolverá un array de elementos.

Su sintaxis es la que sigue: 

x=$(“.nombre_de_clase”);

Usamos el signo “.” al inicio del nombre de nuestro estilo para indicar a la librería que estamos seleccionando por clase. Como hemos dicho diferentes tipos de componentes pueden tener la misma clase así que:

 x=$(“.redondeado”);

Esta línea seleccionaría todos los elementos que tuvieran la clase redondeado. 

 Así que x contendría al final un array de dos posiciones, una para el input y otra para el div.

SELECTORES ANIDADOS

Podemos anidar selectores con una separación mediante de esta manera:

 var a = $(“div .redondeado”); 

Con esta línea lo que seleccionaría nuestro selector sería un div (o varios) y dentro de ellos aquellos componentes que tuvieran la clase redondeado. La selección se lee de izquierda a derecha siendo las  siguientes selecciones discriminantes de las anteriores. Se pueden poner tantas como si quieran mientras tengan sentido:

 var a = $(“#uno div .redondeado”); 

Como anotación podemos comentar que no tiene sentido poner el selector por id en el medio de una selección o al final porque se entiende que este tipo de selector es único y, por tanto, no se necesitaría discriminar las selecciones anteriores para llegar a él.

AGRUPACIÓN DE SELECTORES

Quizás queramos unir en una misma variable diferentes selecciones a la vez. JQuery nos ofrece una sintaxis simple para ello: 

var a = $(“#uno, div, .redondeado”);

La separación por comas dentro de nuestra selección se entiende cuando, siguiendo el ejemplo, queremos seleccionar el componente cuyo id es uno, todos los componentes de tipo div y todos los componentes que tengan la clase redondeado. Todos ellos quedarían en el mismo array guardado como valor en la variable a.