JQuery é uma biblioteca javascript leve e divertida que permite manipular o CSS de muitas maneiras diferentes através do uso de vários métodos de jQuery. Usando esses métodos, você pode definir as propriedades de estilo dos elementos ou adicionar ou remover um determinado nome de classe de um elemento, ou talvez alternar entre adicionar ou remover classes.

Os métodos jQuery abaixo mencionados são usados ​​para manipular o CSS .

1. Método CSS ()
2. Método addclass ()
3. método hasclass ()
4. Método removeClass ()
5. Método toggleClass ()

Vamos explorá -los em detalhes.

Método CSS ()

O método CSS () no jQuery é usado com o objetivo de aplicar ou buscar uma ou mais propriedades de estilo em um elemento HTML.

Sintaxe

CSS ("Propriedade", "Valor"); // Para definir uma propriedade CSS
CSS ("Propriedade"); // Para obter uma propriedade CSS

Exemplo 1

Suponha que você queira definir a cor de fundo de um elemento usando o método css () no jQuery.

Html

Este é um parágrafo

Definir cor de fundo da div

No código acima, três elementos HTML que são ,

, e estão sendo criados.

jQuery

$ (documento).pronto (function ()
$ (".botão").clique (function ()
$ ("div").CSS ("Background-Color", "Rosybrown");
);
);

Usando o método css (), estamos alterando a cor de fundo do elemento apenas no clique do botão.

Saída

A cor de fundo da div foi definida.

Exemplo 2

Suponha que você só queira extrair uma propriedade de estilo de um elemento html. Use o seguinte código.

Html

Algum parágrafo.

Retornar o tamanho da fonte de P

No código acima,

, e elementos foram criados, além disso, o

O elemento recebeu um tamanho de fonte de 25px.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
alerta ("Tamanho da fonte =" + $ ("p").CSS ("Size da fonte"));
);
);

Estamos usando o método CSS () para apenas buscar o tamanho da fonte do parágrafo. Depois de clicar no botão, uma mensagem de alerta aparecerá exibindo o tamanho da fonte do parágrafo.

Saída

Antes de clicar no botão.

Depois de clicar no botão.

O tamanho da fonte do parágrafo foi extraído.

Método addclass ()

Como o nome sugere, o método jQuery addclass () é usado para adicionar nomes de classe única ou múltipla a um elemento html.

Sintaxe

$ (seletor).addclass (className, funcname (index, currentClass))

Observação: O nome da classe é um parâmetro necessário que indica o nome da classe a ser adicionado e o funcname é um parâmetro opcional que especifica uma função para buscar um nome de classe a ser adicionado.

Exemplo

Suponha que você definiu um elemento semelhante mais de uma vez em uma página da web e deseja adicionar uma classe a apenas um desses elementos. Use o seguinte código.

Html

Primeiro parágrafo.

Último parágrafo.

Adicione um nome de classe ao último parágrafo

No código acima, criamos dois

tags e um elemento.

CSS

.observação
tamanho de fonte: 160%;
cor azul;

Aqui definimos algum estilo para uma "nota" de classe.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("P: Last").addclass ("nota");
);
);

No código acima, uma classe é adicionada pelo nome "Nota" ao último

elemento. Portanto, com o clique do botão, o estilo definido para a classe de notas será aplicado ao último parágrafo.

Saída

A "nota" da classe foi adicionada com sucesso ao último parágrafo.

método hasclass ()

Com o objetivo de avaliar se um elemento tem uma classe ou não, o método hasclass () é usado. Este método exibe verdadeiro se detectar qualquer classe ou de outra forma falsa.

Sintaxe

$ (seletor).Hasclass (ClassName)

Observação: O nome da classe é um parâmetro necessário usado para especificar um nome de classe a ser pesquisado.

Exemplo

Suponha que você queira verifique se há alguma classe aplicada a um certo conjunto de elementos semelhantes. é assim que se faz.

Html

Um parágrafo.

Outro parágrafo.

Qualquer elemento P tem classe "principal"?

Neste código HTML, criamos dois

elementos e um elemento. Além disso, o primeiro

O elemento foi atribuído a classe "principal".

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
Alerta ($ ("P").hasclass ("main"));
);
);

No código acima, uma mensagem de alerta foi projetada que retornará verdadeira quando o método Hasclass () detectar uma classe com o nome de "Main".

Saída

O método hasclass () está funcionando corretamente.

Método removeClass ()

Com o objetivo de remover um ou múltiplo nomes de classe de elementos html, o método removeclass () é usado.

Sintaxe

$ (seletor).RemoveClass (ClassName, FuncName (Index, CurrentClass))

Observação: O nome da classe parâmetro especifica o nome da classe a ser removido e o funcname O parâmetro especifica uma função que busca nomes de classe única ou múltipla a serem removidos. Ambos são parâmetros opcionais.

Exemplo

Suponha que você queira remover uma classe de um certo elemento HTML. Use o código abaixo.

Html

Cabeçallho 1

Titular 2

Título 3

Remova a classe "Head" do elemento H1.

Criamos quatro elementos HTML que são

,

,

, e . Além disso, aplicamos uma "cabeça" de classe ao

elemento.

CSS

.cabeça
Opacidade: 0.4;

A cabeça da classe recebeu algum estilo através de CSS.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("H1").removeclass ("cabeça");
);
);

No código acima, removeclass () foi aplicado para remover a classe "cabeça" da

elemento.

Saída

A classe "Head" foi removida do

elemento.

Método toggleClass ()

Este método alterna entre adicionar ou remover nomes de classe única ou múltipla de elementos HTML. Funciona de uma maneira que adiciona nome (s) de classe (s) aos elementos onde está faltando e remove os nomes da classe (s) daqueles elementos onde já foi definido.

Sintaxe

$ (seletor).TogGleClass (ClassName, FuncName (Index, CurrentClass), Toggle)

Na sintaxe acima:

• O nome da classe é um parâmetro necessário usado para especificar um nome de classe a ser adicionado ou removido de um elemento.
• O funcname Parâmetro Especifique uma função que busque um nome de classe a ser adicionado ou removido.
• Por outro lado, o alternar O parâmetro é a boleano valor que informa se o nome da classe A deve ser adicionado (verdadeiro) ou removido (false).

Ambos funame e alternar são parâmetros opcionais.

Exemplo

Suponha que você queira alternar um nome de classe entre vários elementos html. Siga o código abaixo.

Html

Cabeçallho 1

Titular 2

Título 3

Alternar

Quatro elementos HTML estão sendo criados que são

,

,

, e .

CSS

.cabeça
cor azul;
Opacidade: 0.3;

Usando CSS, uma aula com o nome "Head" recebeu algum estilo.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("H1, H2, H3").TogGleClass ("Head");
);
);

No código acima, a classe “Head” é alterada entre

,

, e

elementos.

Saída

Você deve clicar no botão várias vezes para ver o efeito de alternância.

A classe de alternância está funcionando corretamente.

Conclusão

O CSS pode ser manipulado através do uso de vários métodos jQuery que são; O método css () aplica ou busca uma ou mais propriedades de estilo de um elemento, o método addclass () adiciona nomes de classe aos elementos, o hasclass () detecta um elemento tem uma classe ou não, o removeclass () remove nomes de classe de de classe elementos e toggleClass () alternam entre adicionar ou remover nomes de classe de elementos. Esses métodos são explicados em detalhes com a ajuda de exemplos relevantes.