努力戒掉jQuery（未完待更）

框架和库确实方便，形形色色，各有各的特长。但是用久了不免产生依赖性，尤其是jQuery库，因为简化了很多JS的操作而备受青睐，甚至现在大多框架里都有引入jQuery库。甚至有人开始说：jQuery不是库！但它不是库是什么？又有人说：语言本身不就是已经写好的最基本的一个库或者框架么？你偏要这么说，我也无言以对，你怎么不去搭门电路或是研究夸克里面是不是有宇宙……本次，让我们来探究JavaScript语言本身最质朴的写法，不被框架或是库的语法糖所约束。

1. $(" ") 选择器

---

jQuery中的选择器非常轻便：

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

而原生JS需要写一串：

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

但其实，现代浏览器有了更强大的原生JS选择器，它可以有和jQuery选择器一样的写法：

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

/* 更多选择 */
var exampleP = document.querySelector("p.example");              //返回class="example" 的第一个 <p> 元素
var h2h3 = document.querySelector("h2, h3");                     //支持和jQuery一样的多选
var aTarget = document.querySelector("a[target]");               //返回有 "target" 属性的第一个 <a> 元素

2. eq(), each(), index() 直接选择索引 或 遍历选择索引

---

在jQuery里，想要操作特定的节点，是可以像JS那样直接用类似数组的方式进行选择

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

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

也可以进行遍历来筛选

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

其实这种遍历操作的思想很方便：

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

然后用原生JS对这样的操作就会很麻烦了:

/* by_js.js */
var divs= document.getElement("div");
for(var i = 0; i < 4; i++) {
    divs[i] = i;                            //使元素暂时停留在这一项上
    divs[i].onclick = function() {
        cross[num].balabala
        num = this.index;                   //使用另一个变量num保存此项索引，因为解释结束时在此函数作用域内 i 会一直为4
    };
}

不过，虽然JS中有map()遍历函数，但这个只对Array数组有效，对于对象可以用products转换成数组来使用map()。但是这可是逆天语言JS啊，数组有这个方法，那就借过来用用好啦。

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

我们可以看到，在这里我们用call()方法借用了Array中的map()遍历方法来遍历所有选择的div节点，真是可怕。