中文字幕亚洲不卡在线亚瑟,亚洲激情校园春色,亚洲日本一区二区

忘掉jQuery，使用JavaScript原生API

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

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

如果你的產(chǎn)品中只有少量的前端效果或DOM操作，那么完全可以拋棄臃腫的jQuery，轉(zhuǎn)而使用JavaScript原生API來實(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)聽器 ?

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

上一個(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ù)無法實(shí)現(xiàn)某項(xiàng)功能，否則還是使用原生JavaScript。?

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

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

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


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




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: Ajax Session Timeout 超時(shí) 處理忘掉jQuery，使用JavaScript原生API 十個(gè)jQuery圖片畫廊插件推薦 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)

隨筆分類(107)

隨筆檔案(141)

文章分類(284)

文章檔案(342)

相冊(cè)

收藏夾(58)

家裝

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜