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界面。