現代瀏覽器中內置的可以等效替代jQuery的功能
jQuery的體積在不斷的增大。新功能要不斷增加，這是必然結果。雖然從版本1.8.3開始的瘦身效果明顯，但不可否認的是，對于移動手機端的網 頁開發，它仍然是不可接受的。當然，jQuery不是鐵板一塊，你可以對它進行定制，只打包進你想要的組件，但其中的一些用來兼容老式瀏覽器的代碼你無法 去除。
就我的個人習慣來說，不管開發什么項目，即使是一個很簡單的demo，我做的第一件事就是引入jQuery，這樣做主要是想使用它提 供的DOM選擇器功能。對于一些像IE6/IE7這樣的老式瀏覽器，這種做法是顯而易見的，但是，如今現代瀏覽器里已經內置了完整的DOM選擇器功能，能 讓你使用原生的瀏覽器提供的方法來實現jQuery的功能。
document.queryselector
這里說的現代瀏覽器是指火狐、谷歌、Opera、Safri等新生代瀏覽器，如果是IE，你需要至少是IE8或以上。你可以簡單的將document.querySelector()函數映射為$，它能返回在DOM中找到的第一個匹配選擇條件的元素。任何的CSS選擇符都可以作為它的參數。
注意：IE 8只支持 CSS2.1標準的選擇器
<div class="container">
<ul>
<li id="pink">Pink</li>
<li id="salmon">Salmon</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="red">Red</li>
</ul>
</div>
<script>
// 創建全局的 '$' 變量
window.$ = function(selector) {
return document.querySelector(selector);
};
(function() {
// 通過id查找item1，將它的背景顏色修改為淺紅
var item = $("#salmon").style.backgroundColor="salmon";
console.log(item);
}());
</script></pre>
你需要使用原生的“style”方法，而且這里不能使用jQuery里的鏈式調用。console.log()輸出的將會是backgroundColor方法返回的“salmon”。
原生DOM節點有時候會比封裝后的jQuery對象更好用。例如，如果你想修改一個圖片的src屬性，比較一下下面使用jQuery的做法和直接使用DOM節點的做法。
// jQuery方式
$("#picture").attr("src", "
//使用將querySelector映射為$的原生js方式
$("#picture").src = "DOM對象能讓你直接訪問圖片的src屬性，相反，所有的jQuery對象都需要你通過attr函數來操作。
document.querySelector方法只返回一個元素。如果你的選擇目標是一堆元素，它只會返回符合條件的第一個節點。要想返回所有節點，你需要使用document.querySelectorAll方法。
document.queryselectorall
一 個很巧妙的做法是將querySelector映射為$，而將querySelectorAll函數映射為$$。但它返回的是一個節點列表，不如 jQuery里返回的Array格式好用，我們可以使用Array.prototype.slice.call(nodeList)方法加工一下，讓它更 方便。
<div class="container">
<ul>
<li id="pink">Pink</li>
<li id="salmon">Salmon</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="red">Red</li>
</ul>
</div>
<script>
window.$ = function(selector) {
return document.querySelector(selector);
};
window.$$ = function(selector) {
var items = {},
results = [],
length = 0,
i = 0;
// 注意，IE8不支持這種做法
results = Array.prototype.slice.call(document.querySelectorAll(selector));
length = results.length;
// add the results to the items object
for ( ; i < length; ) {
items[i] = results[i];
i++;
}
// 添加一些額外的屬性，讓它更像一個Array
items.length = length;
items.splice = [].splice();
// 添加 'each' 方法
items.each = function(callback) {
var i = 0;
for ( ; i < length; ) {
callback.call(items[i]);
i++;
}
}
return items;
};
(function() {
// 查找green項，修改字體大小
$("#green").style.fontSize = "2em";
// 通過id查找，修改背景色
$$("li").each(function() {
this.style.backgroundColor = this.id;
});
}());
</script></pre>
注意，IE8是不支持將一個nodeList轉換為Array的。
classList
使用jQuery對CSS類操作十分方便，幸運的是，現代瀏覽器里也內置了一下方法能夠很方便的操作它們，主要用到了classList對象。下面是一些基本操作兩種方式的對比。
window.$ = function(selector) {
return document.querySelector(selector);
};
//----增加CSS類------
/ jQuery /
$(".main-content").addClass("someClass");
/ 等效內置方法 /
$(".main-content").classList.add("someClass");
//----刪除一個CSS類-----
/ jQuery /
$(".main-content").removeClass("someClass");
/ 等效內置方法 /
$(".main-content").classList.remove("someClass");
//----判斷是否存在一個CSS類---
/ jQuery /
if($(".main-content").hasClass("someClass"))
/ 等效內置方法 /
if($(".main-content").classList.contains("someClass"))</pre>
相對于jQuery提供大量豐富的方法，上面說的這幾個現代瀏覽器里內置的功能顯得很簡單，但如果項目中的要求不高，這些替代方法能大大的減少你的應用依賴。
最后要提醒的是，這些內置方法在不同的瀏覽器和不同的版本中支持程度不一樣，下面是它們的支持程度參考表。
附圖1：各種瀏覽器對querySelector/querySelectorAll的兼容支持
附圖1：各種瀏覽器對classlist的兼容支持
參考資料：
- 5 Things You Should Stop Doing With jQuery
- Native equivalents of jQuery functions
- http://caniuse.com
載自: 外刊IT評論 http://www.aqee.net/
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！