原生javascript 实现jQuery代码效果对比

以下是jQuery和JavaScript实现相同操作的等价代码。

选择元素

Javascript代码

1. // jQuery
2. var els = $(‘.el‘);
3. // 原生方法
4. var els = document.querySelectorAll(‘.el‘);
5. // 函数法
6. var $ = function (el) {
7. return document.querySelectorAll(el);
8. }
9. var els = $(‘.el‘);
10. // 或者使用regex-based micro-selector库，地址：http://jsperf.com/micro-selector-libraries

创建元素

Javascript代码

1. // jQuery
2. var newEl = $(‘<div/>‘);
3. // 原生方法
4. var newEl = document.createElement(‘div‘);

添加事件监听器

Javascript代码

1. // jQuery
2. $(‘.el‘).on(‘event‘, function() {
3. });
4. // 原生方法
5. [].forEach.call(document.querySelectorAll(‘.el‘), function (el) {
6. el.addEventListener(‘event‘, function() {
7. }, false);
8. });

设置/获取属性

Javascript代码

1. // jQuery
2. $(‘.el‘).filter(‘:first‘).attr(‘key‘, ‘value‘);
3. $(‘.el‘).filter(‘:first‘).attr(‘key‘);
4. // 原生方法
5. document.querySelector(‘.el‘).setAttribute(‘key‘, ‘value‘);
6. document.querySelector(‘.el‘).getAttribute(‘key‘);

添加/移除/切换类

Javascript代码

1. // jQuery
2. $(‘.el‘).addClass(‘class‘);
3. $(‘.el‘).removeClass(‘class‘);
4. $(‘.el‘).toggleClass(‘class‘);
5. // 原生方法
6. document.querySelector(‘.el‘).classList.add(‘class‘);
7. document.querySelector(‘.el‘).classList.remove(‘class‘);
8. document.querySelector(‘.el‘).classList.toggle(‘class‘);

附加内容（Append）

Javascript代码

1. // jQuery
2. $(‘.el‘).append($(‘<div/>‘));
3. // 原生方法
4. document.querySelector(‘.el‘).appendChild(document.createElement(‘div‘));

克隆元素

Javascript代码

1. // jQuery
2. var clonedEl = $(‘.el‘).clone();
3. // 原生方法
4. var clonedEl = document.querySelector(‘.el‘).cloneNode(true);

移除元素

Javascript代码

1. // jQuery
2. $(‘.el‘).remove();
3. // 原生方法
4. remove(‘.el‘);
5. function remove(el) {
6. var toRemove = document.querySelector(el);
7. toRemove.parentNode.removeChild(toRemove);
8. }

获取父元素

Javascript代码

1. // jQuery
2. $(‘.el‘).parent();
3. // 原生方法
4. document.querySelector(‘.el‘).parentNode;

上一个/下一个元素

Javascript代码

1. // jQuery
2. $(‘.el‘).prev();
3. $(‘.el‘).next();
4. // 原生方法
5. document.querySelector(‘.el‘).previousElementSibling;
6. document.querySelector(‘.el‘).nextElementSibling;

XHR或AJAX

Javascript代码

1. // jQuery
2. $.get(‘url‘, function (data) {
3. });
4. $.post(‘url‘, {data: data}, function (data) {
5. });
6. // 原生方法
7. // get
8. var xhr = new XMLHttpRequest();
9. xhr.open(‘GET‘, url);
10. xhr.onreadystatechange = function (data) {
11. }
12. xhr.send();
13. // post
14. var xhr = new XMLHttpRequest()
15. xhr.open(‘POST‘, url);
16. xhr.onreadystatechange = function (data) {
17. }
18. xhr.send({data: data});