原文: http://www.leebrimelow.com/native-methods-jquery/
不太重要的沒(méi)翻譯= =
?
我們針對(duì)常用的jQuery方法以及其等價(jià)原生方法的性能做了一些測(cè)試( 1 ,? 2 ,? 3 )。
我知道你在想什么。原生方法明顯要比jQuery方法快,因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情。是的,我完全贊成。寫(xiě)這篇文章并不是出于反對(duì)使用jQuery,但如果你針對(duì)的是現(xiàn)代瀏覽器,那么使用原生方法會(huì)使性能有很大的提升。
許多開(kāi)發(fā)者沒(méi)有意識(shí)到大多數(shù)他們使用的jQuery方法可以使用原生方法,或者更輕量級(jí)的方法來(lái)代替。下面是一些代碼示例,展示一些常用的jQuery方法,以及其等價(jià)原生方法。
譯者注:需要注意下面有些原生方法是HTML5引入的,部分瀏覽器可能不能使用。
選擇器
jQuery的核心之一就是能非常方便的取到DOM元素。我們只需輸入CSS選擇字符串,便可以得到匹配的元素。但在大多數(shù)情況下,我們可以用簡(jiǎn)單的原生代碼達(dá)到同樣的效果。
// ----得到頁(yè)面的所有div--------- /* jQuery */ $( "div" ) /* 原生 */ document.getElementsByTagName( "div" ) // ----得到所有指定class的元素--------- /* jQuery */ $( ".my-class" ) /* 原生 */ document.querySelectorAll( ".my-class" ) /* 更快的原生方法 */ document.getElementsByClassName( "my-class" ) // ----通過(guò)CSS選擇得到元素---------- /* jQuery */ $( ".my-class li:first-child" ) /* 原生 */ document.querySelectorAll( ".my-class li:first-child" ) // ----得到指定clsss的第一個(gè)元素---- /* jQuery */ $( ".my-class").get(0 ) /* 原生 */ document.querySelector( ".my-class")
?譯者注:其實(shí)這里面是有些問(wèn)題的,document.querySelectorAll和jQuery選擇器還是有區(qū)別的,前者返回的是一個(gè)NodeList,而后者返回的是一個(gè)類(lèi)數(shù)組對(duì)象。
?
DOM操作
jQuery還在DOM操作上頻繁使用,例如插入或者刪除元素。我們也可以使用原生方法來(lái)進(jìn)行這些操作,你會(huì)發(fā)現(xiàn)這需要寫(xiě)額外的代碼,當(dāng)然也可以寫(xiě)自己的輔助函數(shù)來(lái)讓使用起來(lái)更容易。下面是一些將元素插入到頁(yè)面中的例子。
// ----插入元素---- /* jQuery */ $(document.body).append( "<div id='myDiv'><img src='im.gif'/></div>" ); /* 蹩腳的原生方法 */ document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>" ; /* 更好的原生方法 */ var frag = document.createDocumentFragment(); var myDiv = document.createElement("div" ); myDiv.id = "myDiv" ; var im = document.createElement("img" ); im.src = "im.gif" ; myDiv.appendChild(im); frag.appendChild(myDiv); document.body.appendChild(frag); // ----前置元素---- // 除了最后一行 document.body.insertBefore(frag, document.body.firstChild);
?
CSS classes
在jQuery中,我們可以很容易對(duì)DOM元素添加、刪除、檢查它的CSS class。幸運(yùn)的是,利用原生方法也可以簡(jiǎn)單的辦到。
// 得到DOM元素的引用 var el = document.querySelector(".main-content" ); // ----添加class------ /* jQuery */ $(el).addClass( "someClass" ); /* 原生方法 */ el.classList.add( "someClass" ); // ----刪除class----- /* jQuery */ $(el).removeClass( "someClass" ); /* 原生方法 */ el.classList.remove( "someClass" ); // ----是否是該class--- /* jQuery */ if ($(el).hasClass("someClass" )) /* 原生方法 */ if (el.classList.contains("someClass"))
?
修改CSS屬性
總是通過(guò)Javascript修改和檢索CSS屬性,這樣會(huì)比使用jQuery CSS函數(shù)更加簡(jiǎn)單快速,并且沒(méi)有任何不必要的代碼。
// 得到DOM元素引用 var el = document.querySelector(".main-content" ); // ----設(shè)置CSS屬性---- /* jQuery */ $(el).css({ background: "#FF0000" , "box-shadow": "1px 1px 5px 5px red" , width: "100px" , height: "100px" , display: "block" }); /* 原生 */ el.style.background = "#FF0000" ; el.style.width = "100px" ; el.style.height = "100px" ; el.style.display = "block" ; el.style.boxShadow = "1px 1px 5px 5px red";
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
