jquery和js怎么转换

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，而原生JavaScript是浏览器内置的一种编程语言，用于控制网页的行为和交互，在实际应用中，我们可能需要将jQuery代码转换为纯JavaScript代码，或者将纯JavaScript代码转换为jQuery代码，本文将详细介绍如何进行这两种转换。

将jQuery代码转换为纯JavaScript代码

1、选择器转换

jQuery使用CSS选择器来选取元素，而原生JavaScript使用document.querySelector或document.getElementById等方法，将以下jQuery代码：

$("#myButton").click(function() {
  // do something
});

转换为纯JavaScript代码：

document.querySelector("#myButton").addEventListener("click", function() {
  // do something
});

2、事件处理转换

jQuery使用.on方法来绑定事件，而原生JavaScript使用addEventListener方法，将以下jQuery代码：

$("#myDiv").on("click", ".myClass", function() {
  // do something
});

转换为纯JavaScript代码：

var myDiv = document.querySelector("#myDiv");
myDiv.addEventListener("click", function(event) {
  if (event.target.classList.contains("myClass")) {
    // do something
  }
});

3、动画转换

jQuery提供了animate方法来实现元素的动画效果，而原生JavaScript可以使用requestAnimationFrame方法结合CSS样式来实现动画效果，将以下jQuery代码：

$("#myDiv").animate({left: "200px"}, 1000);

转换为纯JavaScript代码：

var myDiv = document.querySelector("#myDiv");
var startTime = null;
function animate() {
  var currentTime = new Date().getTime();
  if (!startTime) {
    startTime = currentTime;
  }
  var progress = (currentTime startTime) / 1000; // calculate progress in seconds
  var left = parseInt(myDiv.style.left) + (progress * 200); // calculate new left position based on progress and duration
  myDiv.style.left = left + "px"; // set new left position to the element
  if (progress < 1) { // continue animation if not finished yet
    requestAnimationFrame(animate);
  } else { // reset animation if finished
    myDiv.style.left = "0px"; // reset left position to initial value
  }
}
requestAnimationFrame(animate); // start animation with a single frame request

4、Ajax转换

jQuery提供了$.ajax方法来实现Ajax请求，而原生JavaScript可以使用XMLHttpRequest对象或者更现代的fetch API来实现，将以下jQuery代码：

$.ajax({url: "/api/data", success: function(data) {
  // handle data received from server
}});

转换为纯JavaScript代码：

var xhr = new XMLHttpRequest(); // create a new XMLHttpRequest object
xhr.open("GET", "/api/data", true); // open a connection to the specified URL with the specified method and async flag set to true (asynchronous)
xhr.onreadystatechange = function() { // define what to do when the readyState changes (e.g., when the response is received)
  if (xhr.readyState === 4 && xhr.status === 200) { // check if the request has completed successfully (readyState === 4) and if the response status code is OK (status === 200)
    var data = JSON.parse(xhr.responseText); // parse the response text as JSON and store it in the data variable
    // handle data received from server using the data variable here...
  } else if (xhr.readyState === 4) { // handle any other readyState values (e.g., network error) here...
    // handle error or exception here...
  } else { // handle any other readyState values (e.g., loading) here...
    // show loading indicator or perform any other actions here...
  }
};
xhr.send(); // send the request to the server with the specified method and parameters (e.g., no parameters for a GET request)

将纯JavaScript代码转换为jQuery代码

1、选择器转换（略）