如何将jQuery转换为JavaScript？

JavaScript是一种面向对象的编程语言, 旨在使Web开发更轻松, 更有吸引力。在大多数情况下, JavaScript用于创建网页的响应式交互式元素, 从而增强了用户体验。

jQuery的是一个开放源代码的JavaScript库, 它简化了HTML / CSS文档(或更确切地说是文档对象模型(DOM))与JavaScript之间的交互。

选择：在jQuery中, 要选择任何元素, 我们只需使用$()符号, 但是在JavaScript中, 要选择任何元素, 我们可以使用querySelector()orquerySelectorAll().

// 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");

选择器的其他一些示例：

要选择整个html：

• 在jQuery中：

  $("html")

• 在JavaScript中：

  document.querySelector(selector)

要选择整个HTML正文, 请执行以下操作：

• 在jQuery中：

  $("body")

• 在JavaScript中：

  document.body

类的操作：

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

下面是其他一些操纵示例：

要将类添加到html元素：

• 在jQuery中：

  $element.addClass(class-name)

• 在JavaScript中：

  element.classList.add(class-name)

要将类删除为html元素, 请执行以下操作：

• 在jQuery中：

  $element.removeClass(class-name)

• 在JavaScript中：

  element.classList.remove(class-name)

要将类切换到html元素, 请执行以下操作：

• 在jQuery中：

  $element.toggleClass(class-name)

• 在JavaScript中：

  element.classList.toggle(class-name)

要检查html元素是否包含类：

• 在jQuery中：

  $element.hasClass(class-name)

• 在JavaScript中：

  element.classList.has(class-name)

事件监听器

// 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) => {
  });

CSS样式：

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

---