Terry.Li-彬

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

BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合

:: 管理 ::

143 隨筆 :: 344 文章 :: 130 評(píng)論 :: 0 Trackbacks

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

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

如果你的產(chǎn)品中只有少量的前端效果或DOM操作，那么完全可以?huà)仐売纺[的jQuery，轉(zhuǎn)而使用JavaScript原生API來(lái)實(shí)現(xiàn)。 ?

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

選擇元素 ?

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庫(kù)，地址：http://jsperf.com/micro-selector-libraries
										??

創(chuàng)建元素 ?

Javascript代碼?

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

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

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');??

添加/移除/切換類(lèi) ?

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;??

上一個(gè)/下一個(gè)元素 ?

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});??

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

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

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

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

新用戶(hù)注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。




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

Terry.Li-彬

常用鏈接

留言簿(19)

隨筆分類(lèi)(107)

隨筆檔案(141)

文章分類(lèi)(284)

文章檔案(342)

相冊(cè)

收藏夾(58)

家裝

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜