Terry.Li-彬

虛其心，可解天下之問；專其心，可治天下之學(xué)；靜其心，可悟天下之理；恒其心，可成天下之業(yè)。

:: 管理 ::

143 隨筆 :: 344 文章 :: 130 評論 :: 0 Trackbacks

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

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

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

以下是jQuery和JavaScript實現(xiàn)相同操作的等價代碼。?

選擇元素 ?

Javascript代碼?

										//?jQuery
										??
								
										var
										?els?=?$(
										'.el'
										);??
								
								??
						
										//?原生方法
										??
								
										var
										?els?=?document.querySelectorAll(
										'.el'
										);??
								
								??
						
										//?函數(shù)法
										??
								
										var
										?$?=?
										function
										?(el)?{??
								
								??return?document.querySelectorAll(el);??
						
								}??
						
								??
						
										var
										?els?=?$(
										'.el'
										);??
								
								??
						
										//?或者使用regex-based?micro-selector庫，地址：http://jsperf.com/micro-selector-libraries
										??

創(chuàng)建元素 ?

Javascript代碼?

										//?jQuery
										??
								
										var
										?newEl?=?$(
										'<div/>'
										);??
								
								??
						
										//?原生方法
										??
								
										var
										?newEl?=?document.createElement(
										'div'
										);??

添加事件監(jiān)聽器 ?

Javascript代碼?

										//?jQuery
										??
								
								$('.el').on('event',?function()?{??
						
								??
						
								});??
						
								??
						
										//?原生方法
										??
								
								[].forEach.call(document.querySelectorAll('.el'),?function?(el)?{??
						
								??el.addEventListener('event',?function()?{??
						
								??
						
								??},?false);??
						
								});??

設(shè)置/獲取屬性 ?

Javascript代碼?

										//?jQuery
										??
								
								$('.el').filter(':first').attr('key',?'value');??
						
								$('.el').filter(':first').attr('key');??
						
								??
						
										//?原生方法
										??
								
								document.querySelector('.el').setAttribute('key',?'value');??
						
								document.querySelector('.el').getAttribute('key');??

添加/移除/切換類 ?

Javascript代碼?

										//?jQuery
										??
								
								$('.el').addClass('class');??
						
								$('.el').removeClass('class');??
						
								$('.el').toggleClass('class');??
						
								??
						
										//?原生方法
										??
								
								document.querySelector('.el').classList.add('class');??
						
								document.querySelector('.el').classList.remove('class');??
						
								document.querySelector('.el').classList.toggle('class');??

附加內(nèi)容（Append） ?

Javascript代碼?

										//?jQuery
										??
								
								$('.el').append($('<div/>'));??
						
								??
						
										//?原生方法
										??
								
								document.querySelector('.el').appendChild(document.createElement('div'));??

克隆元素 ?

Javascript代碼?

										//?jQuery
										??
								
										var
										?clonedEl?=?$(
										'.el'
										).clone();??
								
								??
						
										//?原生方法
										??
								
										var
										?clonedEl?=?document.querySelector(
										'.el'
										).cloneNode(
										true
										);??

移除元素 ?

Javascript代碼?

										//?jQuery
										??
								
								$('.el').remove();??
						
								??
						
										//?原生方法
										??
								
								remove('.el');??
						
								??
						
										function
										?remove(el)?{??
								
								??var?toRemove?=?document.querySelector(el);??
						
								??
						
								??toRemove.parentNode.removeChild(toRemove);??
						
								}??

獲取父元素 ?

Javascript代碼?

										//?jQuery
										??
								
								$('.el').parent();??
						
								??
						
										//?原生方法
										??
								
								document.querySelector('.el').parentNode;??

上一個/下一個元素 ?

Javascript代碼?

										//?jQuery
										??
								
								$('.el').prev();??
						
								$('.el').next();??
						
								??
						
										//?原生方法
										??
								
								document.querySelector('.el').previousElementSibling;??
						
								document.querySelector('.el').nextElementSibling;??

XHR或AJAX ?

Javascript代碼?

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

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

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

英文原文： How to forget about jQuery and start using native JavaScript APIs

posted on 2013-11-28 09:31 禮物閱讀(760) 評論(0) 編輯收藏所屬分類: jquery

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: Ajax Session Timeout 超時處理忘掉jQuery，使用JavaScript原生API 十個jQuery圖片畫廊插件推薦 30款ajax特效，針對Lightbox和Modal Dialog (轉(zhuǎn)載)jQuery學(xué)習(xí): 實現(xiàn)select multiple左右添加和刪除功能 jquery技巧總結(jié) jquery中文指導(dǎo):15天學(xué)會jquery

Terry.Li-彬

常用鏈接

留言簿(19)

隨筆分類(107)

隨筆檔案(141)

文章分類(284)

文章檔案(342)

相冊

收藏夾(58)

家裝

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜