首页 > 代码库 > 原生javascript 实现jQuery代码效果对比

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

2024-09-23 23:44:34   213人阅读

以下是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});  

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


联系
我们