怎么把jquery改写成js

要把jQuery改写成JavaScript，主要可以使用原生JavaScript替代jQuery的简化方法、DOM操作、事件处理、AJAX请求等。 例如，jQuery的$(document).ready()可以用DOMContentLoaded事件替代、$.ajax()可以用fetch替代。下面我将详细介绍这些替代方法和技巧，帮助你顺利完成从jQuery到JavaScript的过渡。

一、DOM操作

1、选择器替换

jQuery中的选择器非常简洁，但JavaScript也有类似的功能，主要使用document.querySelector和document.querySelectorAll。

// jQuery:
$('.class-name');
// JavaScript:
document.querySelector('.class-name');

querySelector返回第一个匹配的元素，而querySelectorAll返回所有匹配的元素，可以通过循环进行操作。

// jQuery:
$('.class-name').each(function() {
    // Do something
});
// JavaScript:
document.querySelectorAll('.class-name').forEach(function(el) {
    // Do something
});

2、添加和移除类

// jQuery:
$('.class-name').addClass('another-class');
$('.class-name').removeClass('another-class');
// JavaScript:
document.querySelector('.class-name').classList.add('another-class');
document.querySelector('.class-name').classList.remove('another-class');

3、获取和设置内容

// jQuery:
$('#element-id').text();
$('#element-id').text('New text');
// JavaScript:
document.getElementById('element-id').textContent;
document.getElementById('element-id').textContent = 'New text';

二、事件处理

1、事件绑定

// jQuery:
$('#element-id').on('click', function() {
    // Do something
});
// JavaScript:
document.getElementById('element-id').addEventListener('click', function() {
    // Do something
});

2、事件解绑

// jQuery:
$('#element-id').off('click');
// JavaScript:
document.getElementById('element-id').removeEventListener('click', eventHandlerFunction);

为了解绑事件，通常需要将事件处理函数定义为一个命名函数，而不是匿名函数。

三、AJAX请求

1、GET请求

// jQuery:
$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    }
});
// JavaScript:
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

2、POST请求

// jQuery:
$.ajax({
    url: 'https://api.example.com/data',
    method: 'POST',
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(data) {
        console.log(data);
    }
});
// JavaScript:
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key1: 'value1',
        key2: 'value2'
    })
})
.then(response => response.json())
.then(data => {
    console.log(data);
});

四、动画效果

1、显示和隐藏元素

// jQuery:
$('.class-name').show();
$('.class-name').hide();
// JavaScript:
document.querySelector('.class-name').style.display = 'block';
document.querySelector('.class-name').style.display = 'none';

2、淡入和淡出效果

JavaScript没有内置的淡入淡出功能，但可以通过CSS和JavaScript结合实现。

/* CSS */
.fade {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}
.fade-in {
    opacity: 1;
}

// JavaScript
const element = document.querySelector('.fade');
element.classList.add('fade-in'); // Fade in
element.classList.remove('fade-in'); // Fade out

五、工具函数

1、遍历数组和对象

// jQuery:
$.each(array, function(index, value) {
    console.log(index, value);
});
// JavaScript:
array.forEach(function(value, index) {
    console.log(index, value);
});
// jQuery:
$.each(object, function(key, value) {
    console.log(key, value);
});
// JavaScript:
Object.keys(object).forEach(function(key) {
    console.log(key, object[key]);
});

2、延迟执行

// jQuery:
$.when(promise1, promise2).done(function() {
    // Do something
});
// JavaScript:
Promise.all([promise1, promise2]).then(function() {
    // Do something
});

六、表单操作

1、获取表单值

// jQuery:
$('#form-id input[name="field-name"]').val();
// JavaScript:
document.querySelector('#form-id input[name="field-name"]').value;

2、设置表单值

// jQuery:
$('#form-id input[name="field-name"]').val('new value');
// JavaScript:
document.querySelector('#form-id input[name="field-name"]').value = 'new value';

七、项目管理系统推荐

在进行项目管理时，选择合适的工具至关重要。研发项目管理系统PingCode和通用项目协作软件Worktile是两个非常好的选择。

1、PingCode

PingCode是一个专为研发团队设计的项目管理系统，提供了强大的问题跟踪、需求管理、测试管理等功能。它支持敏捷开发流程，帮助团队高效协作，提高研发效率。

2、Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队。它提供了任务管理、文档管理、时间管理等功能，并支持多种视图（如看板、甘特图），帮助团队成员高效沟通与协作。

八、总结

通过上述方法和技巧，你可以将jQuery代码逐步转化为原生JavaScript代码。虽然jQuery提供了许多简便的方法，但原生JavaScript在现代浏览器中已经非常强大，完全可以替代jQuery的功能。希望本文能帮助你顺利完成从jQuery到JavaScript的过渡，提高代码的性能和可维护性。