Curso jQuery (1): Selectores

Curso jQuery (1): Selectores

¿Qué es jQuery y como se utiliza? jQuery es un lenguaje en Javascript que se ejecuta en cliente y gestiona de manera asíncrona aspectos de tu web ya sean del frontend o del backend. Esta herramienta nació combinando los lenguajes de Javascript y Ajax con una Sintaxis más intuitiva y fácil de programar. En este Curso jQuery te proporcionará los conceptos básicos para utilizar este lenguaje en tu web. Será necesario tener conceptos básicos sobre HTML para poder gestionar esta maravillosa herramienta.

IR A WEB OFICIAL DE JQUERY DESCARGAR JQUERY 1.12.3

Curso jQuery: Como empezar

Para utilizar jQuery en primer lugar tendréis que bajaros la última actualización, es un simple archivo con extensión .js que deberéis colocar en donde tengais alojada vuestra web para posteriormente poder realizar un enlace a este archivo dentro del código HTML.

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
   <head>
     <script src="tucarpeta/jquery.min.js"></script>
   </head>
   <body>
      Tu código html
   </body>
</html>

Otra opción es enlazarlo directamente desde la web oficial aunque esto puede generar algunos conflictos con los enlaces externos:

1
     <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Una vez realizado este paso ya podemos utilizar la sintaxis de jQuery en nuestro documento, ya sea enlazando de la misma manera un archivo con extensión .js o directamente entre las etiquetas destinadas para ello.

1
2
3
     <script  type="text/javascript">
          Tu codigo jQuery
     </script>

Curso jQuery: Sintaxis básica

El lenguaje jQuery no es muy distinto a Javascript. La declaración de variables y la utilización operadores funcionan del mismo modo, además la utilización de métodos o funciones relacionadas con ciertas variables no se diferencia en gran medida de Javascript. Veamos unos ejemplos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Declaración simple de variable
$foo = 'hello world';
         
//Los espacios en blanco no tienen valor fuera de las comillas
$foo =         'hello world';
         
//Los paréntesis indican prioridad
2 * 3 + 5;    // es igual a 11; la multiplicación ocurre primero
2 * (3 + 5);  // es igual a 16; por lo paréntesis, la suma ocurre primero

//La tabulación mejora la lectura del código, pero no posee ningún significado especial
$.myFunc() = function() {
     console.log('hello');
};

Una característica particular de jQuery es la utilización del símbolo $ para trabajar con los selectores. Este símbolo lo podrás encontrar delante de cualquier variable, definición de métodos o funciones.

Curso jQuery: $(document).ready()

$(document).ready() se compone de dos partes. La primera $(document) o selector de todo el documento ejecutado por el cliente y .ready() que hace referencia al disparador o cuando se ejecutará el código que introduzcamos en adelante. Este disparador define el momento del objeto y funciona de forma parecida a los listeners de Javascript.

No es posible interactuar de forma segura con el contenido de una página hasta que el documento no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la página este disponible.

1
2
3
$(document).ready(function() {
    console.log('el documento está preparado');
});

Otra forma abreviada existente para $(document).ready() que podrás encontrar algunas veces, pero no es recomendable usarla en caso que este programando con código para gente que no esté habituada a jQuery.

Además jQuery te ofrece la posibilidad de pasarle a $(document).ready() una función definida en lugar de una anónima:

1
2
3
4
function readyFn() {
    // código a ejecutar cuando el documento este listo
}
$(document).ready(readyFn);

Curso jQuery: Selectores

La parte más básica de jQuery hace referencia al concepto de poder seleccionar uno o varios elementos del documento y realizar acciones con ellos. Es capaz de soportar gran parte de los selectores de CSS3 y algunos más no estandarizados. Aquí puedes encontrar una lista completa sobre los selectores de jQuery.

A continuación te mostramos las técnicas habituales para la selección de elementos:

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
//Selección de elementos en base a su id
$('#myId'); // notar que los IDs deben ser únicos por página

//Selección de elementos en base al nombre de clase
$('div.myClass'); // si se especifica el tipo de elemento,
                  // se mejora el rendimiento de la selección

//Selección de elementos por su atributo
$('input[name=first_name]'); // tenga cuidado, que puede ser muy lento

//Selección de elementos en forma de selector CSS
$('#contents ul.people li');

//Pseudo-selectores
// selecciona el primer elemento <a> con la clase 'external'
$('a.external:first');
 
// selecciona todos los elementos <tr> impares de una tabla
$('tr:odd');
 
// selecciona todos los elementos del tipo input dentro del formulario #myForm
$('#myForm :input');
 
// selecciona todos los divs visibles
$('div:visible');
 
// selecciona todos los divs excepto los tres primeros
$('div:gt(2)');
 
// selecciona todos los divs actualmente animados
$('div:animated');

Related Posts

1 COMMENTS

Leave a reply