464 Shares 5832 views

¿Por qué necesitamos y cómo grabar JQuery selector?

diseñador de páginas web moderno no sólo debe dominar los conceptos básicos del HTML, CSS y JavaScript, pero también ser capaz de trabajar en la biblioteca jQuery, que se centra en la interacción de JavaScript con documentos HTML. Que permite un rápido acceso a cualquier elemento DOM (interfaz de programación de aplicaciones que proporciona acceso al contenido archivos html) y manipularlos. Las principales unidades estructurales de la biblioteca son el equipo. Para la aplicación de uno u otro equipo, se necesita un selector de jQuery.

selectores de fórmula en la biblioteca JQuery

Los selectores de jQuery basan en el uso de CSS. Ellos están obligados a seleccionar elementos HTML en archivos, para utilizarlos para causar estos u otros métodos de manipulación de ellos (el equipo). Búsqueda se realiza a través de la función de selector de $ (). Por ejemplo, $ ( 'div').

Los selectores se pueden clasificar en función de cómo la selección de elementos:

  • básica;
  • por atributo;
  • la jerarquía;
  • contenido;
  • sobre la situación;
  • elección de los campos de formulario;
  • otros.

selectores de llave

En el 90% de los casos cuando se utiliza esta biblioteca se utiliza JQuery-selector perteneciente al grupo principal. Todos ellos son bastante simple y claro. Consideremos cada uno de ellos:

  • * – selecciona todos los elementos de la página, incluyendo la cabeza, el cuerpo, etc;.
  • p / div / barra lateral / … – selecciona todos los elementos pertenecientes a la etiqueta predeterminada (es decir, para p.div, barra lateral, etc …);
  • .myClass / p.myClass – selecciona los elementos con el nombre de la clase especificada;
  • # MyID / p # MyID -. Selecciona un tema determinado con el identificador dado.

He aquí un ejemplo. Digamos que tenemos que seleccionar todos los elementos de la página con la entrada de la clase nominal será de la siguiente manera: (. Par) $. Si es necesario sólo p elementos de esta clase, a continuación, escribir: $ (p.par).

selectores de atributos

Puede utilizar el selector principal jQuery, si tenemos que seleccionar un elemento perteneciente a una clase que tiene ID o seleccionar todos los elementos de la página. Sin embargo, hay casos cuando un elemento no tiene ninguna clase o ID. Es por esta y hay selecciones de atributo. Ellos le permiten hacer una selección en algún atributo de los elementos HTML, como href o src. Este atributo está escrito en corchetes [].

El ejemplo más simple: $ ([fuente]) – selecciona todos los elementos que tienen el atributo src. Es posible reducir la muestra mediante la especificación de cierto valor de atributo: $ ([src = 'http: // sitio / article / 132222 / valor']).

Puede utilizar algunos selectores jQuery si desea reducir el campo de elección. Por ejemplo, $ (p [color = blue] [size = 12]) – se seleccionan sólo aquellos elementos p, que tienen un color y tamaño 12 azul.

contenido de selectores

En ese caso, si no es posible seleccionar elementos en función de los atributos o selectores básicos, debe consultar a su contenido. En total hay 4 selector de este tipo:

  • : Contiene – selecciona los elementos que contienen el texto especificado;
  • : Ha – selecciona elementos que contienen otros elementos característicos de la línea;
  • : Parent – selecciona elementos que contienen cualquier otro;
  • : Vacío – selecciona los elementos que no contienen ningún otro.

He aquí un ejemplo. Para seleccionar todos los elementos div, que contiene el texto de la Hola, necesitas escribir $ (div: contiene ( 'Hola')).

jerarquía de selectores

Hay otra forma de seleccionar elementos en jQuery, es decir, – de acuerdo con su jerarquía (es decir, la proporción de uno a en la página HTML). Muchos de ellos, por lo que se presentan dos de los más populares, "niño" y "descendiente".

En el primer caso se seleccionan los elementos, que son descendientes directos (hijos) de un elemento dado (ancestro). Por ejemplo, para seleccionar los elementos de la lista en la clase de luz que es una lista de navegación niño, entonces tiene que escribir: $ (ul # nav> li.light).

El segundo caso – una más general. No se pueden seleccionar y descendientes indirectos del elemento. Por ejemplo, para seleccionar los enlaces dentro de la lista de navegación prescriben: $ (ul # nav a).

Así, en JQuery elementos pueden seleccionarse de diversas maneras mediante el uso de parámetros tales como clase, ID, atributos, contenido o jerarquía de elementos HTML en documentos.