javascript without jquery

JavaScript sin jQuery

Consejos y ejemplos prácticos, del post de CatsWhoCode.

Tabla de contenido

1. Escuchando el documento listo
2. Agregar oyentes de eventos
3. Seleccionar elementos
4. Usando Ajax
5. Agregar y eliminar clases
6. Encadenar
7. Ocultar y mostrar elementos
8. Manipulación DOM

Escuchando el documento listo

Una página no se puede manipular de forma segura hasta que el documento esté "listo". Por esa razón, los desarrolladores hemos tomado la costumbre de envolver todo nuestro código JS dentro de la función jQuery $(document).ready() :

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

El mismo resultado se puede lograr fácilmente usando JavaScript puro:

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

Agregar oyentes de eventos

Los oyentes de eventos son una parte muy importante del desarrollo de JavaScript. jQuery tiene una manera muy sencilla de manejarlos:

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

No necesitas jQuery para crear detectores de eventos en JavaScript. He aquí cómo hacerlo:

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

Seleccionar elementos

jQuery hace que sea muy fácil seleccionar elementos usando una ID, un nombre de clase, un nombre de etiqueta, etc.:

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

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

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

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

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

JavaScript puro presenta varias formas de seleccionar elementos. Todos los métodos siguientes funcionan en todos los navegadores modernos, así como en 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 la mayoría de ustedes saben, Ajax es un conjunto de tecnologías que le permiten crear aplicaciones web asincrónicas. jQuery tiene un conjunto de métodos útiles para Ajax, incluido get() como se muestra a continuación:

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

Aunque jQuery hace que el desarrollo de Ajax sea más fácil y rápido, es seguro que no necesitas el marco para usar 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 ) ;
    }
  }
} ;

Agregar y eliminar clases

Si necesita agregar o eliminar la clase de un elemento, jQuery tiene dos métodos dedicados para hacerlo:

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

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

Sin jQuery, agregar una clase a un elemento es bastante fácil. Para eliminar una clase, necesitarás usar el método replace() :

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

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

Encadenar

A continuación se muestra un ejemplo práctico de por qué jQuery es tan popular. Desvanecer un elemento solo requiere una sola línea de código:

 $ ( el ) . fadeIn ( ) ;

Se puede lograr exactamente el mismo efecto en JavaScript puro, pero el código es mucho más largo y 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 ) ;

Ocultar y mostrar elementos

Ocultar y mostrar elementos es una tarea muy común. jQuery ofrece los métodos hide() y show() para modificar la visualización de un elemento.

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

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

En JavaScript puro, mostrar u ocultar elementos no es más complicado:

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

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

Manipulación DOM

Manipular el DOM con jQuery es muy fácil. Digamos que desea agregar un elemento <p> al #container :

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

Hacerlo en JavaScript puro tampoco es gran cosa:

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