原生javascript取代jquery的一些方法

1.選取元素

 

1 2 3 4 5 6 7 8 9 10

// jQuery var els = $( '.el' );   // Native var els = document.querySelectorAll( '.el' );   // Shorthand var $ = function (el) {   return document.querySelectorAll(el); }

querySelectorAll方法返回的是NodeList對象，須要轉換爲數組。

 

1	myList = Array.prototype.slice.call(myNodeList)

2.建立元素

 

1 2 3 4 5

// jQuery var newEl = $( '<div/>' );   // Native var newEl = document.createElement( 'div' );

3.添加事件

 

1 2 3 4 5 6 7 8 9 10 11

// jQuery $( '.el' ).on( 'event' , function () {   });   // Native [].forEach.call(document.querySelectorAll( '.el' ), function (el) {   el.addEventListener( 'event' , function () {     }, false ); });

4.get/set屬性

 

1 2 3 4 5 6 7

// jQuery $( '.el' ).filter( ':first' ).attr( 'key' , 'value' ); $( '.el' ).filter( ':first' ).attr( 'key' );   // Native document.querySelector( '.el' ).setAttribute( 'key' , 'value' ); document.querySelector( '.el' ).getAttribute( 'key' );

5.添加和移除樣式Class

DOM元素自己有一個可讀寫的className屬性，能夠用來操做class。

HTML 5還提供一個classList對象，功能更強大（IE 9不支持）。

 

1 2 3 4 5 6 7 8 9

// jQuery $( '.el' ).addClass( 'class' ); $( '.el' ).removeClass( 'class' ); $( '.el' ).toggleClass( 'class' );   // Native document.querySelector( '.el' ).classList.add( 'class' ); document.querySelector( '.el' ).classList.remove( 'class' ); document.querySelector( '.el' ).classList.toggle( 'class' );

6.追加元素

尾部追加元素：

 

1 2 3 4 5

// jQuery $( '.el' ).append($( '<div/>' ));   // Native document.querySelector( '.el' ).appendChild(document.createElement( 'div' ));

頭部追加元素：

 

1 2 3 4 5 6

//jQuery $(‘.el ').prepend(' <div></div> ')   //Native var parent = document.querySelector(' .el'); parent.insertBefore( "<div></div>" ,parent.childNodes[0])

7.克隆元素

 

1 2 3 4 5

// jQuery var clonedEl = $( '.el' ).clone();   // Native var clonedEl = document.querySelector( '.el' ).cloneNode( true );

8.移除元素

 

1 2 3 4 5 6 7 8 9 10 11 12

Remove // jQuery $( '.el' ).remove();   // Native remove( '.el' );   function remove(el) {   var toRemove = document.querySelector(el);     toRemove.parentNode.removeChild(toRemove); }

9.獲取父級元素

 

1 2 3 4 5

// jQuery $( '.el' ).parent();   // Native document.querySelector( '.el' ).parentNode;

10.獲取上一個/下一個元素（Prev/next element）

 

1 2 3 4 5 6 7

// jQuery $( '.el' ).prev(); $( '.el' ).next();   // Native document.querySelector( '.el' ).previousElementSibling; document.querySelector( '.el' ).nextElementSibling;

11.XHR and AJAX

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// jQuery $.get( 'url' , function (data) {   }); $.post( 'url' , {data: data}, function (data) {   });   // Native   // 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});

12.清空子元素

 

1 2 3 4 5 6

//jQuery $( "#elementID" ).empty()   //Native var element = document.getElementById( "elementID" ) while (element.firstChild) element.removeChild(element.firstChild);

13.檢查是否有子元素

 

1 2 3 4 5

//jQuery if (!$( "#elementID" ).is( ":empty" )){}   //Native if (document.getElementById( "elementID" ).hasChildNodes()){}

14.$(document).ready

DOM加載完成，會觸發DOMContentLoaded事件，等同於jQuery的$(document).ready方法。

 

1 2 3

document.addEventListener( "DOMContentLoaded" , function () {    // ... });

15.數據儲存

jQuery對象能夠儲存數據。

 

1	$( "body" ).data( "foo" , 52);

HTML 5有一個dataset對象，也有相似的功能（IE 10不支持），不過只能保存字符串。

 

1 2	element.dataset.user = JSON.stringify(user); element.dataset.score = score;

16.動畫

jQuery的animate方法，用於生成動畫效果。

 

1	$foo.animate( 'slow' , { x: '+=10px' }

jQuery的動畫效果，很大部分基於DOM。可是目前，CSS 3的動畫遠比DOM強大，因此能夠把動畫效果寫進CSS，而後經過操做DOM元素的class，來展現動畫。

 

1	foo.classList.add( 'animate' )

若是須要對動畫使用回調函數，CSS 3也定義了相應的事件。

 

1 2	el.addEventListener( "webkitTransitionEnd" , transitionEnded); el.addEventListener( "transitionend" , transitionEnded);

 

替代方案

因爲jQuery體積過大，替代方案層出不窮。

其中，最有名的是zepto.js。它的設計目標是以最小的體積，作到最大兼容jQuery的API。它的1.0版的原始大小是55KB，優化後是29KB，gzip壓縮後爲10KB。

若是不求最大兼容，只但願模擬jQuery的基本功能。那麼，min.js優化後只有200字節，而dolla優化後是1.7KB。

 此外，jQuery自己也採用模塊設計，能夠只選擇使用本身須要的模塊。具體作法參見jQuery的github網站，或者使用專用的Web界面。