564 Shares 9353 views

Por que precisamos e como gravar JQuery-selector?

Modern web designer deve não só dominar o básico de HTML, CSS e JavaScript, mas também ser capaz de trabalhar na biblioteca JQuery, que incide sobre a interação de JavaScript com HTML-documentos. Que permite o acesso rápido a qualquer elemento DOM (interface de programação de aplicativo que fornece acesso a arquivos html conteúdo) e manipulá-los. As principais unidades estruturais da biblioteca são a equipe. A fim de aplicar uma ou outra equipe, você precisa de um JQuery-selector.

seletores fórmula na biblioteca JQuery

Os seletores em jQuery com base no uso de CSS. Eles são obrigados a selecionar itens HTML-file, para usá-los para causar estes ou outros métodos de manipulação eles (a equipe). Pesquisa é realizada através da função de seletor $ (). Por exemplo, $ ( 'div').

Os seletores podem ser classificadas dependendo de como a seleção de elementos:

  • básica;
  • por atributo;
  • a hierarquia;
  • conteúdo;
  • sobre a situação;
  • escolha de campos de formulários;
  • outros.

seletores chave

Em 90% dos casos, quando se utiliza esta biblioteca é utilizada JQuery-selector pertencente ao grupo principal. Todos eles são bastante simples e clara. Vamos considerar cada um deles:

  • * – seleciona todos os elementos da página, incluindo a cabeça, corpo, etc;.
  • p / div / barra lateral / … – seleciona todos os elementos referentes ao marcador predeterminada (isto é, a p.div, barra lateral, etc …);
  • .myClass / p.myClass – selecciona os elementos com o nome de classe especificada;
  • # MyID / p # MyID -. Seleciona qualquer item com o ID fornecido.

Aqui está um exemplo. Vamos dizer que nós precisamos selecionar todos os elementos da página com entrada de classe par será o seguinte: (. Par) $. Se necessário apenas p elementos desta classe, em seguida, escrever: $ (p.par).

seletores de atributo

Você pode usar o principal seletor JQuery, se precisamos para selecionar um item pertencente a qualquer classe com ID ou selecione todos os elementos da página. No entanto, há casos em que um item não tem nenhuma classe ou ID. É por esta e há seleções por atributo. Eles permitem que você faça uma seleção em algum atributo dos elementos HTML, tais como href ou src. Este atributo é escrito em colchetes [].

O exemplo mais simples: $ ([src]) – seleciona todos os elementos que têm atributo src. É possível reduzir a amostra especificando determinado valor atributo: $ ([src = 'http: // site / artigo / 132222 / value']).

Você pode usar alguns seletores jQuery se você quer restringir o campo de escolha. Por exemplo, $ (P [= cor azul] [tamanho = 12]) – são seleccionados apenas os elementos de p, que tem uma cor e tamanho 12 azul.

conteúdo seletores

Nesse caso, se você não pode selecionar elementos com base em atributos ou selectores básicos, você deve consultar o seu conteúdo. No total existem quatro selector deste tipo:

  • : Contém – seleciona os itens que contenham o texto especificado;
  • : Tem – seleciona elementos que contêm outros elementos característicos da linha;
  • : Pai – selecciona elementos que contêm qualquer outro;
  • : Vazio – seleciona elementos que não contêm qualquer outro.

Aqui está um exemplo. Para selecionar todos os elementos div, contendo o texto da Olá, você precisa escrever $ (div: contém ( 'Olá')).

hierarquia seletores

Há uma outra maneira de selecionar elementos em JQuery, ou seja, – de acordo com a sua hierarquia (isto é, a proporção de outro na página HTML). Muitos deles, por isso apresentamos dois dos mais populares, "criança" e "descendente".

No primeiro caso, os elementos são seleccionados, que são descendentes directos (crianças) de um dado elemento (antepassado). Por exemplo, para selecionar os elementos da lista na classe luz que é uma lista nav filho, então você precisa escrever: $ (ul # nav> li.light).

O segundo caso – um mais geral. Não podem ser selecionados e descendentes indiretos do elemento. Por exemplo, para selecionar os links dentro da lista nav prescrever: $ (ul # nav a).

Assim, em JQuery elementos podem ser selecionadas de várias maneiras, usando parâmetros como uma classe, ID, atributos, conteúdo ou hierarquia de elementos HTML em documentos.