O que é necessário e como o seletor jQuery é escrito?
Um web designer moderno não só deve possuiras noções básicas de HTML, CSS e JavaScript, mas também ser capaz de trabalhar na biblioteca do jQuery, que se concentra na interação do JavaScript com documentos HTML. Ele permite que você acesse e manipule rapidamente qualquer elemento DOM (a interface do programa que abre o acesso ao conteúdo de arquivos html). As principais unidades estruturais dessa biblioteca são as equipes. Para aplicar este ou aquele comando, você precisa de um seletor de jQuery.
A fórmula dos seletores na biblioteca jQuery
Seletores de JQuery são baseados naqueles usados em CSS. Eles são necessários para selecionar os elementos do arquivo HTML, de modo a usá-los para chamar um ou outro método de manipulá-los (a equipe). A busca pelo seletor é realizada por meio da função $ (). Por exemplo, $ ("div").
Os seletores podem ser classificados de acordo com a maneira como os elementos são selecionados:
- básico;
- por atributo;
- por hierarquia;
- por conteúdo;
- por posição;
- seleção de campos de formulário;
- outros.
Seletores Básicos
Em 90% dos casos, ao trabalhar com esta biblioteca, um seletor jQuery pertencente ao grupo principal é usado. Todos eles são bastante simples e compreensíveis. Vamos considerar cada um deles:
- * - seleciona todos os elementos da página, incluindo cabeça, corpo, etc;
- p / div / sidebar / ... - seleciona todos os elementos relacionados à tag dada (ou seja, p.div, barra lateral, etc.);
- .myClass / p.myClass - seleciona elementos com o nome da classe especificada;
- # myID / p. # myID - seleciona um elemento com o ID fornecido.
Vamos dar um exemplo. Digamos que precisamos selecionar todos os elementos de uma página com a classe par, a entrada será semelhante a: $ (.par). Se apenas os elementos de p desta classe forem necessários, escreveremos: $ (p.par).
Seletores de atributo
O seletor principal do JQuery pode ser usado seprecisamos selecionar um elemento que pertence a uma classe que tenha um ID ou selecione todos os elementos da página. No entanto, há momentos em que o elemento desejado não possui uma classe ou ID. É por isso que existem seletores por atributo. Eles permitem que você experimente em algum atributo de um elemento HTML, por exemplo, por href ou src. Este atributo é escrito entre colchetes [].
O exemplo mais simples: $ ([src]) - seleciona todos os elementos que possuem um atributo src. Você pode restringir a área de seleção definindo o atributo para um valor específico: $ ([src = "value"]).
Você pode usar vários em jQueryseletores, se necessário, restringir a área de seleção. Por exemplo, $ (p [color = blue] [size = 12]) - somente os elementos de p que são ciano e tamanho 12 serão selecionados.
Seletores de conteúdo
No caso em que não é possível selecionar elementos por atributos ou por seletores principais, então vale a pena referir-se ao seu conteúdo. No total existem 4 seletores deste tipo:
- : contém - seleciona os elementos que contêm o texto especificado;
- : tem - seleciona elementos que contêm outros elementos característicos da string dada;
- : pai - seleciona itens que contêm qualquer outro;
- : vazio - seleciona itens que não contêm outros.
Vamos dar um exemplo. Para selecionar todos os elementos div contendo o texto Hello, você precisa escrever $ (div: contains ("Hello")).
Seletores por hierarquia
Existe outra maneira de selecionar elementos no jQuery,ou seja, de acordo com sua hierarquia (ou seja, o relacionamento entre si na página HTML). Há muitos deles, então apresentamos os dois mais populares: o "filho" e "descendente".
No primeiro caso, os elementos são selecionadossão descendentes diretos (filho) de um determinado elemento (ancestral). Por exemplo, para selecionar itens de lista na classe light que são filhos da lista de nav, você precisa escrever: $ (ul # nav> li.light).
O segundo caso é mais geral. Descendentes indiretos de algum elemento podem ser selecionados aqui. Por exemplo, para selecionar links dentro da lista de nav, escrevemos: $ (ul # nav a).
Assim, no jQuery, elementos podem ser selecionados de várias maneiras usando parâmetros como classe, ID, atributos, conteúdo ou hierarquia de elementos de um documento HTML.
