如何从 jQuery 转到核心 JavaScript?
一种名为 JavaScript 的面向对象编程语言的创建是为了使网站开发更具吸引力和更简单。大多数时候，JavaScript 用于为网站构建动态、响应式元素，从而改善客户体验。
最广泛使用的轻量级、编译和解释型编程语言是 JavaScript。它也被称为网页脚本语言。它可以应用于客户端和服务器端编程。
HTML/CSS 文档(更确切地说是文档对象模型 (DOM))与 JavaScript 之间的交互通过称为 jQuery 的开源 JavaScript 库变得更简单。通过定义关键字，它使导航和操作 HTML 文档、处理浏览器事件、DOM 动画变得简单。
jQuery 的跨浏览器可移植性使编码变得简单，开发人员可以自由地进行其他浏览器所需的 JavaScript 特定调整，而不受限制。
jQuery 有很多好处，其中之一就是它使开发人员可以轻松创建 Ajax 模板。让我用一句话总结一下 Ajax 可以为您完成的事情:您可以使用它快速执行某些实时事件以重新加载或刷新页面的某个部分，而无需对整个事件执行此操作。
我们选择离开 jQuery 的原因是什么?
好吧，首先，我们集成了 jQuery 是为了方便开发人员。由于 JavaScript 生态系统在过去几年中发展迅速，我们确实发现，如今使用 JavaScript 几乎可以更方便地完成所有事情。
在我们的项目中，我们不再需要加载 87 千字节的代码文件。
Vanilla JS 允许编写基本语句，如选择器、事件处理程序以及 setter 和 getter。因此，我们可以直接调用这些核心方法，而不是让我的库在内部执行。
许多开发人员选择使用 jQuery 的主要原因之一是，现在遇到跨浏览器兼容性问题的可能性较小。因此，这一优势不再有效。
由于 JavaScript 和 CSS3 在基于 Web 的应用程序内以不同的线程运行，因此 CSS3 动画的执行效果比 jQuery 效果好得多。
选择 − 在 JavaScript 中，我们可以使用 querySelector() 或 querySelectorAll 选择任何元素， 在 jQuery 中，我们只需使用 $() 符号即可。
示例
// 选择 jQuery 中类"select"的每个实例 $(".select"); // 在 JavaScript 中，只会选择 // 类"select"的第一个实例。 document.querySelector(".select"); // 要选择类的每个实例，请使用"select" document.querySelectorAll(".select");
以下是几个额外的选择器示例 −
以下是选择所有 HTML 的选择器
在 JavaScript 中 −
document.querySelector(selector)
在 jQuery 中 -
$("html")
以下是选择所有 HTML 主体的选择器
在 JavaScript 中 -
document.body
在 jQuery 中 -
$("body")
类的操作
示例
// 要为 jQuery标签赋予类， // 使用"class-name": $p.addClass(class-name) // 在 JavaScript 中: p.classList.add(class-name)
以下是其他几个操作示例以下
向 HTML 元素添加类的选择器如下。
在 JavaScript 中 -
element.classList.add(class-name)
在 jQuery 中 -
$element.addClass(class-name)
从 html 元素中删除类的选择器如下。
在 JavaScript 中 -
element.classList.remove(class-name)
在 jQuery 中 -
$element.removeClass(class-name)
将类切换到 html 元素的选择器如下如下。
在 JavaScript 中 -
element.classList.toggle(class-name)
在 jQuery 中 -
$element.toggleClass(class-name)
选择器检查 HTML 元素中是否存在类，如下所示
在 JavaScript 中 -
element.classList.has(class-name)
在 jQuery 中 -
$element.hasClass(class-name)
以下是 jQuery 和 JavaScript 事件监听器
示例
// 单击按钮即可向其添加事件。
// jQuery:
/* 单击事件处理 */
$(".button").click( function(event) {
});
// JavaScript:
/* 单击事件处理 */
document.querySelector(".button")
.addEventListener("click", (event) => {
});
以下是 jQuery 和 JavaScript CSS 样式
示例
// 为所有 div 元素提供 10 px 填充
// jQuery:
$div.css({ padding: "15px" })
// JavaScript:
div.style.padding= "15px"
简介
在这里我们看到了我们在编码中经常使用的几个 jQuery 函数。从 jQuery 切换并不太难，因为 jQuery 团队足够好，可以在他们的文档中列出与他们的 jQuery 方法等效的 JavaScript。我们为每个语句使用的替代 JavaScript 代码也包含在我们编写的文本中。
尽管 jQuery 语法看起来简洁明了，但压缩器可确保在使用 JavaScript 时不会向客户端计算机传送任何额外的字节。
