数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何从 jQuery 迁移到原生 JavaScript？
JavaScript 是一种面向对象的编程语言，旨在使网站开发更具吸引力和简便性。大多数情况下，JavaScript 用于构建网站的动态、响应式元素，从而改善用户体验。
JavaScript 是一种最广泛使用的轻量级、编译型和解释型编程语言。它也被称为网页脚本语言。它可以应用于客户端和服务器端编程。
称为 jQuery 的开源 JavaScript 库简化了 HTML/CSS 文档（或更准确地说，文档对象模型 (DOM)）与 JavaScript 之间的交互。通过定义关键字，它使导航和操作 HTML 文档、处理浏览器事件、DOM 动画变得更加简单。
jQuery 的跨浏览器移植性使编码变得简单，开发人员可以自由地进行其他浏览器所需的 JavaScript 特定调整，不受任何限制。
jQuery 具有许多优点，其中之一是它使开发人员可以轻松创建 Ajax 模板。让我用一句话总结 Ajax 能为您做什么：您可以使用它来快速执行某些实时事件以重新加载或刷新页面的一部分，而无需对整个事件执行此操作。
我们为什么要选择放弃 jQuery？
首先，我们集成了 jQuery 以方便开发人员。由于 JavaScript 生态系统在过去几年中发展迅速，我们发现如今实际上可以在 JavaScript 中更方便地完成所有事情。
在我们的项目中，我们不再需要加载 87 千字节的代码文件。
原生 JS 允许编写诸如选择器、事件处理程序以及设置器和获取器之类的基本语句。因此，我们可以直接调用这些核心方法，而不是让我的库在内部执行。
许多开发人员最初选择使用 jQuery 的主要原因之一是，现在不太可能遇到跨浏览器兼容性问题。因此，这种优势不再有效。
由于 JavaScript 和 CSS3 在基于 Web 的应用程序内部运行在不同的线程上，因此 CSS3 动画的执行效果比 jQuery 效果好得多。
选择 - 在 JavaScript 中，我们可以使用 querySelector() 或 querySelectorAll 选择任何元素，而在 jQuery 中，我们可以简单地使用 $() 符号来选择。
示例
// To select every instance of // the class "select" in jQuery $(".select"); // Just the first instance of the // class "select" will be chosen in JavaScript. document.querySelector(".select"); // To choose every instance of // the class, use "select" document.querySelectorAll(".select");
以下是几个其他选择器示例 -
以下是选择所有 HTML 的选择器
在 JavaScript 中 -
document.querySelector(selector)
在 jQuery 中 -
$("html")
以下是选择所有 HTML body 的选择器
在 JavaScript 中 -
document.body
在 jQuery 中 -
$("body")
类的操作
示例
// To give a jQuerytag a class, // use "class-name": $p.addClass(class-name) // in 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 事件监听器
示例
// Click a button to add an event to it.
// jQuery:
/* the click event handling */
$(".button").click( function(event) {
});
// JavaScript:
/* the click event handling */
document.querySelector(".button")
.addEventListener("click", (event) => {
});
以下是 jQuery 和 JavaScript CSS 样式
示例
// giving all div elements a 10 px padding
// jQuery:
$div.css({ padding: "15px" })
// JavaScript:
div.style.padding= "15px"
简而言之
在这里，我们看到了我们在编码中经常使用的一些 jQuery 函数。从 jQuery 切换并不太困难，因为 jQuery 团队足够好，可以在其文档中列出其 jQuery 方法的 JavaScript 等效项。我们为每个语句使用的替代 JavaScript 代码也包含在我们编写的文本中。
尽管 jQuery 语法似乎简洁明了，但使用 JavaScript 时，最小化程序可确保不会向客户端计算机传递任何额外的字节。
129 次查看
