Seletores de jQuery | Explicado

O JavaScript é mais comumente usado para manipular os elementos HTML de uma página da Web, acessando -os com a ajuda do DOM (modelo de objeto de documento), ele pode até ser usado para exibir animações e outros efeitos como resultado de uma certa ação realizada pelo usuário. Para fazer tudo isso, JavaScript primeiro precisa de uma referência ao elemento HTML que queremos manipular.

Selecionar os elementos da página da web html pode levar algumas linhas de código no JavaScript, mas com jQuery, o código se torna conciso e parece muito legível. jQuery suporta as seleções de quase todos os Seletores definido no CS3, além de fornecer alguns seletores personalizados embutidos também.

Adicionando jQuery à nossa página HTML

Para ser capaz de trabalhar em nosso projeto, primeiro precisamos importar jQuery, colocando um link para um arquivo jQuery na tag de script. O método mais eficaz de importar jQuery é usar um jQuery hospedado no Google CDN, no arquivo html usar as seguintes linhas na tag de script:

A função de fábrica

As funções do seletor de jQuery são frequentemente chamadas de função de fábrica, começa com um sinal de dólar "$" seguido de suportes redondos ou parênteses "()". Essa função de fábrica é usada para se referir a um elemento da página da web e você pode adicionar um evento usando um operador de ponto. Por exemplo:

$ (documento).pronto (function ()
// dentro do corpo da função

);

Seletores de jQuery

Seletores de jQuery ou funções de fábrica funcionam em três grandes seletores, a saber: ID da tag, nome da tag, classe de tag.

• Nome da tag: Isso é usado para selecionar o nome do elemento da cúpula, por exemplo, se você quiser selecionar todos os Tags H1.
• Classe de tag: isso é usado para escolher um elemento com uma determinada classe; Por exemplo, se você deseja selecionar um elemento com a classe “minha classe" você pode usar $ ('.minha classe')
• ID da tag: isso é usado para selecionar um elemento com um ID específico; por exemplo, para escolher um elemento com um id de “minha identidade" você pode usar $ ('#myid')

Selecionando elementos por nome

Para mostrar o uso de seletores de jQuery, vamos primeiro passar pela seleção de elementos usando o nome da tag. Suponha que você queira selecionar todos os

Uma tag p

Outra tag P

Mais uma tag P

Você deve ver a seguinte saída na página da web:

Para manipular o

As tags usam o seguinte código de script:

$ (documento).pronto (function ()
$ ("p").CSS ("Antecedentes", "Amarelo");
);

Com as linhas acima, a saída ficará assim

Até temos seletores de filtro; Suponha que queremos apenas selecionar o último $ (documento).pronto (function ()
$ ("P: Last").CSS ("Antecedentes", "Amarelo");
);

Isso nos dará a seguinte saída:

Como você pode ver, fomos capazes de selecionar em um específico

marcação Usando o seletor de nome filtrado.

Selecionando elementos por id

Para demonstrar os seletores de identificação, temos as seguintes linhas no arquivo HTML:

Uma tag P com o id olá

Outra tag P

Mais uma tag P

Como você pode ver, o primeiro

tag tem o id "olá", Para manipular esse elemento usando seu ID, podemos usar o seguinte código de script:

Como você pode ver na imagem acima, fomos capazes de selecionar um elemento usando seu ID e manipular sua propriedade de estilo usando o seletor de ID do jQuery.

Selecionando um elemento por classe

Para selecionar um elemento usando a classe, usamos o ponto Antes do nome da classe na função da fábrica, para poder demonstrar o uso do seletor de classe jQuery, vamos dar a uma das tags P alguma classe. Nosso código HTML ficará assim:

Uma tag P com o id olá

Outra tag P

Mais uma tag P, mas com alguma classe

Para selecionar a classe “MyClass” e dar um fundo de vermelho, usamos o seguinte código de script:

$ (documento).pronto (function ()
$ (".minha classe").CSS ("Background", "Red");
);

Com o código acima, você verá a seguinte saída:

Como você pode ver, fomos capazes de manipular o elemento com a classe “MyClass” usando seletores de classe jQuery.

Conclusão

O jQuery da biblioteca mais famoso do JavaScript é altamente útil e economiza tempo quando se trata de manipular elementos em uma página da web, o único pré-req de usar o jQuery em um projeto é adicionar um link à biblioteca jQuery usando um jQuery hospedado do Google CDN. O jQuery consiste em uma função que é chamada de função de fábrica que permite aos usuários selecionar elementos da página da web e manipular suas propriedades. A função de fábrica '$ (")' funciona em 3 seletores básicos que são ou seja,, Seletor de identificação, Seletor de nome e seletor de classe.