框架和庫(kù)確實(shí)方便，形形色色，各有各的特長(zhǎng)。但是用久了不免產(chǎn)生依賴性，尤其是jQuery庫(kù)，因?yàn)楹?jiǎn)化了很多JS的操作而備受青睞，甚至現(xiàn)在大多框架里都有引入jQuery庫(kù)。甚至有人開(kāi)始說(shuō)：jQuery不是庫(kù)！但它不是庫(kù)是什么？又有人說(shuō)：語(yǔ)言本身不就是已經(jīng)寫(xiě)好的最基本的一個(gè)庫(kù)或者框架么？你偏要這么說(shuō)，我也無(wú)言以對(duì)，你怎么不去搭門(mén)電路或是研究夸克里面是不是有宇宙……本次，讓我們來(lái)探究JavaScript語(yǔ)言本身最質(zhì)樸的寫(xiě)法，不被框架或是庫(kù)的語(yǔ)法糖所約束。

1. $(" ") 選擇器

jQuery中的選擇器非常輕便：

/* by_jq.js */
$("div")               //TagName，所有
$(".div-class")        //class選擇，所有
$("#div_id")           //id選擇

而原生JS需要寫(xiě)一串：

/* by_js.js */
var div = document.getElementsByTagName("div");                   //返回匹配到的，所有
var divClass = document.getElementsByClassName("div-class");      //返回匹配到的，所有
var divId = document.getElementbyId("div_id");                    //返回匹配到的那一個(gè)

但其實(shí)，現(xiàn)代瀏覽器有了更強(qiáng)大的原生JS選擇器，它可以有和jQuery選擇器一樣的寫(xiě)法：

/* by_js.js */
var div = document.querySelector(".div-class");
var divClass2 = document.querySelector(".div-class");             //返回匹配到的，第一個(gè)
var divClass3 = document.querySelectorAll(".div-class");          //返回到匹配的，所有
var divId = document.querySelector("#div_id");

/* 更多選擇 */
var exampleP = document.querySelector("p.example");              //返回class="example" 的第一個(gè) <p> 元素
var h2h3 = document.querySelector("h2, h3");                     //支持和jQuery一樣的多選
var aTarget = document.querySelector("a[target]");               //返回有 "target" 屬性的第一個(gè) <a> 元素

2. eq(), each(), index() 直接選擇索引 或 遍歷選擇索引

在jQuery里，想要操作特定的節(jié)點(diǎn)，是可以像JS那樣直接用類似數(shù)組的方式進(jìn)行選擇

/* by_js.js */
var div = document.getElementsByTagName("div");
div[0].style.width = 233 + "px";

/* by_jq.js */
$("div").eq(0).css("width", "233px");

也可以進(jìn)行遍歷來(lái)篩選

/* by_jq.js */
$("div").each(function(){
    if($(this).index() == 0) {          //判斷一下是不是我們想要的第一個(gè)<div></div>
        $(this).css("width", "233px");
    }
});

其實(shí)這種遍歷操作的思想很方便：

/* by_jq.js */
$("div").each(function(){
    $(this).click(function() {
        ...
    });
});

然后用原生JS對(duì)這樣的操作就會(huì)很麻煩了:

/* by_js.js */
var divs= document.getElement("div");
for(var i = 0; i < 4; i++) {
    divs[i] = i;                            //使元素暫時(shí)停留在這一項(xiàng)上
    divs[i].onclick = function() {
        cross[num].balabala
        num = this.index;                   //使用另一個(gè)變量num保存此項(xiàng)索引，因?yàn)榻忉尳Y(jié)束時(shí)在此函數(shù)作用域內(nèi) i 會(huì)一直為4
    };
}

不過(guò)，雖然JS中有map()遍歷函數(shù)，但這個(gè)只對(duì)Array數(shù)組有效，對(duì)于對(duì)象可以用products轉(zhuǎn)換成數(shù)組來(lái)使用map()。但是這可是逆天語(yǔ)言JS啊，數(shù)組有這個(gè)方法，那就借過(guò)來(lái)用用好啦。

/* by_js.js */
var divs= document.querySelectorAll("div");
Array.prototype.map.call(divs, function(item) {
    item.onclick = function() {
        ...
    }
});

我們可以看到，在這里我們用call()方法借用了Array中的map()遍歷方法來(lái)遍歷所有選擇的div節(jié)點(diǎn)，真是可怕。