{"id":270915,"date":"2015-12-22T22:47:02","date_gmt":"2015-12-22T19:47:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=270915"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=270915","title":{"rendered":"bala.js \u2014 \u0443\u0431\u0438\u0439\u0446\u0430 jQuery \u0432 420 \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u0445 \u043a\u043e\u0434\u0430 *"},"content":{"rendered":"<p>       * \u042d\u0442\u043e \u0448\u0443\u0442\u043a\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/20a\/b8a\/006\/20ab8a006aaaab36cf500e2a3a0baed3.png\" alt=\"image\"\/><br \/>  (\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0430 \u0433\u0434\u0435-\u0442\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435)<\/p>\n<p>  <a href=\"https:\/\/github.com\/finom\/bala\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><\/p>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442.<\/p>\n<p>  \u0423\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 6, 7, 8 \u041e\u0441\u043b\u043e\u0432 \u0438 \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f jQuery, DOM API \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0435\u0434\u0438\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443, \u043d\u043e \u044f \u0432\u0441\u0451 \u0442\u0430\u043a \u0436\u0435 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e VanillaJS \u2014 \u044d\u0442\u043e \u0434\u043b\u0438\u043d\u043d\u0430\u044f \u043a\u043e\u043b\u0431\u0430\u0441\u0430.<\/p>\n<p>  \u041c\u043e\u043b, \u0437\u0430\u0447\u0435\u043c \u043c\u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"javascript\">document.querySelector('.selector'); <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u044f \u043c\u043e\u0433\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"javascript\">$('.selector'); <\/code><\/pre>\n<p>  \u042f \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u044d\u0442\u0438\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u0435\u043b\u0430\u044e\u0449\u0443\u044e \u0432\u044b\u0431\u043e\u0440\u043a\u0443, \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ selects one node matched given selector function $(selector, ctx) { \treturn (ctx || document).querySelector(selector); }  \/\/ selects all nodes matched given selector function $$(selector, ctx) { \treturn [].slice.call((ctx || document).querySelectorAll(selector)); } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432. \u0414\u043b\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u044e\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u041d\u043e \u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0441\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 (Zepto, jQuery).<\/p>\n<p>  \u00ab\u0414\u0432\u0438\u0436\u0435\u043d\u0438\u0435\u00bb \u043f\u0440\u043e\u0442\u0438\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f jQuery \u0438 \u0437\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 DOM \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0443\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u0434\u0432\u0430 \u0441\u0430\u043c\u044b\u0445 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u0430 <a href=\"http:\/\/youmightnotneedjquery.com\/\">youmightnotneedjquery<\/a> \u0438 <a href=\"http:\/\/vanilla-js.com\/\">vanilla-js<\/a>. \u041e\u0431\u0430 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044e\u0442 \u043d\u043e\u0432\u0438\u0447\u043a\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430\u043c\u0438. vanilla-js \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0443\u0436\u0430\u0441\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f AJAX \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0432\u0442\u043e\u0440\u043e\u0439 \u0433\u0440\u0435\u0448\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0441\u043f\u043e\u0449\u0430\u0434\u043d\u044b\u043c XMLHttpRequest. \u041e\u0431\u0430 \u0441\u0430\u0439\u0442\u0430 \u043d\u0438 \u0441\u043b\u043e\u0432\u0430 \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043e Fetch API. <\/p>\n<p>  \u0425\u043e\u0442\u044f, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f, \u0438 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u0432\u0441\u0451 \u0433\u043b\u0430\u0434\u043a\u043e. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f transition, \u0445\u043e\u0442\u044f CSS Animations \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0434\u0430\u0432\u043d\u043e \u0438, \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, <a href=\"https:\/\/developers.google.com\/web\/updates\/2014\/05\/Web-Animations-element.animate-is-now-in-Chrome-36\">Web Animations JavaScript API<\/a> \u0443\u0436\u0435 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0425\u0440\u043e\u043c\u0435 \u0438 \u0424\u0430\u0439\u0435\u0440\u0444\u043e\u043a\u0441\u0435 \u0438 \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p>  ***<\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e DOM \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u044f \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0441 \u0448\u0443\u0442\u043e\u0447\u043d\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/github.com\/finom\/balalaika\">balalaika.js<\/a>. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0431\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430 \u2014 jQuery-\u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u043c\u0438\u043a\u0440\u043e\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0441 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u0432: <code>on<\/code>, <code>off<\/code>, <code>is<\/code>, <code>extend<\/code>.<\/p>\n<p>  \u041d\u043e \u0438 \u043e\u043d\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0430. \u041c\u0435\u0442\u043e\u0434 <code>is<\/code> \u043f\u043e\u0442\u0435\u0440\u044f\u043b \u0441\u0432\u043e\u044e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Element\/matches\">matches<\/a> \u0441\u0442\u0430\u043b \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u043c. <code>extend<\/code> \u0441\u0430\u043c\u043e\u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u043b\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 JavaScript \u043f\u0440\u0438\u0448\u0435\u043b <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/assign\">Object.assign<\/a>, <code>on<\/code> \u0438 <code>off<\/code> \u043f\u0440\u043e\u0441\u0442\u043e-\u043d\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043f\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u043e\u0437\u0432\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435: \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438.<\/p>\n<p>  \u042f \u0440\u0435\u0448\u0438\u043b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0432\u044b\u043f\u0438\u043b\u0438\u0432 \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0443 \u0437\u0430 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043b\u043e\u043c\u0430\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 \u0431\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u043e\u0439, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0435\u0451 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00abbala\u00bb \u2014 \u043e\u0431\u0440\u0443\u0431\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u0442\u0430\u0440\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 (\u043a\u0430\u043a \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430), \u2014 \u00ab\u043f\u0443\u043b\u044f\u00bb \u043f\u043e-\u0438\u0441\u043f\u0430\u043d\u0441\u043a\u0438.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0435\u0433\u043e, \u0446\u0435\u043b\u044c\u044e bala.js (\u043f\u0440\u0438\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0431\u0443\u043a\u0432\u0443 \u00ab\u0435\u00bb \u0441\u0442\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442\u0441\u044f, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043f\u0440\u0438 \u0434\u0435\u0442\u044f\u0445) \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u00ab\u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 \u043a VanillaJS\u00bb. \u042f \u043e\u0447\u0435\u043d\u044c \u043b\u044e\u0431\u043b\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043d\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 DOM Element.<\/p>\n<pre><code class=\"javascript\">myAwesomeLib(document.getElementByID('block')); <\/code><\/pre>\n<p>  \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043d\u0435 \u0431\u044b \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0438\u043c\u0435\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439: \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c NodeList \u0438\u043b\u0438, \u043d\u0430 \u0445\u0443\u0434\u043e\u0439 \u043a\u043e\u043d\u0435\u0446, \u0438\u043d\u0441\u0442\u0430\u043d\u0441 jQuery. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0432 \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0443 420 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043a\u043e\u0434\u0430, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e\u0439.<\/p>\n<h4>\u0427\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e?<\/h4>\n<p>  \u041a\u0440\u0430\u0439\u043d\u0435 \u0447\u0430\u0441\u0442\u043e, \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u043a\u0435, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u043d\u043e\u0434\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 <code>appendChild<\/code>). \u041d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u043d\u0438\u043a\u043e\u043c\u0443 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f.  <\/p>\n<pre><code class=\"javascript\">$('.selector')[0].appendChild(node); <\/code><\/pre>\n<p>  \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0431\u044b\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <code>$.one<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 <code>null<\/code>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0438\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c  \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u0442\u044b\u0441\u044f\u0447\u0443 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043b\u0443\u0447\u0448\u0435 $.one('.selector').appendChild(node);  <\/code><\/pre>\n<p>  <code>$.one<\/code>, \u043a\u0440\u043e\u043c\u0435 \u0432\u0441\u0435\u0433\u043e, \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u0432\u0443\u043c \u0446\u0435\u043b\u044f\u043c: \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e (\u0432 \u0442\u0430\u043a\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0438\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0432\u0435: $$ \u0438 $) \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">import $ from 'bala'; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">var $ = require('bala'); <\/code><\/pre>\n<h4>\u0427\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043e\u0442 \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0438?<\/h4>\n<p>  <b>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u0441\u0451, \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e<\/b>: \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u0443\u0437\u0435\u043b, \u043c\u0430\u0441\u0441\u0438\u0432, NodeList, jQuery \u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 array-like \u043e\u0431\u044a\u0435\u043a\u0442  <\/p>\n<pre><code class=\"javascript\">$('.one, two') $(document.querySelectorAll('.selector')); $(document.body); $(element.children); $(jQuery('.selector')); $([document.querySelector('.one'), document.querySelector('.two')]) <\/code><\/pre>\n<p>  <b>\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435<\/b>  <\/p>\n<pre><code class=\"javascript\">var elements = $('.my-selector', element); <\/code><\/pre>\n<p>  <b>DOM ready<\/b>  <\/p>\n<pre><code class=\"javascript\">$(function() {   alert('DOM is ready'); }); <\/code><\/pre>\n<p>  \u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f DOM ready \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u043a\u043e\u043d\u0446\u0435 \u0442\u0435\u0433\u0430 body  <\/p>\n<pre><code class=\"html\">    ...     &lt;script src=&quot;app.js&quot;&gt;&lt;\/script&gt;   &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  <b>\u041f\u0430\u0440\u0441\u0438\u043d\u0433<\/b>  <\/p>\n<pre><code class=\"javascript\">var div = $('&lt;div&gt;&lt;span class=&quot;yeah&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;'); <\/code><\/pre>\n<p>  <b>\u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/b><br \/>  \u0414\u043b\u044f \u043f\u0435\u0440\u0441\u0438\u043d\u0433\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u043c\u044f \u0442\u0435\u0433\u0430-\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f (\u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438), \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 <code>td<\/code> \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>tr<\/code>, \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 <code>tr<\/code> \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>tbody<\/code>, \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 <code>option<\/code> \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>select<\/code>.  <\/p>\n<pre><code class=\"javascript\">var cells = $('&lt;td&gt;foo&lt;\/td&gt;&lt;td&gt;bar&lt;\/td&gt;', 'tr'); <\/code><\/pre>\n<p>  <b>\u041f\u043b\u0430\u0433\u0438\u043d\u044b<\/b><br \/>  \u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c bala.js \u043c\u043e\u0436\u043d\u043d\u043e \u043a\u0430\u043a \u0438 \u043b\u044e\u0431\u0443\u044e \u0434\u0440\u0443\u0433\u0443\u044e jQuery-\u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.  <\/p>\n<pre><code class=\"javascript\">$.fn.toggle = function(boolean) {   this.forEach(function(item) {     item.hidden = boolean;   }); };  $('.button').toggle(false); \/\/ hides all buttons <\/code><\/pre>\n<h4>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/h4>\n<p>  <b>\u041a\u0430\u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/b>  <\/p>\n<pre><code class=\"javascript\">&lt;script&gt; $=function(d,e,c,f,g){c=function(a,b){return new f(a,b)};f=function(a,b){e.push.apply(this,a?a.nodeType||a==window?[a]:&quot;&quot;+a===a?\/&lt;\/.test(a)?((g=d.createElement(b||&quot;q&quot;)).innerHTML=a,g.children):(b&&c(b)[0]||d).querySelectorAll(a):\/f\/.test(typeof a)?\/c\/.test(d.readyState)?a():d.addEventListener(&quot;DOMContentLoaded&quot;,a):a:e);return this};c.fn=f.prototype=e;c.one=function(a,b){return c(a,b)[0]||null};return c}(document,[]); &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;script&gt;     $(function() {         alert($('.my-selector').length);     }); &lt;\/script&gt; <\/code><\/pre>\n<p>  <b>\u041a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 IIFE<\/b>  <\/p>\n<pre><code class=\"javascript\">(function(win, $) {     \/\/ your code starts here     $(function() {         alert($('.my-selector').length);     });   \/\/ your code ends here })(window, function(d,e,c,f,g){c=function(a,b){return new f(a,b)};f=function(a,b){e.push.apply(this,a?a.nodeType||a==window?[a]:&quot;&quot;+a===a?\/&lt;\/.test(a)?((g=d.createElement(b||&quot;q&quot;)).innerHTML=a,g.children):(b&&c(b)[0]||d).querySelectorAll(a):\/f\/.test(typeof a)?\/c\/.test(d.readyState)?a():d.addEventListener(&quot;DOMContentLoaded&quot;,a):a:e);return this};c.fn=f.prototype=e;c.one=function(a,b){return c(a,b)[0]||null};return c}(document,[])); <\/code><\/pre>\n<p>  <b>\u041c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c bala.js \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e NPM<\/b>  <\/p>\n<pre><code class=\"bash\">npm install --save balajs <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432<\/h4>\n<p>  <b>\u041f\u0435\u0440\u0435\u0431\u043e\u0440<\/b><br \/>  True-way  <\/p>\n<pre><code class=\"javascript\">for(let element of $('.button')) {   console.log(element); } <\/code><\/pre>\n<p>  \u0438\u043b\u0438 old-school-way  <\/p>\n<pre><code class=\"javascript\">$('.button').forEach(function(element) {   console.log(element); }); <\/code><\/pre>\n<p>  <b>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439<\/b>  <\/p>\n<pre><code class=\"javascript\">$('.my-selector').forEach(function(element) {     element.style.color = 'red'; }); <\/code><\/pre>\n<p>  \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:  <\/p>\n<pre><code class=\"javascript\">$.one('.my-selector').style.color = 'red'; <\/code><\/pre>\n<p>  <b>\u0414\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/b><br \/>  \u0421 \u043c\u0435\u0442\u043e\u0434\u043e\u043c closest \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u0439 while.  <\/p>\n<pre><code class=\"javascript\">$('.my-selector').forEach(function(element) {   element.addEventListener('click', function(evt) {     if(this.contains(evt.target.closest('.delegated-selector'))) {       alert('yep!');     }   }); }); <\/code><\/pre>\n<p>  \u0438\u043b\u0438 \u0442\u0430\u043a  <\/p>\n<pre><code class=\"javascript\">$.one('.my-selector').addEventListener('click', function(evt) {   if(this.contains(evt.target.closest('.delegated-selector'))) {     alert('yep!');   } }); <\/code><\/pre>\n<p>  <b>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/b>  <\/p>\n<pre><code class=\"javascript\">$('.my-selector').forEach(function(element) {     element.remove(); }); <\/code><\/pre>\n<p>  <b>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/b>  <\/p>\n<pre><code class=\"javascript\">$.one('.my-selector').remove(); <\/code><\/pre>\n<p>  \u0412\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/WebReflection\/dom4\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b DOM4<\/a> \u0434\u043b\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 <code>element.remove<\/code> \u0438 <code>element.closest<\/code>.<\/p>\n<p>  (\u042d\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u0441\u043b\u0443\u0433\u043e\u0439 bala.js. \u042d\u0442\u043e \u0437\u0430\u0441\u043b\u0443\u0433\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439.)<\/p>\n<p>  \u0412\u0430\u043c \u0432\u0441\u0451 \u0435\u0449\u0435 \u043d\u0443\u0436\u0435\u043d jQuery?<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0434\u0430, \u043d\u0438\u0436\u0435 \u0435\u0449\u0435 \u0434\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430.<\/p>\n<p>  <b>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b><\/p>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Web Aimations API \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 JS \u043a\u043e\u0434\u0435 (\u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0442\u0430\u043a\u043e\u0432\u044b\u0435 \u0438\u0437 jQuery, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f GPU \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044e).<\/p>\n<pre><code class=\"javascript\">\/\/ \u043a\u043e\u0434 \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d \u0438\u0437 \u0433\u0443\u0433\u043b\u043e\u0432\u0441\u043a\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 $.one('.my-selector').animate([   {transform: 'translate(' + snowLeft + 'px, -100%)'},   {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], {   duration: 1500,   iterations: 10,   delay: 300 });  <\/code><\/pre>\n<p>  \u0421\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439, \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (\u043d\u0435 \u0441\u0447\u0442\u0438\u0430\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/web-animations\/web-animations-js\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b Web Animations API<\/a>).<\/p>\n<p>  <b>Ajax<\/b><br \/>  \u0410 \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443. Fetch API \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0443\u0441\u0442\u0440\u0430\u0448\u0430\u044e\u0449\u0438\u0439 XMLHttpRequest.  <\/p>\n<pre><code class=\"javascript\">fetch('user.json')   .then(function(response) {     return response.json();    })   .then(function(user) {     console.log(user);   })   .catch(alert); <\/code><\/pre>\n<p>  \u0412\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/github\/fetch\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b Fetch API<\/a>.<\/p>\n<p>  \u0412\u0441\u0451 \u0435\u0449\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c jQuery? \u0421\u0435\u0440\u044c\u0435\u0437\u043d\u043e?<\/p>\n<p>  \u0414\u0430, \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u0442\u0430\u0440\u044b\u0445 Internet Explorer \u0438 Webkit-based \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b. \u041d\u043e \u043d\u0435 \u0441\u043f\u0435\u0448\u0438\u0442\u0435 \u043a\u0438\u0434\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u0430\u0448\u043a\u0430\u043c\u0438 \u0438 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e Internet Explorer, \u0441 \u043d\u0435\u0434\u0430\u0432\u043d\u0438\u0445 \u043f\u043e\u0440, \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u0445\u043e\u0440\u043e\u0448\u043e, \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044f \u0441\u0430\u043c\u044b\u0435 \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u044b\u0435 \u0444\u0438\u0447\u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u043b\u044e\u0434\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0435\u0441\u044f Blink \u0438 V8, \u043e\u0431\u0435\u0449\u0430\u044f \u0432 \u0441\u043a\u043e\u0440\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432\u0441\u0435\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u0434\u043e 11; \u043b\u044e\u0434\u0438 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 \u0430\u0439\u0444\u043e\u043d\u044b \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0430\u0444\u0430\u0440\u0438\u2026<\/p>\n<p>  \u0410 \u0435\u0449\u0435, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c: <a href=\"https:\/\/cdn.polyfill.io\/v2\/docs\/\">polyfill.io<\/a>. \u0420\u0435\u0431\u044f\u0442\u0430 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044f\u0442 \u0444\u0438\u0447\u0438 \u0433\u043b\u044f\u0434\u044f \u043d\u0430 User-Agent \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u043f\u0430\u0441\u0438\u0431\u043e  <a href=\"http:\/\/habrahabr.ru\/users\/chico\/\" class=\"user_link\">chico<\/a> \u0438  <a href=\"http:\/\/habrahabr.ru\/users\/rreverser\/\" class=\"user_link\">RReverser<\/a> \u0437\u0430 \u043d\u0430\u0445\u043e\u0434\u043a\u0443.<\/p>\n<p>  \u0427\u0435\u0440\u0435\u0437 \u0433\u043e\u0434-\u0434\u0432\u0430 \u0432 \u044d\u0442\u0438\u0445 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u0430\u0445 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u0434\u044b, \u043d\u043e \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435, \u0438 \u0432\u0430\u0448 \u043f\u043e\u043a\u043e\u0440\u043d\u044b\u0439 \u0441\u043b\u0443\u0433\u0430, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u043d\u043e\u0432\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u0442 \u043f\u043e\u0441\u0442 \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0432\u0430\u043c \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 jQuery \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442 \u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 ba.js.               <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/273751\/\"> http:\/\/habrahabr.ru\/post\/273751\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       * \u042d\u0442\u043e \u0448\u0443\u0442\u043a\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/20a\/b8a\/006\/20ab8a006aaaab36cf500e2a3a0baed3.png\" alt=\"image\"\/><br \/>  (\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0430 \u0433\u0434\u0435-\u0442\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435)<\/p>\n<p>  <a href=\"https:\/\/github.com\/finom\/bala\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><\/p>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442.<\/p>\n<p>  \u0423\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 6, 7, 8 \u041e\u0441\u043b\u043e\u0432 \u0438 \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f jQuery, DOM API \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0435\u0434\u0438\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443, \u043d\u043e \u044f \u0432\u0441\u0451 \u0442\u0430\u043a \u0436\u0435 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e VanillaJS \u2014 \u044d\u0442\u043e \u0434\u043b\u0438\u043d\u043d\u0430\u044f \u043a\u043e\u043b\u0431\u0430\u0441\u0430.<\/p>\n<p>  \u041c\u043e\u043b, \u0437\u0430\u0447\u0435\u043c \u043c\u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"javascript\">document.querySelector('.selector'); <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u044f \u043c\u043e\u0433\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"javascript\">$('.selector'); <\/code><\/pre>\n<p>  \u042f \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u044d\u0442\u0438\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u0435\u043b\u0430\u044e\u0449\u0443\u044e \u0432\u044b\u0431\u043e\u0440\u043a\u0443, \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ selects one node matched given selector function $(selector, ctx) { \treturn (ctx || document).querySelector(selector); }  \/\/ selects all nodes matched given selector function $$(selector, ctx) { \treturn [].slice.call((ctx || document).querySelectorAll(selector)); } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432. \u0414\u043b\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u044e\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-270915","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/270915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=270915"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/270915\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=270915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=270915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=270915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}