¿Cómo convertir jQuery a JavaScript?

JavaScript es un lenguaje de programación orientado a objetos diseñado para hacer que el desarrollo web sea más fácil y atractivo. En la mayoría de los casos, JavaScript se utiliza para crear elementos interactivos y receptivos para páginas web, lo que mejora la experiencia del usuario.

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript.

Selección: En jQuery, para seleccionar cualquier elemento, simplemente usamos el signo $() , pero en JavaScript, para seleccionar cualquier elemento, podemos usar querySelector() o querySelectorAll() .

• Programa:

  // jQuery to select all instances // of class "select" $(".select");    // JavaScript to select only the // first instance of class "select" document.querySelector(".select");    // To select all the instances // of class "select"   document.querySelectorAll(".select");

Algunos otros ejemplos de selectores:

Para seleccionar todo el html:

• En jQuery:

  $("html")

• En JavaScript:

  document.querySelector(selector)

Para seleccionar todo el cuerpo html:

• En jQuery:

  $("body")

• En JavaScript:

  document.body

Manipulación de clases:

• Programa:

  // To add a class "class-name" to a <p> tag // jQuery: $p.addClass(class-name)     // JavaScript: p.classList.add(class-name)

A continuación algunos otros ejemplos de manipulación:

Para agregar una clase a un elemento html:

• En jQuery:

  $element.addClass(class-name)

• En JavaScript:

  element.classList.add(class-name)

Para quitar una clase a un elemento html:

• En jQuery:

  $element.removeClass(class-name)

• En JavaScript:

  element.classList.remove(class-name)

Para alternar una clase a un elemento html:

• En jQuery:

  $element.toggleClass(class-name)

• En JavaScript:

  element.classList.toggle(class-name)

Para verificar si un elemento html contiene una clase:

• En jQuery:

  $element.hasClass(class-name)

• En JavaScript:

  element.classList.has(class-name)

Oyentes de eventos

• Programa:

  // To add an event on button click     // jQuery: /* handle click event */   $(".button").click( function(event) {  });    // JavaScript: /* handle click event */   document.querySelector(".button")     .addEventListener("click", (event) => { });

Estilo CSS:

• Programa:

  // To give a margin of 10px to all the div // jQuery: $div.css({ margin: "10px" })     // JavaScript: div.style.margin= "10px"

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .