Funcionalidades do jQuery com a API nativa do JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 03 Min 05 Seg Tempo restante da oferta: 14 03 05 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Funcionalidades do jQuery com a API nativa do JavaScript [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Funcionalidades do jQuery com a API nativa do JavaScript Nesse post veremos algumas das funcionalidades do jQuery que hoje podem ser aplicadas diretamente com a API nativa do JavaScript. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/09/funcionalidades-do-jquery-com-a-api-nativa-do-javascript.png) Olá, Web Developers! Em outro post falamos sobre [quando usar e quando não usar o jQuery](https://www.treinaweb.com.br/blog/ainda-vale-a-pena-utilizar-o-jquery/). Agora nós vamos ver sobre as principais funcionalidades do jQuery que podemos executar apenas com JavaScript nativo. Lembre-se que a maioria dessas funcionalidades estão presentes apenas em navegadores modernos. [ ![JavaScript - Programação Assíncrona](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Programação Assíncrona Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-programacao-assincrona) ## Busca de elementos A principal funcionalidade do jQuery é a busca de elementos. Quando no JavaScript tínhamos funções com nomes compridos e diferentes para cada tipo de seleção (nome do elemento, ID, nome da classe, etc), o jQuery facilitava nossa vida oferecendo uma busca por seletores escritos com a sintaxe do CSS. Hoje em dia isso é possível com a função `querySelectorAll()`. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) Também podemos usar essa função para fazer uma busca dentro do elemento selecionado. ```js // jQuery var el = $('div #abc .def'); $(el).find('button.close'); // JS var el = document.querySelectorAll('div #abc .def'); el.querySelectorAll('button.close'); ``` ## Requisições Ajax Uma das funcionalidades mais usadas é a função `$.ajax()`. Ela é bem mais simples e direta do que trabalhar com o velho objeto `XMLHttpRequest`. Hoje em dia nós possuímos a função [fetch()](https://www.treinaweb.com.br/blog/requisicoes-ajax-no-javascript-com-a-fetch-api/), que é tão simples quanto a função `$.ajax()` e nos permite trabalhar com Promises: ```js // jQuery $.ajax({ 'url': '/my/url', 'type': 'POST', 'data': JSON.stringify(data) }); // JS fetch('/my/url', { 'method': 'POST', 'body': JSON.stringify(data) }) ``` ## Classes CSS Também é comum trabalharmos com a inserção e remoção de classes dos elementos. Poucos usam as funções do JavaScript (muitos nem as conhecem) porque normalmente manipulam com jQuery ou usam algum framework que acaba manipulando os elementos automaticamente. ```js // jQuery $(el).addClass('my-class'); $(el).removeClass('my-class'); $(el).toggleClass('my-class'); $(el).hasClass('my-class'); // JS el.classList.add('my-class'); el.classList.remove('my-class'); el.classList.toggle('my-class'); $(el).hasClass('my-class'); ``` ## Extend Esta função permite que os valores de um ou mais objetos sejam atribuidos em outro objeto. ```js // jQuery $.extend({}, objA, objB); // JS Object.assign({}, objA, objB); ``` Uma diferença aqui é que o jQuery permite que os campos de nível mais profundo do objeto sejam misturados, enquanto a função nativa do JavaScript só permite uma união nos níveis mais rasos do objeto. ## Eventos Esse é bem conhecido: adicionar e remover listeners em elementos. O que não atrai muito (como a maioria das funcionalidades) é a diferença do tamanho do nome das funções. ```js // jQuery $(el).on(eventName, eventHandler); $(el).off(eventName, eventHandler); // JS el.addEventListener(eventName, eventHandler); el.removeEventListener(eventName, eventHandler); ``` ## Finalizando Uma lista bem completa de funcionalidades do jQuery feitas com JavaScript puro pode ser encontrada em: http://youmightnotneedjquery.com/ Porém, como dito [anteriormente](https://www.treinaweb.com.br/blog/ainda-vale-a-pena-utilizar-o-jquery/), deve-se analisar bem as necessidades do projeto para poder dizer se devemos incluir ou não o jQuery. [ ![JQuery Completo](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/jquery.svg) Curso JQuery Completo Conhecer o curso ](https://www.treinaweb.com.br/curso/jquery) Compartilhe as suas ideias com a gente aí nos comentários? o/ - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #jQuery ](https://www.treinaweb.com.br/blog/tag/jquery) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/ainda-vale-a-pena-utilizar-o-jquery-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ Ainda vale a pena utilizar o jQuery? ](https://www.treinaweb.com.br/blog/ainda-vale-a-pena-utilizar-o-jquery) O jQuery é a biblioteca JavaScript mais famosa. Discutiremos nesse artigo se ainda vale a pena utilizá-lo e os cenários possíveis. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/ANGULAR-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é o Angular e para que serve? ](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve) Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar o Angular, um dos mais populares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/01/WEB-JARS-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ WebJars: Simplifique o gerenciamento de dependências front-end ](https://www.treinaweb.com.br/blog/webjars-simplifique-o-gerenciamento-de-dependencias-front-end) Otimize seu desenvolvimento Java! Descubra como o WebJars simplifica o gerenciamento de dependências front-end. Integre com facilidade e eficiência. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/qual-a-diferenca-entre-framework-e-biblioteca-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ Qual a diferença entre Framework e Biblioteca? ](https://www.treinaweb.com.br/blog/qual-a-diferenca-entre-framework-e-biblioteca) A confusão entre frameworks e bibliotecas é muito comum. Entenda qual a diferença entre eles e qual o melhor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/06104639/TW-ENTREVISTAS-FABIO-400x280.png) [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web) 8 anos atrás ## [ TW Entrevista 08: Fabio Costa ](https://www.treinaweb.com.br/blog/tw-entrevista-08-fabio-costa) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Fabio Costa, desenvolvedor que já trabalhou na Globo.com, no Facebook e agora está na GoDaddy. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/22110927/FRAMEWORKS-CSS-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Os principais frameworks CSS ](https://www.treinaweb.com.br/blog/os-principais-frameworks-css) Neste artigo veremos alguns dos principais frameworks CSS do mercado e algumas de suas características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/opera--es-crud-400x280.jpg) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 10 anos atrás ## [ Operações CRUD no ASP.NET MVC 5 com o ADO.NET ](https://www.treinaweb.com.br/blog/operacoes-crud-no-asp-net-mvc-5-com-o-ado-net) Exemplo de como criar uma aplicação ASP.NET MVC utilizando ADO.NET como framework de acesso aos dados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/google-devtools-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Google DevTools e suas funcionalidades ](https://www.treinaweb.com.br/blog/google-devtools-e-suas-funcionalidades) Neste artigo, veremos algumas maneiras pelas quais o Google DevTools pode ser usado para melhorar o desenvolvimento dos nossos projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/CSS-JS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ O que é PostCSS e suas funcionalidades ](https://www.treinaweb.com.br/blog/o-que-e-postcss-e-suas-funcionalidades) Neste artigo veremos uma ferramenta que vem auxiliando muito os desenvolvedores durante seus projetos, sendo ela, PostCSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/14165347/GITHUB-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ 5 utilidades do GitHub ](https://www.treinaweb.com.br/blog/5-utilidades-do-github) Veja neste artigo 5 funcionalidades úteis do GitHub. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 03min 05s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58