将 jQuery 转换为 JavaScript

jQuery 是一个非常流行的 JavaScript 库，但是如果你想使用纯 JavaScript 实现一些 jQuery 中的功能，有什么方法呢？这里我们提供一些简单易懂的示例。

选择器

ID 选择器

使用 jQuery 时，你可以根据 ID 选择元素：

$('#myId');

而在纯 JavaScript 中，可以这样实现：

document.getElementById('myId');

类选择器

使用 jQuery 时，你可以根据类选择元素：

$('.myClass');

而在纯 JavaScript 中，可以这样实现：

document.querySelectorAll('.myClass');

属性选择器

使用 jQuery 时，你可以根据属性选择元素：

$('[data-myAttr="myValue"]');

而在纯 JavaScript 中，可以这样实现：

document.querySelectorAll('[data-myAttr="myValue"]');

事件处理

绑定事件

使用 jQuery 时，你可以绑定事件：

$('#myId').on('click', function() {});

而在纯 JavaScript 中，可以这样实现：

document.getElementById('myId').addEventListener('click', function() {}, false);

解绑事件

使用 jQuery 时，你可以解绑事件：

$('#myId').off('click');

而在纯 JavaScript 中，可以这样实现：

var el = document.getElementById('myId');
var elClone = el.cloneNode(true);
el.parentNode.replaceChild(elClone, el);

效果

隐藏

使用 jQuery 时，你可以隐藏元素：

$('#myId').hide();

而在纯 JavaScript 中，可以这样实现：

document.getElementById('myId').style.display = 'none';

显示

使用 jQuery 时，你可以显示元素：

$('#myId').show();

而在纯 JavaScript 中，可以这样实现：

document.getElementById('myId').style.display = 'block';

AJAX

使用 jQuery 时，你可以轻松地进行 AJAX 请求：

$.ajax({
    url: 'myUrl',
    method: 'GET',
    success: function(data) {},
    error: function() {}
});

而在纯 JavaScript 中，可以这样实现：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'myUrl', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var data = xhr.responseText;
            console.log(data);
        } else {
            console.error(xhr.statusText);
        }
    }
};
xhr.onerror = function() {
    console.error(xhr.statusText);
};
xhr.send(null);

以上就是一些将 jQuery 转换为 JavaScript 的示例，希望能对你有所帮助。