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.