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);
- });
- return this;
- };
四、事宜的触发
jQuery的trigger门径则需求零丁布置，相对庞杂一些。
- Element.prototype.trigger = function (type, data) {
- var event = document.createEvent('HTMLEvents');
- event.initEvent(type, true, true);
- event.data = data || {};
- event.eventName = type;
- event.target = this;
- this.dispatchEvent(event);
- return this;
- };
在NodeList对象上也布置这个门径。
- NodeList.prototype.trigger = function (event) {
- []['forEach'].call(this, function (el) {
- el['trigger'](event);
- });
- return this;
- };
五、document.ready
今朝的最好实际，是将JavaScript剧本文件都放在页面底部加载。如许的话，实在document.ready门径(jQuery简写为$(function))曾经没需要要了，由于等到运转的时辰，DOM对象曾经天生了。
六、attr门径
jQuery利用attr门径，读写网页元素的属性。
- $("#picture").attr("src", "http://url/to/image");
DOM元素许可间接读取属性值，写法要简练许多。
- $("#picture").src = "http://url/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';
- // or
- document.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";;
- // or
- element.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( "Data Saved: " + msg );
- });
我们可以或许界说一个request函数，摹拟Ajax门径。
- function request(type, url, opts, callback) {
- var xhr = new XMLHttpRequest();
- if (typeof opts === 'function') {
- callback = opts;
- opts = null;
- }
- xhr.open(type, url);
- var fd = new FormData();
- if (type === 'POST' && opts) {
- for (var key in opts) {
- fd.append(key, JSON.stringify(opts[key]));
- }
- }
- xhr.onload = function () {
- callback(JSON.parse(xhr.response));
- };
- xhr.send(opts ? fd : null);
- }
然后，基于request函数，摹拟jQuery的get和post门径。
- var get = request.bind(this, 'GET');
- var post = request.bind(this, 'POST');
十一、动画
jQuery的animate门径，用于天活泼画功效。
- $foo.animate('slow', { x: '+=10px' })；
jQuery的动画功效，很大部门基于DOM。然则今朝，CSS 3的动画远比DOM壮大，以是可以或许把动画功效写进CSS，然后经由过程操纵DOM元素的class，来显现动画。
- foo.classList.add('animate')；
假如需求对动画利用回调函数，CSS 3也界说了相应的事宜。
- el.addEventListener("webkitTransitionEnd", transitionEnded);
-
- el.addEventListener("transitionend", transitionEnded);
十二、替代计划
由于jQuery体积过大，替代计划层出不穷。
个中，最有名的是zepto.js。它的设想目的是以最小的体积，做到最大兼容jQuery的API。zepto.js 1.0版的原始巨细是55KB，优化后是29KB，gzip紧缩后为10KB。
假如不求最大兼容，只但愿摹拟jQuery的基本功效，那末，min.js优化后只需200字节，而dolla优化后是1.7KB。
另外，jQuery自身接纳模块设想，可以或许只挑选利用自身需求的模块。具体做法拜见它的github网站，或利用公用的Web界面。