html5不支持jquery,你不需要jQuery(五)

为什么不用jQuery？因为它让你的网站体积变得臃肿。你的网站并不真的需要jQuery，不需要它带来的额外体积、带宽和加载时间。

用原生JavaScript简单实现jQuery提供的功能和方法

查找、选择页面元素

// jQuery 实现

var els = $('.el');

// 原生JavaScript实现

var els = document.querySelectorAll('.el');

// 简写

var $ = function (el) {

return document.querySelectorAll(el);

}

var els = $('.el');

创建元素

// jQuery 实现

var newEl = $('

// 原生JavaScript实现

var newEl = document.createElement('div');

事件、监听器操作

// jQuery 实现

$('.el').on('event', function() {

});

// 原生JavaScript实现

[].forEach.call(document.querySelectorAll('.el'), function (el) {

el.addEventListener('event', function() {

}, false);

});

设置、修改和获取属性值

// jQuery 实现

$('.el').filter(':first').attr('key', 'value');

$('.el').filter(':first').attr('key');

// 原生JavaScript实现

document.querySelector('.el').setAttribute('key', 'value');

document.querySelector('.el').getAttribute('key');

增加/修改/删除/反转 类操作

// jQuery 实现

$('.el').addClass('class');

$('.el').removeClass('class');

$('.el').toggleClass('class');

// 原生JavaScript实现

document.querySelector('.el').classList.add('class');

document.querySelector('.el').classList.remove('class');

document.querySelector('.el').classList.toggle('class');

追加元素 Append

// jQuery 实现

$('.el').append($('

// 原生JavaScript实现

document.querySelector('.el').appendChild(document.createElement('div'));

复制、克隆元素

// jQuery 实现

var clonedEl = $('.el').clone();

// 原生JavaScript实现

var clonedEl = document.querySelector('.el').cloneNode(true);

删除元素

// jQuery 实现

$('.el').remove();

// 原生JavaScript实现

remove('.el');

function remove(el) {

var toRemove = document.querySelector(el);

toRemove.parentNode.removeChild(toRemove);

}

父元素操作

// jQuery 实现

$('.el').parent();

// 原生JavaScript实现

document.querySelector('.el').parentNode;

前一个/下一个/临近同辈元素

// jQuery 实现

$('.el').prev();

$('.el').next();

// 原生JavaScript实现

document.querySelector('.el').previousElementSibling;

document.querySelector('.el').nextElementSibling;

XHR aka AJAX

新版的JavaScript API里提供了一个全新的可以实现ajax的API——fetch，这个api采用了全新的 Promise 架构，使用起来更方便，更灵活，详细用法请参考《你不需要jQuery(三)：新AJAX方法fetch() 》。

下面是传统的实现方式：

// jQuery 实现

$.get('url', function (data) {

});

$.post('url', {data: data}, function (data) {

});

// 原生JavaScript实现

// get

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.onreadystatechange = function (data) {

}

xhr.send();

// post

var xhr = new XMLHttpRequest()

xhr.open('POST', url);

xhr.onreadystatechange = function (data) {

}

xhr.send({data: data});

不可否认，jQuery有时候是开发项目时必不可少的，但不同的项目，不同的场景，项目的技术架构，都需要做不同的考量，经过冷静的思考，我们就会发现，很多时候，我并不需要jQuery，使用原生JavaScript技术反而项目变得更精简、效率更高。