如何将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)

【如何将jQuery转换为JavaScript()】要选择整个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"

    推荐阅读