jquery怎么改成js语句

jQuery 代码可以通过以下几种方法转换为纯 JavaScript 代码：使用原生 JavaScript 方法、使用现代浏览器提供的 API、利用第三方库。其中，使用原生 JavaScript 方法是最常见和推荐的方式。接下来，我将详细介绍如何将常见的 jQuery 代码转换为纯 JavaScript 代码。

一、选择器和遍历

1.1 选择器

jQuery 使用 $ 符号来选择 DOM 元素，通常使用 $('#id')、$('.class') 或 $('tag') 的方式。纯 JavaScript 则使用 document.getElementById、document.getElementsByClassName 和 document.getElementsByTagName。

例子：

// jQuery
$('#myId');
$('.myClass');
$('div');
// JavaScript
document.getElementById('myId');
document.getElementsByClassName('myClass');
document.getElementsByTagName('div');

1.2 遍历

jQuery 提供 .each() 方法来遍历元素集合，纯 JavaScript 则可以使用 for 循环或 forEach 方法。

例子：

// jQuery
$('.myClass').each(function(index, element) {
  // do something
});
// JavaScript
Array.prototype.forEach.call(document.getElementsByClassName('myClass'), function(element, index) {
  // do something
});

二、事件处理

2.1 绑定事件

jQuery 使用 .on() 方法来绑定事件，纯 JavaScript 则使用 addEventListener 方法。

例子：

// jQuery
$('#myButton').on('click', function() {
  alert('Button clicked');
});
// JavaScript
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked');
});

2.2 解绑事件

jQuery 使用 .off() 方法来解绑事件，纯 JavaScript 则使用 removeEventListener 方法。

例子：

// jQuery
$('#myButton').off('click');
// JavaScript
const button = document.getElementById('myButton');
const handleClick = function() {
  alert('Button clicked');
};
button.removeEventListener('click', handleClick);

三、CSS 操作

3.1 获取和设置 CSS

jQuery 使用 .css() 方法来获取和设置 CSS 属性，纯 JavaScript 则使用 style 属性和 getComputedStyle 方法。

例子：

// jQuery
$('#myDiv').css('color', 'red');
const color = $('#myDiv').css('color');
// JavaScript
document.getElementById('myDiv').style.color = 'red';
const color = getComputedStyle(document.getElementById('myDiv')).color;

四、DOM 操作

4.1 添加和删除类名

jQuery 使用 .addClass() 和 .removeClass() 方法，纯 JavaScript 则使用 classList 属性。

例子：

// jQuery
$('#myDiv').addClass('newClass');
$('#myDiv').removeClass('oldClass');
// JavaScript
document.getElementById('myDiv').classList.add('newClass');
document.getElementById('myDiv').classList.remove('oldClass');

4.2 创建和插入元素

jQuery 使用 append、prepend 等方法，纯 JavaScript 则使用 appendChild 和 insertBefore 方法。

例子：

// jQuery
$('<div>New Element</div>').appendTo('#myDiv');
// JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'New Element';
document.getElementById('myDiv').appendChild(newDiv);

五、AJAX 请求

jQuery 使用 $.ajax 方法，纯 JavaScript 则使用 XMLHttpRequest 或 fetch 方法。

5.1 使用 XMLHttpRequest

例子：

// jQuery
$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error(error);
  }
});
// JavaScript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error('Request failed with status ' + xhr.status);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

5.2 使用 Fetch API

例子：

// JavaScript (Fetch API)
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

六、动画效果

6.1 显示和隐藏元素

jQuery 使用 .show() 和 .hide() 方法，纯 JavaScript 则直接操作 style.display 属性。

例子：

// jQuery
$('#myDiv').show();
$('#myDiv').hide();
// JavaScript
document.getElementById('myDiv').style.display = 'block';
document.getElementById('myDiv').style.display = 'none';

七、其他常见操作

7.1 获取和设置 HTML 内容

jQuery 使用 .html() 方法，纯 JavaScript 则使用 innerHTML 属性。

例子：

// jQuery
$('#myDiv').html('<p>New Content</p>');
const content = $('#myDiv').html();
// JavaScript
document.getElementById('myDiv').innerHTML = '<p>New Content</p>';
const content = document.getElementById('myDiv').innerHTML;

7.2 获取和设置表单值

jQuery 使用 .val() 方法，纯 JavaScript 则使用 value 属性。

例子：

// jQuery
$('#myInput').val('new value');
const value = $('#myInput').val();
// JavaScript
document.getElementById('myInput').value = 'new value';
const value = document.getElementById('myInput').value;

总结

通过以上几个方面的详细介绍，我们可以看到，将 jQuery 代码转换为纯 JavaScript 代码主要涉及使用原生 JavaScript 方法来替代 jQuery 提供的简便方法。尽管 jQuery 简化了很多操作，但现代浏览器的 API 已经非常强大，使用纯 JavaScript 也能实现几乎所有 jQuery 提供的功能。此外，使用纯 JavaScript 可以减少依赖，提升页面性能。