努力戒掉jQuery(未完待更)
2016-10-24 本文已影响34人
零度冰华
框架和库确实方便,形形色色,各有各的特长。但是用久了不免产生依赖性,尤其是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节点,真是可怕。