[[73544]]

jQuery 的體積在不斷的增大。新功能要不斷增加，這是必然結(jié)果。雖然從版本1.8.3開(kāi)始的瘦身效果明顯，但不可否認(rèn)的是，對(duì)于移動(dòng)手機(jī)端的網(wǎng)頁(yè)開(kāi)發(fā)，它仍然是不可接受的。當(dāng)然，jQuery不是鐵板一塊，你可以對(duì)它進(jìn)行定制，只打包進(jìn)你想要的組件，但其中的一些用來(lái)兼容老式瀏覽器的代碼你無(wú)法去除。

就我的個(gè)人習(xí)慣來(lái)說(shuō)，不管開(kāi)發(fā)什么項(xiàng)目，即使是一個(gè)很簡(jiǎn)單的demo，我做的***件事就是引入jQuery，這樣做主要是想使用它提供的DOM選擇器功能。對(duì)于一些像IE6/IE7這樣的老式瀏覽器，這種做法是顯而易見(jiàn)的，但是，如今現(xiàn)代瀏覽器里已經(jīng)內(nèi)置了完整的DOM選擇器功能，能讓你使用原生的瀏覽器提供的方法來(lái)實(shí)現(xiàn)jQuery的功能。

document.queryselector

這里說(shuō)的現(xiàn)代瀏覽器是指火狐、谷歌、Opera、Safri等新生代瀏覽器，如果是IE，你需要至少是IE8或以上。你可以簡(jiǎn)單的將document.querySelector()函數(shù)映射為$，它能返回在DOM中找到的***個(gè)匹配選擇條件的元素。任何的CSS選擇符都可以作為它的參數(shù)。

注意：IE 8只支持 CSS2.1標(biāo)準(zhǔn)的選擇器

<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>  
 
  // 創(chuàng)建全局的 '$' 變量  
  window.$ = function(selector) {  
    return document.querySelector(selector);  
  };  
 
  (function() {  
    // 通過(guò)id查找item1，將它的背景顏色修改為淺紅  
    var item = $("#salmon").style.backgroundColor="salmon";  
    console.log(item);  
  }());    
</script>  

你需要使用原生的“style”方法，而且這里不能使用jQuery里的鏈?zhǔn)秸{(diào)用。console.log()輸出的將會(huì)是backgroundColor方法返回的“salmon”。

原生DOM節(jié)點(diǎn)有時(shí)候會(huì)比封裝后的jQuery對(duì)象更好用。例如，如果你想修改一個(gè)圖片的src屬性，比較一下下面使用jQuery的做法和直接使用DOM節(jié)點(diǎn)的做法。

// jQuery方式  
$("#picture").attr("src", "http://placekitten.com/200/200");  
 
//使用將querySelector映射為$的原生js方式  
$("#picture").src = "http://placekitten.com/200/200";  

DOM對(duì)象能讓你直接訪問(wèn)圖片的src屬性，相反，所有的jQuery對(duì)象都需要你通過(guò)attr函數(shù)來(lái)操作。

document.querySelector方法只返回一個(gè)元素。如果你的選擇目標(biāo)是一堆元素，它只會(huì)返回符合條件的***個(gè)節(jié)點(diǎn)。要想返回所有節(jié)點(diǎn)，你需要使用document.querySelectorAll方法。

document.queryselectorall

一個(gè)很巧妙的做法是將querySelector映射為$，而將querySelectorAll函數(shù)映射為$$。但它返回的是一個(gè)節(jié)點(diǎn)列表，不如 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++;  
    }  
 
    // 添加一些額外的屬性，讓它更像一個(gè)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項(xiàng)，修改字體大小  
    $("#green").style.fontSize = "2em";  
 
    // 通過(guò)id查找，修改背景色  
    $$("li").each(function() {  
      this.style.backgroundColor = this.id;  
    });  
  }());  
 
</script> 

注意，IE8是不支持將一個(gè)nodeList轉(zhuǎn)換為Array的。

classList

使用jQuery對(duì)CSS類操作十分方便，幸運(yùn)的是，現(xiàn)代瀏覽器里也內(nèi)置了一下方法能夠很方便的操作它們，主要用到了classList對(duì)象。下面是一些基本操作兩種方式的對(duì)比。

window.$ = function(selector) {  
  return document.querySelector(selector);  
};  
 
//----增加CSS類------  
 
/* jQuery */ 
$(".main-content").addClass("someClass");  
 
/* 等效內(nèi)置方法 */ 
$(".main-content").classList.add("someClass");  
 
//----刪除一個(gè)CSS類-----  
 
/* jQuery */ 
$(".main-content").removeClass("someClass");  
 
/* 等效內(nèi)置方法 */ 
$(".main-content").classList.remove("someClass");  
 
//----判斷是否存在一個(gè)CSS類---  
 
/* jQuery */ 
if($(".main-content").hasClass("someClass"))  
 
/* 等效內(nèi)置方法 */ 
if($(".main-content").classList.contains("someClass")) 

相對(duì)于jQuery提供大量豐富的方法，上面說(shuō)的這幾個(gè)現(xiàn)代瀏覽器里內(nèi)置的功能顯得很簡(jiǎn)單，但如果項(xiàng)目中的要求不高，這些替代方法能大大的減少你的應(yīng)用依賴。

***要提醒的是，這些內(nèi)置方法在不同的瀏覽器和不同的版本中支持程度不一樣，下面是它們的支持程度參考表。

附圖1：各種瀏覽器對(duì)querySelector/querySelectorAll的兼容支持

附圖1：各種瀏覽器對(duì)classlist的兼容支持

參考資料：

1. 5 Things You Should Stop Doing With jQuery

2. Native equivalents of jQuery functions

3. http://caniuse.com

原文鏈接：http://www.aqee.net/native-methods-jquery/