Olá, Web Developers!
Em outro post falamos sobre quando usar e quando não usar 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.
Curso JavaScript Básico
Conhecer o cursoBusca 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()
.
Também podemos usar essa função para fazer uma busca dentro do elemento selecionado.
// 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(), que é tão simples quanto a função $.ajax()
e nos permite trabalhar com Promises:
// 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.
// 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.
// 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.
// 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, deve-se analisar bem as necessidades do projeto para poder dizer se devemos incluir ou não o jQuery.
Curso JQuery Completo
Conhecer o cursoCompartilhe as suas ideias com a gente aí nos comentários? o/