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

Posted 2020-09-19

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

选择元素 

Javascript代码 

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

创建元素 

Javascript代码 

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

添加事件监听器 

Javascript代码 

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

设置/获取属性 

Javascript代码 

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

添加/移除/切换类 

Javascript代码 

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

附加内容（Append） 

Javascript代码 

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

克隆元素 

Javascript代码 

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

移除元素 

Javascript代码 

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

获取父元素 

Javascript代码 

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

上一个/下一个元素 

Javascript代码 

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

XHR或AJAX 

Javascript代码 

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