jquery是现在最流行的javascript工具库。据统计，目前全世界57.3%的网站使用它。也就是说，10个网站里面，有6个使用jquery。如果只考察使用工具库的网站制作，这个比例就会上升到惊人的91.7%。
虽然jquery如此受欢迎，但是它臃肿的体积也让人头痛不已。jquery 2.0的原始大小为235kb，优化后为81kb；如果是支持ie6、7、8的jquery 1.8.3，原始大小为261kb，优化后为91kb。
这样的体积，即使是宽带环境，完全加载也需要1秒或更长，更不要说移动设备了。这意味着，如果你使用了jquery，用户至少延迟1秒，才能看到网页效果。考虑到本质上，jquery只是一个操作dom的工具，我们不仅要问：如果只是为了几个网页特效，是否有必要动用这么大的库？
2006年，jquery诞生的时候，主要用于消除不同浏览器的差异（主要是ie6），为开发者提供一个简洁的统一接口。相比当时，如今的情况已经发生了很大的变化。ie的市场份额不断下降，以ecmascript为基础的javascript标准语法，正得到越来越广泛的支持。开发者直接使用javscript标准语法，就能同时在各大浏览器运行，不再需要通过jquery获取兼容性。
下面就探讨如何用javascript标准语法，取代jquery的一些主要功能，做到jquery-free。
一、选取dom元素
jquery的核心是通过各种选择器，选中dom元素，可以用queryselectorall方法模拟这个功能。
var$=document.queryselectorall.bind(document);这里需要注意的是，queryselectorall方法返回的是nodelist对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方法。如果有需要，可以考虑将nodelist对象转为数组。
mylist=array.prototype.slice.call(mynodelist);二、dom操作
dom本身就具有很丰富的操作方法，可以取代jquery提供的操作方法。
尾部追加dom元素。
//jquery写法$(parent).append($(child)); //dom写法parent.appendchild(child)头部插入dom元素。
//jquery写法$(parent).prepend($(child)); //dom写法parent.insertbefore(child,parent.childnodes[0])删除dom元素。
//jquery写法$(child).remove() //dom写法child.parentnode.removechild(child)三、事件的监听
jquery的on方法，完全可以用addeventlistener模拟。
element.prototype.on=element.prototype.addeventlistener;为了使用方便，可以在nodelist对象上也部署这个方法。
nodelist.prototype.on=function(event,fn){ []['foreach'].call(this,function(el){ el.on(event,fn); }); returnthis; };四、事件的触发
jquery的trigger方法则需要单独部署，相对复杂一些。
element.prototype.trigger=function(type,data){ varevent=document.createevent('htmlevents'); event.initevent(type,true,true); event.data=data||{}; event.eventname=type; event.target=this; this.dispatchevent(event); returnthis; };在nodelist对象上也部署这个方法。
nodelist.prototype.trigger=function(event){ []['foreach'].call(this,function(el){ el['trigger'](event); }); returnthis; };五、document.ready
目前的最佳实践，是将javascript脚本文件都放在页面底部加载。这样的话，其实document.ready方法（jquery简写为$(function)）已经不必要了，因为等到运行的时候，dom对象已经生成了。
六、attr方法
jquery使用attr方法，读写网页元素的属性。
$("#picture").attr("src","http:/to/image");dom元素允许直接读取属性值，写法要简洁许多。
$("#picture").src="http:/to/image";需要注意，input元素的this.value返回的是输入框中的值，链接元素的this.href返回的是绝对url。如果需要用到这两个网页元素的属性准确值，可以用this.getattribute('value')和this.getattibute('href')。
七、addclass方法
jquery的addclass方法，用于为dom元素添加一个class。
$('body').addclass('hasjs');dom元素本身有一个可读写的classname属性，可以用来操作class。
document.body.classname='hasjs'; //ordocument.body.classname+='hasjs'; html 5还提供一个classlist对象，功能更强大（ie 9不支持）。
document.body.classlist.add('hasjs'); document.body.classlist.remove('hasjs'); document.body.classlist.toggle('hasjs'); document.body.classlist.contains('hasjs');八、css
jquery的css方法，用来设置网页元素的样式。
$(node).css("color","red");dom元素有一个style属性，可以直接操作。
element.style.color="red";; //orelement.style.csstext+='color:red';九、数据储存
jquery对象可以储存数据。
$("body").data("foo",52);html 5有一个dataset对象，也有类似的功能（ie 10不支持），不过只能保存字符串。
element.dataset.user=json.stringify(user); element.dataset.score=score;十、ajax
jquery的ajax方法，用于异步操作。
$.ajax({ type:"post", url:"some.php", data:{name:"john",location:"boston"} }).done(function(msg){ alert("datasaved:"+msg); });我们可以定义一个request函数，模拟ajax方法。
functionrequest(type,url,opts,callback){ varxhr=newxmlhttprequest(); if(typeofopts==='function'){ callback=opts; opts=null; } xhr.open(type,url); varfd=newformdata(); if(type==='post'&&opts){ for(varkeyinopts){ fd.append(key,json.stringify(opts[key])); } } xhr.onload=function(){ callback(json.parse(xhr.response)); }; xhr.send(opts?fd:null); }然后，基于request函数，模拟jquery的get和post方法。
varget=request.bind(this,'get'); varpost=request.bind(this,'post');十一、