如何将jQuery转换为JavaScript

JavaScript是一种面向对象的编程语言，旨在使网页开发更容易、更有吸引力。在大多数情况下，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：

• In jQuery:

$("html")

• In JavaScript:

document.querySelector(selector)

要选择整个HTML主体：

• In jQuery:

$("body")

• In JavaScript:

document.body

阶级操作:

• Program:

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

下面是其他一些操纵的例子。

为html元素添加一个类：

• In jQuery:

$element.addClass(class-name)

• In JavaScript:

element.classList.add(class-name)

要删除一个html元素的类：

• In jQuery:

$element.removeClass(class-name)

• In JavaScript:

element.classList.remove(class-name)

为一个html元素切换一个类：

• In jQuery:

$element.toggleClass(class-name)

• In JavaScript:

element.classList.toggle(class-name)

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

• In jQuery:

$element.hasClass(class-name)

• In JavaScript:

element.classList.has(class-name)

事件监听器

• Program:

// 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样式设计:

• Program:

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