Los selectores básicos de JQuery

Para los días que tengo más complicados, y para que no decaiga la fiesta :D, me gustaría comenzar con una serie de post relacionados con JQuery.
Lo más básico de JQuery que debemos aprender son los Selectores. Hoy solamente voy a mostrar los denominados como básicos.

A través del símbolo $, podemos seleccionar uno o varios elementos de nuestra página HTML con el fin de poder manipularlos, asignarles eventos, etc. Podemos obtener los mismos de las siguientes maneras:

  • A través del ID del elemento:   Se utiliza el símbolo # seguido del id del elemento que queremos recuperar.

    [javascript]$(‘#txtControl’).css(‘color’, ‘red’);[/javascript]

  • A través del tag del elemento:  Se indica el tipo de elemento(s) sin ningún simbolo que le preceda.

    [javascript]$(‘a’).css(‘fontFamily’, "Comic Sans MS");[/javascript]

  • A través de la clase que tiene asignada el/los elemento: Utilizamos un punto seguido de la clase css para obtener los elementos que la tienen asignada.

    [javascript]$(‘.cuadrado’).css(‘backgroundColor’, ‘blue’);[/javascript]

  • A través de dos clases asignadas a un mismo elemento o varios: Igual que el selector por una clase simple, sumándole una clase más sin ningún tipo de separación.

    [javascript]$(‘.cuadrado.link’).css(‘color’, ‘red’);[/javascript]

  • Todos los elementos de la página: Escribimos un asterisco para referirnos a todos ellos.

    [javascript]$(‘*’).css(‘fontSize’, ’20px’);[/javascript]

  • A través de varios selectores a la vez: Especificamos los selectores, del tipo que queramos, separados por comas.

    [javascript]$(‘#txtControl,p,.cuadrado’).css(‘textAlign’, ‘center’);[/javascript]

¡Saludos!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.