Existe uma maneira fácil de converter o código jQuery em javascript?

A conversão do código jQuery em javascript pode ser difícil, mas não impossível. Existem várias ferramentas on -line para conversão, mas elas não lhe darão código convertido adequado, preciso e otimizado. Você pode converter facilmente o código jQuery em javascript com um pouco de esforço se estiver ciente dos conceitos fundamentais de ambos.

Embora existam muitas semelhanças entre jQuery e javascript, várias diferenças também existem em sua sintaxe e funcionalidade. Para isso, primeiro, entenda o que o código jQuery está tentando fazer. Em seguida, utilize os métodos ou atributos alternativos do Javascript de baunilha.

Este blog discutirá a conversão do código jQuery para JavaScript.

Como converter o código jQuery em javascript?

Para converter o código jQuery em JavaScript, é essencial entender o que o código está fazendo e quais métodos jQuery estão sendo usados. Em seguida, use os métodos alternativos em JavaScript, como o “$ ()”Usado no jQuery para selecionar elementos enquanto estiver em JavaScript, para selecionar elementos“documento.QuerySelector ()" ou "QuerySelectorAll ()”Os métodos são usados.

Vamos entender o processo de conversão com a ajuda de um exemplo.

Exemplo
Aqui, temos um código jQuery que altera a cor do texto e mostra um texto explicativo em um botão Clique. Para isso, o documento HTML contém dois botões, texto e um vazio

Tag onde o novo texto será mostrado no botão Clique:

Tutorial JavaScript

Clique aqui
Clique aqui

Enquanto trabalha com o JQuery, é obrigatório adicionar biblioteca jQuery na tag do documento HTML:

Na tag, o código fornecido é usado:

$ (documento).pronto (function ()
$ ('#mydiv').encontre ('botão: primeiro').clique (function ()
$ ('.texto').css ('cor', 'azul');
$ ('#mensagem').texto ('Eu sou o primeiro botão que definirá a cor do texto como azul');
);
$ ('#botão').próximo().clique (function ()
$ ('.texto').css ('cor', 'verde');
$ ('#mensagem').texto ('Eu sou o segundo botão que definirá a cor do texto como verde');
);
);

No código acima

• Primeiro, use o “preparar()”Função que será executada quando o DOM estiver totalmente carregado. É freqüentemente usado para garantir que o DOM esteja totalmente carregado antes da execução de qualquer código JavaScript que interaja ou manipula os elementos DOM.
• Em seguida, acesse o elemento div usando seu ID atribuído “$ ('#mydiv')”E chame o“encontrar()”Método para encontrar o primeiro botão, anexe um evento de clique em ele usando o“clique()”Método onde a cor do texto será alterada e uma mensagem de texto será mostrada abaixo do botão no botão Clique.
• Então, por encontrar o outro botão na div, usamos o jQuery “próximo()”Método e aplicou a mesma funcionalidade.

Como você pode ver que a saída mostra uma mensagem de texto no botão Clique que explicará o trabalho e, ao mesmo tempo, a cor do texto existente é alterada:

Agora, aqui, converteremos o código jQuery acima em JavaScript sem alterar a saída. Você pode usar abordagens diferentes para conversão, mas usaremos os métodos JavaScript como uma alternativa aos métodos jQuery.

Primeiro, acessaremos o botão usando o “documento.QuerySelector ()”Método:

var Button = documento.QuerySelector ('Button');

Então, anexe um “cliqueEvento com a ajuda do “addEventListener ()”Método. Para mudar a cor do texto, em JavaScript, use o “estilo”Atributo enquanto estiver no jQuery, usamos o“CSS ()”Método. Da mesma forma, para texto, use o “Innerhtml”Propriedade em JavaScript enquanto“texto()”O método é utilizado no jQuery:

botão.addEventListener ('click', function ()
documento.QuerySelector ('.texto').estilo.color = "azul";
documento.QuerySelector ('#mensagem').INNERHTML = 'Eu sou o primeiro botão que definirá a cor do texto como azul';
);

Para o segundo botão, usaremos o “NextElementsibling”Atributo em JavaScript, enquanto em jQuery usamos o“próximo()”Método:

botão.NextElementsibling.addEventListener ('click', function ()
documento.QuerySelector ('.texto').estilo.color = "verde";
documento.QuerySelector ('#mensagem').TextContent = 'Eu sou o segundo botão que definirá a cor do texto como verde';
);

Saída

Métodos ou atributos alternativos do jQuery em JavaScript

Na tabela fornecida, você pode ver os métodos e atributos alternativos do jQuery:

	jQuery	JavaScript
Executar uma função quando o DOM estiver pronto	$ (documento).pronto (function () // código… );	documento.addEventListenerm ("domcontentloaded", function () // código… );
Para selecionar todo o HTML	$ ("Html")	documento.QuerySelector (seletor)
Para selecionar todo o corpo HTML	$ ("Corpo")	documento.corpo
Adicione uma classe a um elemento HTML	$ element.addclass (nome de classe)	elemento.Lista de classe.Add (Class-Name)
Remova uma classe para um elemento HTML	$ element.removeclass (nome de classe)	elemento.Lista de classe.Remova (nome de classe)
Alternar uma classe para um elemento HTML	$ element.TogGleClass (Class-Name)	elemento.Lista de classe.alternar (nome de classe)
Verifique se um elemento HTML contém uma classe	$ element.Hasclass (nome de classe)	elemento.Lista de classe.tem (name de classe)
Clique em Evento	$ (“.botão").Clique (função (evento) );	documento.QuerySelector (“.botão") .addEventListener ("clique", (evento) => );
Adicione o estilo CSS	$ div.CSS (color: "Yellow")	div.estilo.cor = “amarelo”
Selecionando todos os elementos	$ ('… .')	documento.QuerySelectorAll ();
Selecione o primeiro elemento	.primeiro();	documento.QuerySelector ();
Encontre elementos	.encontrar();	documento.QuerySelector (); ou documento.QuerySelectorAll (); método
Selecionando elemento filho	.crianças();	Parentnode.crianças;
Selecionando elemento pai	.pai ();	Nó.parentnode;
Selecione irmãos	.irmãos();	Nó.parentnode.QuerySelectorAll (": não (#Elem)");
Selecione o próximo irmão	.próximo();	Não -documentTyPechildNode. NextElementsibling;
Selecione o irmão anterior	.prev ();	Não -documentTyPechildNode. anteriorlementsibling;
Encontre o elemento de correspondência mais próximo	.mais próximo ();	Elemento.mais próximo ();
Obtenha atributo	.attr ('attr-name');	Elemento.getAttribute ('attr-name');
Anexar um novo elemento infantil	.anexar ('html-string');	Nó.appendChild ();
Remova todos os nós filhos	.vazio();	Elemento.replacechildren ();
Obtenha ou defina conteúdo HTML	.html ();	Elemento.innerhtml;
Ocultar elemento	.esconder();	ElementCssinLinestyle.estilo.display = 'nenhum';
Mostrar elemento	.mostrar();	ElementCssinLinestyle.estilo.display = ”;
Adicionar ouvinte de eventos	.sobre();	EventTarget.addEventListener ('Evento', FunctionName);
Remova o ouvinte do evento	.desligado();	EventTarget.removerventListener ('Evento', FunctionName);
Percorrer um objeto, matriz ou coleção	.cada();	Nodelist.protótipo.para cada();

É tudo sobre a conversão do código jQuery em javascript.

Conclusão

Não há maneira fácil para a conversão do código jQuery em JavaScript. Você pode simplesmente saber as diferenças entre ambos e usar os métodos internos de baunilha JavaScript que são iguais aos métodos de jQuery. Este blog discutiu a conversão do código jQuery para JavaScript.