如何将 jQuery 转换为 JavaScript？

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

jQuery是一个开源 JavaScript 库，它简化了 HTML/CSS 文档，或者更准确地说是文档对象模型 (DOM) 和 JavaScript 之间的交互。

选择：在 jQuery 中，要选择任何元素，我们只需使用$()符号，但在 JavaScript 中，要选择任何元素，我们可以使用querySelector()或querySelectorAll() 。

程序：

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

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。