現代瀏覽器中內置的幾個可以等效替代jQuery的功能

作者：佚名 2013-05-27 10:00:24

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

[[73544]]

就我的個人習慣來說，不管開發(fā)什么項目，即使是一個很簡單的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>  
 
  // 創(chuàng)建全局的 '$' 變量  
  window.$ = function(selector) {  
    return document.querySelector(selector);  
  };  
 
  (function() {  
    // 通過id查找item1，將它的背景顏色修改為淺紅  
    var item = $("#salmon").style.backgroundColor="salmon";  
    console.log(item);  
  }());    
</script>

你需要使用原生的“style”方法，而且這里不能使用jQuery里的鏈式調用。console.log()輸出的將會是backgroundColor方法返回的“salmon”。

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

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

DOM對象能讓你直接訪問圖片的src屬性，相反，所有的jQuery對象都需要你通過attr函數來操作。

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

document.queryselectorall

一個很巧妙的做法是將querySelector映射為$，而將querySelectorAll函數映射為$$。但它返回的是一個節(jié)點列表，不如 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>

注意，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"))