Un diseñador web moderno no solo debe poseerlos conceptos básicos de HTML, CSS y JavaScript, pero también ser capaz de trabajar en la biblioteca de jQuery, que se centra en la interacción de JavaScript con documentos HTML. Le permite acceder rápidamente y manipular cualquier elemento DOM (la interfaz del programa que abre el acceso a los contenidos de los archivos html). Las principales unidades estructurales de esta biblioteca son los equipos. Para aplicar este o aquel comando, necesitas un selector jQuery.

selector de jquery

La fórmula de selectores en la biblioteca jQuery

Los selectores de JQuery se basan en los que se usan en CSS. Se necesitan para seleccionar los elementos del archivo HTML, para usarlos para llamar a uno u otro método de manipulación (el equipo). La búsqueda por el selector se lleva a cabo mediante la función $ (). Por ejemplo, $ ("div").

Los selectores se pueden clasificar de acuerdo con la forma en que se seleccionan los elementos:

  • básico;
  • por atributo;
  • por jerarquía;
  • por contenido;
  • por posición;
  • selección de campos de formulario;
  • otros

Selectores básicos

En el 90% de los casos, cuando se trabaja con esta biblioteca, se utiliza un jQuery-selector que pertenece al grupo principal. Todos ellos son bastante simples y comprensibles. Consideremos cada uno de ellos:

  • * - selecciona todos los elementos de la página, incluidos cabeza, cuerpo, etc.
  • p / div / sidebar / ... - selecciona todos los elementos relacionados con la etiqueta dada (es decir, p.div, barra lateral, etc.);
  • .myClass / p.myClass - selecciona elementos con el nombre de clase especificado;
  • # myID / p. # myID: selecciona un elemento con la ID proporcionada.

Déjanos dar un ejemplo. Digamos que tenemos que seleccionar todos los elementos de una página con el par de clase, la entrada se verá así: $ (.par). Si solo se necesitan los elementos de p de esta clase, escribiremos: $ (p.par).

elementos jquery

Selectores de atributos

El selector JQuery principal se puede usar sinecesitamos seleccionar un elemento que pertenece a una clase que tiene una ID o seleccionar todos los elementos de la página. Sin embargo, hay ocasiones en que el elemento deseado no tiene una clase o ID. Es por eso que hay selectores por atributo. Le permiten muestrear en algún atributo de un elemento HTML, por ejemplo, href o src. Este atributo está escrito entre corchetes [].

El ejemplo más simple: $ ([src]) - selecciona todos los elementos que tienen el atributo src. Puede restringir el área de muestra estableciendo el atributo en un valor específico: $ ([src = "value"]).

Puedes usar varios en jQuerylos selectores, si es necesario, reducen el área de selección. Por ejemplo, $ (p [color = blue] [size = 12]): solo se seleccionarán los elementos de p que sean azules y el tamaño 12.

Selectores de contenido

En el caso de que no sea posible seleccionar elementos por atributos o por selectores principales, vale la pena hacer referencia a su contenido. Hay 4 selectores de este tipo:

  • : contiene - selecciona elementos que contienen el texto especificado;
  • : Ha - selecciona elementos que contienen otros elementos característicos de la línea;
  • : padre: selecciona elementos que contienen otros;
  • : vacío: selecciona elementos que no contienen otros.

Déjanos dar un ejemplo. Para seleccionar todos los elementos div que contienen el texto Hello, debe escribir $ (div: contains ("Hello")).

jquery múltiples selectores

Selectores de jerarquía

Hay una forma más de seleccionar elementos en jQuery,a saber, de acuerdo con su jerarquía (es decir, la relación entre ellos en la página HTML). Hay muchos de ellos, así que aquí están dos de los más populares: "niño" y "niño".

En el primer caso, los elementos seleccionadosson los descendientes directos (hijos) del elemento dado (ancestro). Por ejemplo, para seleccionar los elementos de la lista en la clase light que son los elementos secundarios de la lista de navegación, debe escribir: $ (ul # nav> li.light).

El segundo caso es más general. Aquí, los descendientes indirectos de un elemento también se pueden seleccionar. Por ejemplo, para seleccionar enlaces dentro de la lista de navegación, escribiremos: $ (ul # nav a).

Por lo tanto, en JQuery, los elementos se pueden seleccionar de varias maneras usando parámetros tales como clase, ID, atributos, contenido o jerarquía de elementos del documento HTML.

</ p>