Muchos usamos JavaScript para un proyectos 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 JavaScript 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 :

Usando jQuery

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

Usando JavaScript (Vanilla JS)

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 
}

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 como Array que coincida con el selector CSS.

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

nota