Cómo seleccionar elementos con jQuery

categoría Computadoras y software / Programación / Javascript

ost de lo que va a hacer en jQuery sucede a través de selectores. Por ejemplo, podrás frecuencia selecciona una pieza de una página web y luego tener jQuery realizar una acción en ese pedazo de la página. Esa acción podría ser cualquier cosa de añadir texto, cambiar el HTML, CSS o cambiar, bueno, casi cualquier cosa que se te ocurra!

El flujo básico para la programación de javascript con jQuery es la siguiente:

  1. Seleccione un elemento de la página web (o toda la página en sí).

  2. Haga algo interesante con ese elemento.

Está bien, lo que se hace con el elemento no tiene que ser interesante, pero que va a hacer algo con el elemento seleccionado. Ese algo puede ser cualquier cosa, desde la eliminación del elemento para agregar o cambiar o simplemente obtener información del elemento, al igual que su texto o estilos CSS actuales.

jQuery selectores de cerca

Hay tres selectores primarias o básicas en jQuery. Ellos son los que utilizará con mayor frecuencia. Puede configurar selectores muy complejos basados ​​en la estructura de la página, pero más a menudo podrás utilizar uno de estos tres selectores:

  • Por clase

  • Por ID

  • Por elemento

Si tuviera algo de HTML que se veía así:

Mi libro

Se podía acceder a esa con jQuery así:

$ ("#") booktitle

Es importante tener en cuenta que las cosas en jQuery (y javascript) entre mayúsculas y minúsculas. Así Titulo del libro no es el mismo que TITULO DEL LIBRO y no el mismo que Titulo del libro. No importa lo que caso de que utilice, siempre que coincida entre el HTML y el código javascript y jQuery.

Ahora echa un vistazo a este poco de HTML:

Esto es un texto

El selector de jQuery se ve así:

$ (". titleClass")

Si usted piensa que estos selectores se parecen a sus homólogos CSS, tienes razón. No te preocupes si no estabas pensando eso- no habrá un concurso.

En CSS, puede acceder a los elementos por su identificación con un signo de libra (#) Y acceder a las clases con un solo punto (.):

# bookTitle.titleClass

Todo lo que estás haciendo para jQuery está terminando en el $ () construir y usar algunas citas también. Así se obtiene la siguiente:

$ ("# booktitle") $ (". titleClass")

El otro selector utilizado con frecuencia toma todos los elementos de un cierto tipo. El selector siguiente selecciona todos

elementos de la página entera:

$ ("div")

Hay selectores más avanzados. Por ejemplo, puede seleccionar por la posición de un elemento en la página y, bueno, casi cualquier combinación que se pueda imaginar. Pero vamos a usar estos tres más a menudo.

filtrado jQuery

Una cosa adicional que usted debe saber acerca de los selectores de jQuery es que usted puede filtrarlos. Esto es particularmente útil cuando se trata de trabajar con las formas y los acontecimientos.



Artículos Relacionados

Sobre el autor
Los métodos comunes de nodo jQuery Los métodos comunes de nodo jQuery

La librería jQuery convierte objetos DOM en poderosos nodos jQuery. La siguiente tabla muestra algunos de los métodos más utilizados del nodo jQuery.MétodoDescripciónaddClass (), removeClass (), toggleClass ()Aplica o quita una clase CSS a un…

Cómo agregar HTML a una página con jQuery Cómo agregar HTML a una página con jQuery

jQuery se puede utilizar para agregar HTML a una página. Usted puede agregar todo tipo de HTML, imágenes, casi cualquier cosa, y cambiar por completo el diseño de la página usando jQuery. Si lo hace, no es realmente una buena idea, ya que puede…

Cómo agregar jQuery a una página Cómo agregar jQuery a una página

Una vez que haya descargado o jQuery sabe dónde encontrar la versión hospedada-CDN, es necesario hacer referencia a él en su página. jQuery es como cualquier archivo externo javascript.Añadir jQuery local para una páginaDescargar jQuery y…

Cómo cambiar los elementos HTML con jQuery Cómo cambiar los elementos HTML con jQuery

WThere son algunas maneras de cambiar ya elementos HTML existentes con jQuery, dependiendo de lo que desee cambiar. Por ejemplo, digamos que usted quiere cambiar el texto de los elementos de la página que acaba de trabajar en.En lugar de tener cada…

Cómo crear una página para móviles dispuestos en Dreamweaver Cómo crear una página para móviles dispuestos en Dreamweaver

Páginas jQuery Mobile Starter de Dreamweaver son una buena manera de generar rápidamente un sitio móvil fácil. La página móvil de arranque crea una página HTML5 con cinco ficha páginas prediseñadas jQuery Mobile, o secciones de la página…

Cómo incorporar el jQuery ready () función Cómo incorporar el jQuery ready () función

Un problema común en la programación de javascript es que el programa de javascript se ejecutará antes de que se cargue la página. Se puede acceder a los elementos HTML en una página. Esto significa que también puede acceder a cosas…

Cómo instalar jQuery Cómo instalar jQuery

Hay dos formas de usar jQuery, ya sean descargados de forma local o en una red de entrega de contenido (CDN). La copia local es sólo eso, un archivo que se encuentra dentro de la raíz del documento en el disco duro de su servidor. Una versión…

Jquery para dummies Jquery para dummies

jQuery le permite seleccionar elementos en una página Web con facilidad. Usted puede encontrar todo lo que quieras en una página y luego usar jQuery para añadir efectos especiales, reaccionar a las acciones del usuario, o mostrar y ocultar el…

Selectores y filtros Jquery Selectores y filtros Jquery

Parte del poder de jQuery se basa en su capacidad de seleccionar determinadas secciones de la página. Esta tabla incluye varios selectores y filtros usados ​​comúnmente.Selector / FiltroLas búsquedas de # 133- $ ("elemento")Cualquier elemento…

Selectores de jQuery para la codificación con javascript Selectores de jQuery para la codificación con javascript

JQuery ofrece muchas maneras diferentes para que coincida con conjuntos de elementos dentro de un documento más allá de los métodos incorporados en javascript. Echa un vistazo a esta lista de todos los selectores de jQuery. Para usarlos,…

Recursos jquery Online Recursos jquery Online

A medida que adquiera experiencia con jQuery, es probable que tenga preguntas acerca de las técnicas más avanzadas jQuery. Y después de utilizar jQuery plug-ins, podrás enganchado y quiere conseguir más. jQuery.com ofrece una gran cantidad de…

Cómo seleccionar elementos con jQuery en css3 Cómo seleccionar elementos con jQuery en css3

Puede usar jQuery para realizar una amplia gama de selecciones de objetos en su aplicación CSS3, pero en su mayor parte, a utilizar los selectores básicos. Puedes leer más sobre ellos en jQuery. Aquí hay una lista de selectores básicos que…

» » » » Cómo seleccionar elementos con jQuery