jQuery函數(shù)的等價(jià)原生函數(shù)代碼示例
更新時(shí)間:2013年05月27日 16:02:27 作者:
原生方法明顯要比jQuery方法快,因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情,如果你針對(duì)的是現(xiàn)代瀏覽器,那么使用原生方法會(huì)使性能有很大的提升
我們針對(duì)常用的jQuery方法以及其等價(jià)原生方法的性能做了一些測(cè)試(1, 2, 3)。
我知道你在想什么。原生方法明顯要比jQuery方法快,因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情。是的,我完全贊成。寫這篇文章并不是出于反對(duì)使用jQuery,但如果你針對(duì)的是現(xiàn)代瀏覽器,那么使用原生方法會(huì)使性能有很大的提升。
許多開發(fā)者沒有意識(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í)這里面是有些問題的,document.querySelectorAll和jQuery選擇器還是有區(qū)別的,前者返回的是一個(gè)NodeList,而后者返回的是一個(gè)類數(shù)組對(duì)象。
DOM操作
jQuery還在DOM操作上頻繁使用,例如插入或者刪除元素。我們也可以使用原生方法來(lái)進(jìn)行這些操作,你會(huì)發(fā)現(xiàn)這需要寫額外的代碼,當(dāng)然也可以寫自己的輔助函數(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)單快速,并且沒有任何不必要的代碼。
// 得到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";
我知道你在想什么。原生方法明顯要比jQuery方法快,因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情。是的,我完全贊成。寫這篇文章并不是出于反對(duì)使用jQuery,但如果你針對(duì)的是現(xiàn)代瀏覽器,那么使用原生方法會(huì)使性能有很大的提升。
許多開發(fā)者沒有意識(shí)到大多數(shù)他們使用的jQuery方法可以使用原生方法,或者更輕量級(jí)的方法來(lái)代替。下面是一些代碼示例,展示一些常用的jQuery方法,以及其等價(jià)原生方法。
譯者注:需要注意下面有些原生方法是HTML5引用的,部分瀏覽器可能不能使用。
選擇器
jQuery的核心之一就是能非常方便的取到DOM元素。我們只需輸入CSS選擇字符串,便可以得到匹配的元素。但在大多數(shù)情況下,我們可以用簡(jiǎn)單的原生代碼達(dá)到同樣的效果。
復(fù)制代碼 代碼如下:
//----得到頁(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í)這里面是有些問題的,document.querySelectorAll和jQuery選擇器還是有區(qū)別的,前者返回的是一個(gè)NodeList,而后者返回的是一個(gè)類數(shù)組對(duì)象。
DOM操作
jQuery還在DOM操作上頻繁使用,例如插入或者刪除元素。我們也可以使用原生方法來(lái)進(jìn)行這些操作,你會(huì)發(fā)現(xiàn)這需要寫額外的代碼,當(dāng)然也可以寫自己的輔助函數(shù)來(lái)讓使用起來(lái)更容易。下面是一些將元素插入到頁(yè)面中的例子。
復(fù)制代碼 代碼如下:
//----插入元素----
/* 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)單的辦到。
復(fù)制代碼 代碼如下:
// 得到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)單快速,并且沒有任何不必要的代碼。
復(fù)制代碼 代碼如下:
// 得到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";
相關(guān)文章
jquery輕量級(jí)數(shù)字動(dòng)畫插件countUp.js使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)滾動(dòng)數(shù)字增加插件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10jQuery接受后臺(tái)傳遞的List的實(shí)例詳解
這篇文章主要介紹了jQuery接受后臺(tái)傳遞的List的實(shí)例詳解的相關(guān)資料,這里提供了前臺(tái)代碼和后臺(tái)代碼的實(shí)現(xiàn),需要的朋友可以參考下2017-08-08一步一步教你寫一個(gè)jQuery的插件教程(Plugin)
我將會(huì)在下面的例子中一個(gè)一個(gè)的說(shuō)明上面這幾個(gè)條件,做完這些事情后我們就會(huì)創(chuàng)建一個(gè)高亮顯示text的簡(jiǎn)單插件。2009-09-09JQUERY 設(shè)置SELECT選中項(xiàng)代碼
本篇文章主要是對(duì)JQUERY 設(shè)置SELECT選中項(xiàng)的代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02運(yùn)用jQuery定時(shí)器的原理實(shí)現(xiàn)banner圖片切換
banner圖片切換效果,在一些企業(yè)網(wǎng)站上經(jīng)常會(huì)碰到,本文運(yùn)用jQuery定時(shí)器的原理實(shí)現(xiàn)banner圖片切換,感興趣的朋友可以學(xué)習(xí)下2014-10-10詳談jQuery Ajax(load,post,get,ajax)的用法
下面小編就為大家?guī)?lái)一篇詳談jQuery Ajax(load,post,get,ajax)的用法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03jQuery實(shí)現(xiàn)的卷簾門滑入滑出效果【案例】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的卷簾門滑入滑出效果,結(jié)合具體實(shí)例形式分析了jQuery事件綁定及slideToggle方法實(shí)現(xiàn)滑入滑出效果相關(guān)操作技巧,需要的朋友可以參考下2019-02-02