Como usar o $ sem jQuery?

Tiago Brito — Wed, 26 Jan 2022 19:47:10 +0000

Quando comecei a carreira de desenvolvedor, fui apresentado a um tal de jQuery. Isso foi um divisor de águas na minha vida. Naquela época (2009), uma biblioteca que facilitava tanto a vida do Dev e entregava tanta coisa bacana em JavaScript... parecia mágica, e isso me ajudou por muitos anos mas me deixou "dependente" de suas facilidades, afinal, eu só precisava usar o incrível e fabuloso símbolo de $ e voilà.

Este post é para auxiliar minhas práticas de estudo avançado de JavaScript. Caso tenha alguma sugestão ou outro meio, sinta-se a vontade para contribuir.

Um (bom) tempo depois, senti a necessidade de me libertar dessa dependência. Observei que 70% da minha necessidade de utilizar jQuery era por conta do maravilhoso recurso de seletor. Mas e se fosse pra criar um método seletor no estilo jQuery, como seria?

Eis que é muito mais simples do que pode parecer e eu vou mostrar.

Vamos precisar de um seletor versátil, pois precisaremos selecionar tags, classes e IDs. Portanto utilizaremos o document.querySelector.

let $ = document.querySelector

Criamos uma variável com o nome de $ e atribuímos a função seletora a ela. Mas teremos um probleminha aí:

Uncaught TypeError: 'querySelector' called on an object that does not implement interface Document.

Isso acontece porque o contexto de document atribuído à variável é diferente do contexto document do DOM que queremos.
Para resolver isso, é bem simples. Basta atribuir o contexto document junto com a declaração da função através do .bind.

let $ = document.querySelector.bind(document)

Pronto. Agora temos algo extremamente simples mas parecido com o seletor do jQuery.


let $ = document.querySelector.bind(document)

$('.my-class').innerHTML = 'Mussum Ipsum, cacilds vidis litro abertis'

$('#my_id').classList.add('custom-class')

E é isso. Simples, não?

Este é o primeiro post de uma série onde pretendo aplicar meus estudos de JavaScript para soluções que atualmente resolvo com jQuery mas que podem ser substituídas por JavaScript Vanilla.

DEV Community: Tiago Brito

Como usar o $ sem jQuery?