Muchos usamos JavaScript para un proyecto Web, pero la librería jQuery nos simplifica el proceso de hacer animaciones, efectos, slider animados, y mas. Pero en jQuery viene una cantidad de plugins que agregan funcionalidad para este efecto, y con su ejemplo para tan fácil implementarlo y tenerlo listo. Pero muchos no saben fundamentos básicos de JavaScrpipt y ni que decir ni programar, solo copian y pegan el código sin saber y lo cual quiero decir que para un verdadero programador esta mal. Al menos que sepas y entiendas el código que implementes, así cualquier cambio no tendrías problemas en hacerlo.

Veamos la diferencia que podríamos hacerlo lo mismo en jQuery con JavaScript puro :

Ejecutar el código después de cargar el DOM en jQuery :

$(document).ready(function(){
  // ejecuta codigos
 });

o la forma mas simplifica :

$(function() {
  // ejecuta el codigo 
});

Pero en JavaScript Puro lo hacemos así :

window.onload = function() {
  // ejecuta el codigo
}

o de otra forma :

document.addEventListener('load, function(){ 
  // ejecuta el codigo
});
// para no esperar que cargen los Assets (css, imagenes, etc
document.addEventListener('DOMContentLoaded', function(){
 // ejecuto el codigo
}

Ahora veamos los selectores de Javascript :

  • document.getElementById(“id”) : devuelve la referencia del elemento mediante su identificador (id).
  • document.getElementsByTagName(“eleHTML”) : devuelve un Array de los elementos HTML encontrados.
  • document.getElementsByClassName(“nomClase”) : devuelve un Array de los elementos que tengan esa clase.
  • document.querySelector(SelectorCss) : devuelve el elemento que coincidida con el selector de CSS.
  • document.querySelectorAll(SelectorCss) : devuelve todos los elementos que coincida con el selector CSS.

Es Muy simple de utilizar con mucha practica le sera muy fácil entenderlo.