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.

há 6 anos 6 meses

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 curso

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().

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);