javascript without jquery

JavaScript sem jQuery

Dicas e exemplos práticos, do post CatsWhoCode.

Índice

1. Ouvindo o documento pronto
2. Adicionando ouvintes de eventos
3. Selecionando Elementos
4. Usando Ajax
5. Adicionando e Removendo Classes
6. Desaparecer
7. Ocultando e mostrando elementos
8. Manipulação de DOM

Ouvindo o documento pronto

Uma página não pode ser manipulada com segurança até que o documento esteja “pronto”. Por esse motivo, nós, desenvolvedores, adquirimos o hábito de agrupar todo o nosso código JS dentro da função jQuery $(document).ready() :

 $ ( document ) . ready ( function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

O mesmo resultado pode ser alcançado facilmente usando JavaScript puro:

 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

Adicionando ouvintes de eventos

Event Listeners são uma parte muito importante do desenvolvimento de JavaScript. jQuery tem uma maneira muito fácil de lidar com eles:

 $ ( someElement ) . on ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Você não precisa do jQuery para criar ouvintes de eventos em JavaScript. Veja como fazer isso:

 someElement . addEventListener ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Selecionando Elementos

jQuery torna muito fácil selecionar elementos usando um ID, um nome de classe, nome de tag, etc:

 // By ID
$ ( '#myElement' ) ;

// By Class name
$ ( '.myElement' ) ;

// By tag name
$ ( 'div' ) ;

// Children
$ ( '#myParent' ) . children ( ) ;

// Complex selecting
$ ( 'article#first p.summary' ) ;

Pure JavaScript apresenta várias maneiras de selecionar elementos. Todos os métodos abaixo funcionam em todos os navegadores modernos, bem como no IE8 +.

 // By ID
document . querySelector ( '#myElement' ) ;

// By Class name
document . querySelectorAll ( '.myElement' ) ;

// By tag name
document . querySelectorAll ( 'div' ) ;

// Children
document . querySelectorAll ( 'myParent' ) . childNodes ;

// Complex selecting
document . querySelectorAll ( 'article#first p.summary' ) ;

Usando Ajax

Como muitos de vocês sabem, Ajax é um conjunto de tecnologias que permite criar aplicações web assíncronas. jQuery possui um conjunto de métodos úteis para Ajax, incluindo get() conforme mostrado abaixo:

 $ . get ( 'ajax/test.html' , function ( data ) {
  $ ( '.result' ) . html ( data ) ;
  alert ( 'Load was performed.' ) ;
} ) ;

Embora o jQuery torne o desenvolvimento do Ajax mais fácil e rápido, é certo que você não precisa da estrutura para usar o Ajax:

 var request = new XMLHttpRequest ( ) ;
request . open ( 'GET' , 'ajax/test.html' , true ) ;

request . onload = function ( e ) {
  if ( request . readyState === 4 ) {

    // Check if the get was successful.

    if ( request . status === 200 ) {
      console . log ( request . responseText ) ;
    } else {
      console . error ( request . statusText ) ;
    }
  }
} ;

Adicionando e Removendo Classes

Se você precisar adicionar ou remover a classe de um elemento, o jQuery possui dois métodos dedicados para fazer isso:

 // Adding a class
$ ( '#foo' ) . addClass ( 'bold' ) ;

// Removing a class
$ ( '#foo' ) . removeClass ( 'bold' ) ;

Sem jQuery, adicionar uma classe a um elemento é muito fácil. Para remover uma classe, você precisará usar o método replace() :

 // Adding a class
document . getElementById ( 'foo' ) . className += 'bold' ;

// Removing a class
document . getElementById ( 'foo' ) . className = document . getElementById ( 'foo' ) . className . replace ( / ^bold$ / , '' ) ;

Desaparecer

Aqui está um exemplo prático de porque o jQuery é tão popular. Desaparecer um elemento requer apenas uma única linha de código:

 $ ( el ) . fadeIn ( ) ;

Exatamente o mesmo efeito pode ser alcançado em JavaScript puro, mas o código é muito mais longo e complicado.

 function fadeIn ( el ) {
  el . style . opacity = 0 ;

  var last = + new Date ( ) ;
  var tick = function ( ) {
    el . style . opacity = + el . style . opacity + ( new Date ( ) - last ) / 400 ;
    last = + new Date ( ) ;

    if ( + el . style . opacity < 1 ) {
      ( window . requestAnimationFrame && requestAnimationFrame ( tick ) ) || setTimeout ( tick , 16 ) ;
    }
  } ;

  tick ( ) ;
}

fadeIn ( el ) ;

Ocultando e mostrando elementos

Ocultar e mostrar elementos é uma tarefa muito comum. jQuery oferece os métodos hide() e show() para modificar a exibição de um elemento.

 // Hiding element
$ ( el ) . hide ( ) ;

// Showing element
$ ( el ) . show ( ) ;

Em JavaScript puro, mostrar ou ocultar elementos não é mais complicado:

 // Hiding element
el . style . display = 'none' ;

// Showing element
el . style . display = 'block' ;

Manipulação de DOM

Manipular o DOM com jQuery é muito fácil. Digamos que você queira anexar um elemento <p> a #container :

 $ ( '#container' ) . append ( '<p>more content</p>' ) ;

Fazer isso em JavaScript puro também não é grande coisa:

 document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>' ;