<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        


    


    午后星期午
    

    

    




    
	
					
	
    
		
    
			忘掉jQuery，使用JavaScript原生API
		
    
		
    jQuery 目前已經成為最流行的JavaScript庫，它可以讓開發者“write less, do more（寫得更少，做得更多）”，這也是它的核心理念。通過它，用戶可以更方便地處理HTML documents、events，更輕松地實現動畫效果、AJAX交互等。  

    盡管jQuery幫助開發者節省了大量的工作，但是并不是所有的產品都適合使用jQuery。jQuery 2.0.3版本有236KB，壓縮版也有81KB，這意味著你的Web產品需要額外的加載時間和帶寬，而在移動設備上則需要更多。  

    如果你的產品中只有少量的前端效果或DOM操作，那么完全可以拋棄臃腫的jQuery，轉而使用JavaScript原生API來實現。   

    

     


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


    以上這些只是很少一部分，你可以在瀏覽器的控制臺中找到更多東西，或者可以參考 MDN的JS API reference 或者 WPD的DOM文檔 。  

    你也可以使用其他非常輕量級的庫代替，比如 http://microjs.com/ 列出的一些庫，根據你的需求選擇最合適的庫，但首先要清楚，除非是不使用庫無法實現某項功能，否則還是使用原生JavaScript。  

    英文原文： How to forget about jQuery and start using native JavaScript APIs 
    
		
    
			posted on 2013-12-31 13:55 午后星期午 閱讀(102) 評論(0)  編輯  收藏  所屬分類: Js 
		
    
	
    
	
	





    
	    
    




    








    

				

    



    







    
        
	



主站蜘蛛池模板：
日韩在线天堂免费观看|
亚洲中文字幕在线第六区|
免费无码专区毛片高潮喷水|
中文字幕亚洲日本岛国片|
91高清免费国产自产|
国产尤物在线视精品在亚洲|
久久综合日韩亚洲精品色|
午夜视频免费成人|
a毛看片免费观看视频|
国产成+人+综合+亚洲专|
亚洲综合色婷婷七月丁香|
日本亚洲免费无线码|
成在线人免费无码高潮喷水|
亚洲av无码一区二区三区观看|
亚洲午夜精品一级在线播放放|
亚洲毛片免费视频|
国产无遮挡色视频免费观看性色|
亚洲娇小性色xxxx|
亚洲AV无码久久精品成人
|
精品福利一区二区三区免费视频|
亚洲AV永久无码精品一福利|
亚洲黄色片在线观看|
免费精品国产自产拍观看|
黄网站色在线视频免费观看|
国产精品无码永久免费888|
亚洲国产精品无码久久98|
亚洲视频一区网站|
情人伊人久久综合亚洲|
四虎永久在线免费观看|
国产精品无码免费播放|
96免费精品视频在线观看|
岛国精品一区免费视频在线观看
|
久久精品国产亚洲一区二区|
日本一区免费电影|
成年女人18级毛片毛片免费观看|
亚洲日产乱码一二三区别|
色婷婷六月亚洲婷婷丁香|
国产精品国产亚洲精品看不卡|
亚洲av成人一区二区三区在线观看
|
久久国产乱子伦精品免费不卡|
高清免费久久午夜精品|