1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html lang="ru" xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta name="viewport" content="width=device-width, initial-scale=1" /> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6<title>Ðак подклÑÑиÑÑ jQuery к ÑайÑÑ: CDN, npm, WordPress (2026)</title> 7<meta name="description" content="ÐоÑагово: подклÑÑение jQuery 4.0 и 3.7.1 ÑеÑез CDN, локалÑнÑй Ñайл и npm, в WordPress; как пÑовеÑиÑÑ Ð·Ð°Ð³ÑÑÐ·ÐºÑ Ð¸ иÑпÑавиÑÑ Ð¾ÑÐ¸Ð±ÐºÑ $ is not defined." /> 8<link rel="icon" href="/jqbook.ico" type="image/x-icon" /> 9<link rel="shortcut icon" href="/jqbook.ico" type="image/x-icon" /> 10<link href="/style.css" rel="stylesheet" type="text/css" /> 11<link rel="canonical" href="https://jquerybook.ru/articles/kak-podklyuchit-jquery.html" /> 12<link rel="stylesheet" href="/assets/restore.css?v=1" /> 13<link rel="stylesheet" href="/assets/articles.css?v=1" /> 14<meta property="og:type" content="article" /> 15<meta property="og:locale" content="ru_RU" /> 16<meta property="og:site_name" content="jQueryBook.ru" /> 17<meta property="og:title" content="Ðак подклÑÑиÑÑ jQuery к ÑайÑÑ: CDN, npm, WordPress (2026)" /> 18<meta property="og:description" content="ÐоÑагово: подклÑÑение jQuery 4.0 и 3.7.1 ÑеÑез CDN, локалÑнÑй Ñайл и npm, в WordPress; как пÑовеÑиÑÑ Ð·Ð°Ð³ÑÑÐ·ÐºÑ Ð¸ иÑпÑавиÑÑ Ð¾ÑÐ¸Ð±ÐºÑ $ is not defined." /> 19<meta property="og:url" content="https://jquerybook.ru/articles/kak-podklyuchit-jquery.html" />
20<script type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"Ðак подклÑÑиÑÑ jQuery: CDN, локалÑнÑй Ñайл, npm и WordPress","description":"ÐоÑагово: подклÑÑение jQuery 4.0 и 3.7.1 ÑеÑез CDN, локалÑнÑй Ñайл и npm, в WordPress; как пÑовеÑиÑÑ Ð·Ð°Ð³ÑÑÐ·ÐºÑ Ð¸ иÑпÑавиÑÑ Ð¾ÑÐ¸Ð±ÐºÑ $ is not defined.","inLanguage":"ru","datePublished":"2026-09-26","dateModified":"2026-09-26","mainEntityOfPage":"https://jquerybook.ru/articles/kak-podklyuchit-jquery.html","author":{"@type":"Organization","name":"jQueryBook.ru","url":"https://jquerybook.ru/"},"publisher":{"@type":"Organization","name":"jQueryBook.ru","url":"https://jquerybook.ru/"}}</script>
vendor: 1 bytes, line 20
20
21<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"ÐлавнаÑ","item":"https://jquerybook.ru/"},{"@type":"ListItem","position":2,"name":"СÑаÑÑи","item":"https://jquerybook.ru/articles/"},{"@type":"ListItem","position":3,"name":"ÐодклÑÑение jQuery","item":"https://jquerybook.ru/articles/kak-podklyuchit-jquery.html"}]}</script>
vendor: 1 bytes, line 21
21
22<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"ÐÑда вÑÑавлÑÑÑ Ð¿Ð¾Ð´ÐºÐ»ÑÑение jQuery â в head или пеÑед \u003c/body>?","acceptedAnswer":{"@type":"Answer","text":"Ðба ваÑианÑа ÑабоÑие. Тег в конÑе \u003cbody> (пеÑед ваÑими ÑкÑипÑами) не блокиÑÑÐµÑ Ð¾ÑÑиÑÐ¾Ð²ÐºÑ ÑÑÑаниÑÑ Ð¸ оÑÑаÑÑÑÑ ÑамÑм пÑедÑказÑемÑм ваÑианÑом. Тег в \u003chead> Ñ Ð°ÑÑибÑÑом defer даÑÑ ÑÐ¾Ñ Ð¶Ðµ ÑÑÑекÑ: ÑкÑÐ¸Ð¿Ñ Ð³ÑÑзиÑÑÑ Ð¿Ð°ÑаллелÑно Ñ HTML и вÑполнÑеÑÑÑ Ð¿ÐµÑед DOMContentLoaded, ÑоÑ
ÑанÑÑ Ð¿Ð¾ÑÑдок оÑноÑиÑелÑно дÑÑгиÑ
defer-ÑкÑипÑов. Ðе ÑÑавÑÑе jQuery в \u003chead> без defer и без async â Ñогда бÑаÑÐ·ÐµÑ Ð¾ÑÑÐ°Ð½Ð¾Ð²Ð¸Ñ ÑÐ°Ð·Ð±Ð¾Ñ HTML, пока не ÑкаÑÐ°ÐµÑ Ð¸ не вÑÐ¿Ð¾Ð»Ð½Ð¸Ñ Ñайл."}},{"@type":"Question","name":"Ðожно ли подклÑÑиÑÑ Ð´Ð²Ðµ веÑÑии jQuery на одной ÑÑÑаниÑе?","acceptedA
22nswer":{"@type":"Answer","text":"ТеÑ
ниÑеÑки да, но вÑоÑÐ°Ñ Ð²ÐµÑÑÐ¸Ñ Ð¿ÐµÑезапиÑÐµÑ window.$ и window.jQuery, и плагинÑ, пÑивÑзаннÑе к пеÑвой веÑÑии, могÑÑ ÑломаÑÑÑÑ. ÐÑли ÑÑо неизбежно (напÑимеÑ, Ñема и плагин ÑÑнÑÑ ÑазнÑе веÑÑии), ÑÑÐ°Ð·Ñ Ð¿Ð¾Ñле пеÑвой загÑÑзки ÑоÑ
ÑаниÑе ÐµÑ ÑеÑез var jQuery1 = jQuery.noConflict(true);, а вÑоÑой веÑÑии оÑÑавÑÑе глобалÑнÑе имена. ÐÑавилÑнее â пÑивеÑÑи вÑе ÑаÑÑи ÑайÑа к одной веÑÑии."}},{"@type":"Question","name":"Чем slim-ÑбоÑка оÑлиÑаеÑÑÑ Ð¾Ñ Ð¾Ð±ÑÑной?","acceptedAnswer":{"@type":"Answer","text":"Ð slim-ÑбоÑке Ð½ÐµÑ Ð¼Ð¾Ð´Ñлей Ajax и ÑÑÑекÑов (.animate(), .fadeIn() и Ñ. п.) в лÑбой веÑке. Ð jQuery 4.0 slim дополниÑелÑно лиÑена модÑлей Deferred, Callbacks и Queue, на коÑоÑÑÑ
ÑÑи ÑÑнкÑии оÑнованÑ. ÐÑли ÑÐ°Ð¹Ñ Ð¸ÑполÑзÑÐµÑ ÑолÑко вÑбоÑÐºÑ Ð¸ манипÑлÑÑии Ñ DOM (.addClass(), .attr(), .on()), slim вÑÐ¹Ð´ÐµÑ Ð·Ð°Ð¼ÐµÑно легÑе обÑÑной ÑбоÑки; еÑли нÑÐ¶Ð½Ñ $.ajax() или анимаÑии â беÑиÑе полнÑÑ Ð²ÐµÑÑиÑ."}},{"@type":"Question","name":"ÐÑжно ли подклÑÑаÑÑ jQuery Ð´Ð»Ñ Bootstrap 5?","acceptedA
22nswer":{"@type":"Answer","text":"ÐеÑ. ÐаÑÐ¸Ð½Ð°Ñ Ñ 5-й веÑÑии Bootstrap пеÑепиÑал JS-компоненÑÑ Ð½Ð° ÑиÑÑÑй JavaScript и не ÑÑебÑÐµÑ jQuery Ð´Ð»Ñ Ð²ÑпадаÑÑиÑ
менÑ, модалÑнÑÑ
окон, ÑÑлÑипов и оÑÑалÑного. jQuery нÑжен ÑолÑко Ð´Ð»Ñ Bootstrap 4 и более ÑÑаÑÑÑ
веÑÑий. ÐÑли на ÑайÑе Bootstrap 5 и jQuery вÑÑ Ñавно подклÑÑÑн â ÑÑо, ÑкоÑее вÑего, наÑледие ÑÐµÐ¼Ñ Ð¸Ð»Ð¸ оÑделÑного плагина, а не ÑÑебование Ñамого Bootstrap."}},{"@type":"Question","name":"Ðак ÑзнаÑÑ Ð²ÐµÑÑÐ¸Ñ jQuery на ÑайÑе?","acceptedAnswer":{"@type":"Answer","text":"ÐÑкÑойÑе конÑÐ¾Ð»Ñ ÑазÑабоÑÑика (F12) на нÑжной ÑÑÑаниÑе и вÑполниÑе jQuery.fn.jquery â веÑнÑÑÑÑ ÑÑÑока вида \"4.0.0\". ÐÑли jQuery не подклÑÑÑн, команда вÑÐ·Ð¾Ð²ÐµÑ Ð¾ÑÐ¸Ð±ÐºÑ jQuery is not defined. Также веÑÑÐ¸Ñ Ð²Ð¸Ð´Ð½Ð¾ во вкладке Network: Ñ Ñайла Ñ CDN обÑÑно еÑÑÑ Ð½Ð¾Ð¼ÐµÑ Ð²ÐµÑÑии пÑÑмо в имени, напÑÐ¸Ð¼ÐµÑ jquery-3.7.1.min.js."}},{"@type":"Question","name":"ÐоÑÐµÐ¼Ñ $ не ÑабоÑÐ°ÐµÑ Ð² WordPress, Ñ
оÑÑ jQuery подклÑÑÑн?","acceptedA
22nswer":{"@type":"Answer","text":"ЯдÑо WordPress подклÑÑÐ°ÐµÑ jQuery в noConflict-Ñежиме, ÑÑÐ¾Ð±Ñ Ð½Ðµ конÑликÑоваÑÑ Ñ Ð´ÑÑгими библиоÑеками в Ñеме и плагинаÑ
, поÑÑÐ¾Ð¼Ñ ÐºÐ¾ÑоÑкий Ð°Ð»Ð¸Ð°Ñ $ глобалÑно недоÑÑÑпен â ÑабоÑÐ°ÐµÑ ÑолÑко jQuery. ÐнÑÑÑи Ñвоего кода Ð°Ð»Ð¸Ð°Ñ Ð¼Ð¾Ð¶Ð½Ð¾ веÑнÑÑÑ Ð»Ð¾ÐºÐ°Ð»Ñно: обеÑниÑе код в jQuery(function($){ /* ÑÑÑ $ Ñнова ÑабоÑÐ°ÐµÑ */ }); â ÑÑо ÑÑандаÑÑнÑй и безопаÑнÑй пÑиÑм именно Ð´Ð»Ñ WordPress."}}]}</script>
22 23</head> 24<body id="home"> 25<!-- script type="text/javascript">$("body").css("display", "none");</script --> 26<div id="mainblocktop"> 27<div id="top-panel"> 28 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 29 <tr> 30 <td width="50%" align="left" valign="middle"> 31 <p class="site-h">www.jQueryBook.ru <span> - jQuery докÑменÑаÑиÑ</span></p> </td> 32 <td width="25%" align="center" valign="middle"> </td> 33 <td></td> 34 </tr> 35</table> 36</div> 37 38 39<!--поиÑк--> 40<div id="g-search-outer"> 41<div id="g-search"> 42 43<!--form action="https://jquerybook.ru/api/google-search.php" id="cse-search-box"> 44 <div> 45 <input type="hidden" name="cx" value="partner-pub-3545104957102155:a9jnjd93k4z" /> 46 <input type="hidden" name="cof" value="FORID:10" /> 47 <input type="hidden" name="ie" value="utf-8" /> 48 <input type="text" name="q" size="60" /> 49 <input type="submit" name="sa" value="Поиск" /> 50 </div> 51</form>
52<script type="text/javascript" src="http://www.google.ru/cse/brand?form=cse-search-box&lang=ru"></script--> 53 54</div> 55</div> 56<!--поиÑк--> 57 58</div> 59 60<div id="mainblockbody"> 61 <table id="anch" width="100%" border="0" cellspacing="0" cellpadding="0"> 62 <tr> 63 <td colspan="3" align="center" valign="top"> 64 <div id="body-top-fon"> 65 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 66 <tr> 67 <td width="20%" align="center" valign="top"> 68 <p style="width:220px; margin:0; padding:0;"> </p> 69 </td> 70 <td> 71 <p id="breadcrumbs" align="left"><a href="/">ÐлавнаÑ</a> » <a href="/articles/">СÑаÑÑи</a> » ÐодклÑÑение jQuery</p> 72 </td> 73 <td width="20%" align="center" valign="top"> 74 <p id="font-min-max" align="right"> </p> 75 </td> 76 </tr> 77 </table> 78 </div> 79 </td> 80 </tr> 81 <tr> 82 <td width="20%" align="center" valign="top"> 83 <div id="left-menu"> 84 <p class="hleft">jQuery API <span class="normal em09 body_tmp"> <span class="xlight">( <span id="api-ru">ru</span> | <span id="api-en">en</span> )</span></span> </p> 85 <ul id="api-menu"> 86 <li><a href="/api/" title="ÐÑе по алÑавиÑÑ" class="active"><!--<img src="/images/plus.gif" width="12" height="12" /> --><span>All</span></a> 87 <ul id="menu-abc" style="display:none;"> 88 <li class="first"> 89 <a class="menu-abc" href="#abc-a.html" title="jQuery на бÑÐºÐ²Ñ A"><span>A</span></a> 90 <a class="menu-abc" href="#abc-b.html" title="jQuery на бÑÐºÐ²Ñ B"><span>B</span></a> 91 <a class="menu-abc" href="#abc-c.html" title="jQuery на бÑÐºÐ²Ñ C"><span>C</span></a> 92 <a class="menu-abc" href="#abc-d.html" title="jQuery на бÑÐºÐ²Ñ D"><span>D</span></a> 93 <a class="menu-abc" href="#abc-e.html" title="jQuery на бÑÐºÐ²Ñ E"><span>E</span></a> 94 <a class="menu-abc" href="#abc-f.html" title="jQuery на бÑÐºÐ²Ñ F"><span>F</span></a> 95 <a class="menu-abc" href="#abc-j.html" title="jQuery на бÑÐºÐ²Ñ J"><span>J</span></a> 96 <a class="menu-abc" href="#abc-h.html" title="jQuery на бÑÐºÐ²Ñ H"><span>H</span></a> 97 <a class="menu-abc" href="#abc-i.html" title="jQuery на бÑÐºÐ²Ñ I"><span>I</span></a> 98 <a class="menu-abc" href="#abc-j.html" title="jQuery на бÑÐºÐ²Ñ J"><span>J</span></a> 99 <a class="menu-abc" href="#abc-k.html" title="jQuery на бÑÐºÐ²Ñ K"><span>K</span></a> 100 <span title="jQuery на бÑÐºÐ²Ñ L">L</span> 101 <span title="jQuery на бÑÐºÐ²Ñ M">M</span> 102 <span title="jQuery на бÑÐºÐ²Ñ N">N</span> 103 <span title="jQuery на бÑÐºÐ²Ñ O">O</span> 104 <span title="jQuery на бÑÐºÐ²Ñ P">P</span> 105 <span title="jQuery на бÑÐºÐ²Ñ Q">Q</span> 106 <span title="jQuery на бÑÐºÐ²Ñ R">R</span> 107 <span title="jQuery на бÑÐºÐ²Ñ S">S</span> 108 <span title="jQuery на бÑÐºÐ²Ñ T">T</span> 109 <span title="jQuery на бÑÐºÐ²Ñ U">U</span> 110 <span title="jQuery на бÑÐºÐ²Ñ V">V</span> 111 <span title="jQuery на бÑÐºÐ²Ñ W">W</span> 112 <span title="jQuery на бÑÐºÐ²Ñ X">X</span> 113 <span title="jQuery на бÑÐºÐ²Ñ Y">Y</span> 114 <span title="jQuery на бÑÐºÐ²Ñ Z">Z</span> 115 <div class="clear"></div> 116 </li> 117 </ul> 118 </li> 119 <li><a href="/api/Ajax-c2.html" title="Ajax запÑоÑÑ" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Ajax</span></a> 120 <ul> 121 <li class="first"><a href="/api/Global-Ajax-Event-Handlers-c20.html" title="ÐбÑабоÑÑики глобалÑнÑÑ Ajax ÑобÑÑий"><span>Global Ajax Event Handlers</span></a></li> 122 <li><a href="/api/Helper-Functions-c21.html" title="ÐÑпомогаÑелÑнÑе ÑÑнкÑии"><span>Helper Functions</span></a></li> 123 <li><a href="/api/Low-Level-Interface-c22.html" title="ÐизкоÑÑовневÑе (базовÑе)"><span>Low-Level Interface</span></a></li> 124 <li><a href="/api/Shorthand-Methods-c23.html" title="ÐоÑоÑкие (ÑокÑаÑеннÑе)"><span>Shorthand Methods</span></a></li> 125 </ul></li> 126 <li><a href="/api/Attributes-c3.html" title="ÐÑÑибÑÑÑ"><span>Attributes</span></a></li> 127 <li><a href="/api/Core-c4.html" title="ЯдÑо"><span>Core</span></a></li> 128 <li><a href="/api/CSS-c5.html" title="CSS"><span>CSS</span></a></li> 129 <li><a href="/api/Data-c6.html" title="ÐаннÑе"><span>Data</span></a></li> 130 <li><a href="/api/Dimensions-c7.html" title="РазмеÑÑ"><span>Dimensions</span></a></li> 131 <li><a href="/api/Effects-c8.html" title="ÐÑÑекÑÑ" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Effects</span></a> 132 <ul> 133 <li class="first"><a href="/api/Basics-c24.html" title="ÐÑновнÑе (базовÑе)"><span>Basics</span></a></li> 134 <li><a href="/api/Custom-c25.html" title="СобÑÑвеннÑе (полÑзоваÑелÑÑкие)"><span>Custom</span></a></li> 135 <li><a href="/api/Fading-c26.html" title="ÐепÑозÑаÑноÑÑÑ (ÑаÑÑвоÑение, пÑоÑвление)"><span>Fading</span></a></li> 136 <li><a href="/api/Sliding-c27.html" title="СколÑжение (закаÑÑвание, вÑкаÑÑвание)"><span>Sliding</span></a></li> 137 </ul></li> 138 <li><a href="/api/Events-c9.html" title="СобÑÑиÑ" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Events</span></a> 139 <ul> 140 <li class="first"><a href="/api/Browser-Events-c28.html" title="ÐÑаÑзеÑнÑе ÑобÑÑиÑ"><span>Browser Events</span></a></li> 141 <li><a href="/api/Document-Loading-c29.html" title="ÐагÑÑзка докÑменÑа"><span>Document Loading</span></a></li> 142 <li><a href="/api/Event-Handler-Attachment-c30.html" title="ÐбÑабоÑÑики ÑобÑÑий"><span>Event Handler Attachment</span></a></li> 143 <li><a href="/api/Event-Object-c31.html" title="ÐкземплÑÑ Ð¾Ð±ÑекÑа Event"><span>Event Object</span></a></li> 144 <li><a href="/api/Form-Events-c32.html" title="СобÑÑÐ¸Ñ (ÑлеменÑÑ ÑоÑм)"><span>Form Events</span></a></li> 145 <li><a href="/api/Keyboard-Events-c33.html" title="СобÑÑÐ¸Ñ (клавиаÑÑÑа)"><span>Keyboard Events</span></a></li> 146 <li><a href="/api/Mouse-Events-c34.html" title="СобÑÑÐ¸Ñ (ÑказаÑÐµÐ»Ñ Ð¼ÑÑи)"><span>Mouse Events</span></a></li> 147 </ul></li> 148 <li><a href="/api/Forms-c10.html" title="ФоÑмÑ"><span>Forms</span></a></li> 149 <li><a href="/api/Manipulation-c11.html" title="ÐанипÑлÑÑии" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Manipulation</span></a> 150 <ul> 151 <li class="first"><a href="/api/Class-Attributes-c35.html" title="ÐÑÑибÑÑÑ ÐºÐ»Ð°ÑÑов"><span>Class Attributes</span></a></li> 152 <li><a href="/api/Copying-c36.html" title="ÐопиÑование"><span>Copying</span></a></li> 153 <li><a href="/api/DOM-Insertion-Around-c37.html" title="ÐÑÑавка в DOM (обеÑÑÑвание вокÑÑг)"><span>DOM Insertion, Around</span></a></li> 154 <li><a href="/api/DOM-Insertion-Inside-c38.html" title="ÐÑÑавка в DOM (внÑÑÑи ÑлеменÑа)"><span>DOM Insertion, Inside</span></a></li> 155 <li><a href="/api/DOM-Insertion-Outside-c39.html" title="ÐÑÑавка в DOM (ÑнаÑÑжи ÑлеменÑа)"><span>DOM Insertion, Outside</span></a></li> 156 <li><a href="/api/DOM-Removal-c40.html" title="Удаление из DOM"><span>DOM Removal</span></a></li> 157 <li><a href="/api/DOM-Replacement-c41.html" title="Ðамена в DOM"><span>DOM Replacement</span></a></li> 158 <li><a href="/api/General-Attributes-c42.html" title="ÐÑÑибÑÑÑ DOM ÑлеменÑов"><span>General Attributes</span></a></li> 159 <li><a href="/api/Style-Properties-c43.html" title="СвойÑÑва ÑÑÐ¸Ð»Ñ (CSS)"><span>Style Properties</span></a></li> 160 </ul></li> 161 <li><a href="/api/Miscellaneous-c12.html" title="Разное" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Miscellaneous</span></a> 162 <ul> 163 <li class="first"><a href="/api/Collection-Manipulation-c44.html" title="ÐанипÑлÑÑии над множеÑÑвом"><span>Collection Manipulation</span></a></li> 164 <li><a href="/api/Data-Storage-c45.html" title="Ð¥ÑанилиÑе даннÑÑ Ð¿Ñи ÑлеменÑе"><span>Data Storage</span></a></li> 165 <li><a href="/api/DOM-Element-Methods-c46.html" title="СпеÑмеÑÐ¾Ð´Ñ Ð´Ð»Ñ DOM ÑлеменÑов"><span>DOM Element Methods</span></a></li> 166 <li><a href="/api/Setup-Methods-c47.html" title="СиÑÑемнÑе меÑодÑ"><span>Setup Methods</span></a></li> 167 </ul></li> 168 <li><a href="/api/Offset-c13.html" title="ÐозиÑиониÑование"><span>Offset</span></a></li> 169 <li><a href="/api/Plugin-Authoring-c14.html" title="РазÑабоÑка плагинов"><span>Plugin Authoring</span></a></li> 170 <li><a href="/api/Properties-c15.html" title="СвойÑÑва" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Properties</span></a> 171 <ul> 172 <li class="first"><a href="/api/Properties-of-jQuery-Object-Instances-c48.html" title="СвойÑÑва ÑкземплÑÑа обÑекÑа jQuery"><span>Properties of jQuery Object Instances</span></a></li> 173 <li>
173<a href="/api/Properties-of-the-Global-jQuery-Object-c49.html" title="СвойÑÑва глобалÑного обÑекÑа jQuery"><span>Properties of the Global jQuery Object</span></a></li> 174 </ul></li> 175 <li><a href="/api/Selectors-c16.html" title="СелекÑоÑÑ" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Selectors</span></a> 176 <ul> 177 <li class="first"><a href="/api/Attribute-c50.html" title="ÐÑÑибÑÑÑ"><span>Attribute</span></a></li> 178 <li><a href="/api/Basics-c51.html" title="ÐазовÑе"><span>Basics</span></a></li> 179 <li><a href="/api/Basics-Filter-c52.html" title="ÐÑновнÑе ÑилÑÑÑÑ"><span>Basics Filter</span></a></li> 180 <li><a href="/api/Child-Filter-c53.html" title="ФилÑÑÑÑ Ð¿Ð¾Ñомков"><span>Child Filter</span></a></li> 181 <li><a href="/api/Content-Filter-c54.html" title="ФилÑÑÑÑ ÑодеÑжимого"><span>Content Filter</span></a></li> 182 <li><a href="/api/Form-c55.html" title="ФоÑмÑ"><span>Form</span></a></li> 183 <li><a href="/api/Hierarchy-c56.html" title="ÐеÑаÑÑ Ð¸ÑеÑкие"><span>Hierarchy</span></a></li> 184 <li><a href="/api/Visibility-Filter-c57.html" title="ФилÑÑÑÑ Ð²Ð¸Ð´Ð¸Ð¼Ð¾ÑÑи"><span>Visibility Filter</span></a></li> 185 </ul></li> 186 <li><a href="/api/Traversing-c17.html" title="ÐÐ±Ñ Ð¾Ð´, поиÑк" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Traversing</span></a> 187 <ul> 188 <li class="first"><a href="/api/Filtering-c58.html" title="ФилÑÑÑаÑиÑ"><span>Filtering</span></a></li> 189 <li><a href="/api/Miscellaneous-Traversing-c59.html" title="ÐÐ±Ñ Ð¾Ð´, поиÑк (пÑоÑее)"><span>Miscellaneous Traversing</span></a></li> 190 <li><a href="/api/Tree-Traversal-c60.html" title="ÐÐ±Ñ Ð¾Ð´, поиÑк (деÑево DOM)"><span>Tree Traversal</span></a></li> 191 </ul></li> 192 <li><a href="/api/Utilities-c18.html" title="УÑилиÑÑ"><span>Utilities</span></a></li> 193 <li><a href="/api/Version-c19.html" title="ÐеÑÑии jQuery" class="dropdown"><img src="/images/plus.gif" width="12" height="12" /> <span>Version jQuery JS</span></a> 194 <ul> 195 <li class="first"><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.0"><span>jQuery 1.0</span></a></li> 196 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.0.4"><span>jQuery 1.0.4</span></a></li> 197 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.1"><span>jQuery 1.1</span></a></li> 198 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.1.2"><span>jQuery 1.1.2</span></a></li> 199 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.1.3"><span>jQuery 1.1.3</span></a></li> 200 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.1.4"><span>jQuery 1.1.4</span></a></li> 201 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.2"><span>jQuery 1.2</span></a></li> 202 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.2.3"><span>jQuery 1.2.3</span></a></li> 203 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.2.6"><span>jQuery 1.2.6</span></a></li> 204 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.3"><span>jQuery 1.3</span></a></li> 205 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.4"><span>jQuery 1.4</span></a></li> 206 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.4.1"><span>jQuery 1.4.1</span></a></li> 207 <li><a href="#" title="ÐеÑÑÐ¸Ñ jQuery 1.4.2"><span>
207jQuery 1.4.2</span></a></li> 208 </ul></li> 209 </ul> 210 <br /> 211<div style="padding-left:20px;"><div class="art-side"><p class="art-side-h"><a href="/articles/">СÑаÑÑи о jQuery</a></p><ul><li><a href="/articles/jquery-4.html">jQuery 4.0: ÑÑо нового</a></li><li><b>Ðак подклÑÑиÑÑ jQuery</b></li><li><a href="/articles/jquery-vs-javascript.html">jQuery или ÑиÑÑÑй JS</a></li><li><a href="/articles/sobytiya-jquery-on.html">СобÑÑиÑ: .on() и .off()</a></li><li><a href="/articles/ajax-jquery.html">Ajax: $.ajax и ÑоÑмÑ</a></li><li><a href="/articles/selektory-jquery.html">СелекÑоÑÑ: ÑпаÑгалка</a></li><li><a href="/articles/formy-jquery.html">ФоÑмÑ: val, checked, select</a></li><li><a href="/articles/ustarevshie-metody-jquery.html">УÑÑаÑевÑие меÑÐ¾Ð´Ñ jQuery</a></li></ul></div> 212 213</div> 214 <br /> 215 <br /> 216 <br /> 217 <br /> 218 <br /> 219 <br /> 220 <br /> 221 <br /> 222 <br /> 223 <br /> 224 <br /> 225 <br /> 226 <br /> 227 <br /> 228 </div> 229 </td> 230 <td align="center" valign="top"> 231 <div id="blockcontent"> 232 <p class="hbody"> </p> 233 <div id="blockcontent-inner"> 234<!-- @apalekhov ÐаÑало ÑÑаÑÑи (пеÑед конÑенÑом) --> 235<br><div class="rl_cnt_bg" data-id="289505"></div><br> 236 237<!--наÑало вÑÑавки--> 238<div class="article"> 239<h1 class="art-h1">Ðак подклÑÑиÑÑ jQuery: CDN, локалÑнÑй Ñайл, npm и WordPress</h1> 240<p class="art-meta">ÐпÑбликовано: 26.09.2026 · Ðбновлено: 26.09.2026 · ÐкÑÑалÑно Ð´Ð»Ñ jQuery 3.7.1 и 4.0.0</p> 241<p class="art-lead">СамÑй бÑÑÑÑÑй ÑпоÑоб подклÑÑиÑÑ jQuery â вÑÑавиÑÑ Ð¾Ð´Ð¸Ð½ Ñег <code><script src="https://code.jquery.com/jquery-4.0.0.min.js"></script></code> пеÑед Ñвоим кодом: библиоÑека загÑÑзиÑÑÑ Ñ Ð¾ÑиÑиалÑного CDN, и <code>$</code> ÑÑÐ°Ð½ÐµÑ Ð´Ð¾ÑÑÑпен на ÑÑÑаниÑе. ÐалÑÑе â ваÑианÑÑ Ð´Ð»Ñ Ð»Ð¾ÐºÐ°Ð»Ñного Ñайла, npm-пÑоекÑов и WordPress, а Ñакже ÑÐ°Ð·Ð±Ð¾Ñ Ð¾Ñибки <code>$ is not defined</code> и дÑÑÐ³Ð¸Ñ ÑипиÑнÑÑ Ð¿Ñоблем подклÑÑениÑ.</p> 242<div class="art-toc"> 243<p>СодеÑжание</p> 244<ol> 245<li><a href="#version">ÐакÑÑ Ð²ÐµÑÑÐ¸Ñ Ð²ÑбÑаÑÑ</a></li> 246<li><a href="#cdn">ÐодклÑÑение Ñ CDN</a></li> 247<li><a href="#local">ÐокалÑнÑй Ñайл</a></li> 248<li><a href="#npm">npm и ÑбоÑÑики</a></li> 249<li><a href="#wordpress">jQuery в WordPress</a></li> 250<li><a href="#check">ÐÑовеÑка, ÑÑо jQuery загÑÑзилÑÑ</a></li> 251<li><a href="#ready">ÐоÑовноÑÑÑ DOM</a></li> 252<li><a href="#errors">ЧаÑÑÑе оÑибки</a></li> 253<li><a href="#checklist">Чек-лиÑÑ</a></li> 254</ol> 255</div> 256 257<h2 id="version">ÐакÑÑ Ð²ÐµÑÑÐ¸Ñ Ð²ÑбÑаÑÑ</h2> 258<p>Ðа ÑенÑÑбÑÑ 2026 года акÑÑалÑÐ½Ñ Ð´Ð²Ðµ веÑки: <strong>jQuery 4.0.0</strong> â оÑÐ½Ð¾Ð²Ð½Ð°Ñ Ð»Ð¸Ð½Ð¸Ñ ÑазÑабоÑки, и <strong>jQuery 3.7.1</strong> â поÑледний Ñелиз веÑки 3.x, коÑоÑÑÑ Ð¼Ð½Ð¾Ð³Ð¸Ðµ деÑÐ¶Ð°Ñ Ð¸Ð·-за более ÑиÑокой ÑовмеÑÑимоÑÑи Ñо ÑÑаÑÑми плагинами. РазниÑа Ð¼ÐµÐ¶Ð´Ñ Ð½Ð¸Ð¼Ð¸ в пеÑвÑÑ Ð¾ÑеÑÐµÐ´Ñ Ð² ÑдалÑннÑÑ ÑÑÑаÑевÑÐ¸Ñ API (подÑобноÑÑи â в ÑÑаÑÑе <a href="/articles/jquery-4.html">ÑÑо нового в jQuery 4.0</a>), а не в набоÑе базовÑÑ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑей, поÑÑÐ¾Ð¼Ñ Ð´Ð»Ñ Ð½Ð¾Ð²Ð¾Ð³Ð¾ пÑоекÑа без ÑÑаÑÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð¾Ð² ÑазÑмно ÑÑÐ°Ð·Ñ Ð±ÑаÑÑ 4.0.0.</p> 259<p>У каждой веÑÑии еÑÑÑ Ð¿Ð¾Ð»Ð½Ð°Ñ ÑбоÑка и облегÑÑÐ½Ð½Ð°Ñ <strong>slim</strong>. Slim не вклÑÑÐ°ÐµÑ Ajax и ÑÑÑекÑÑ, а в 4.0 из Ð½ÐµÑ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑелÑно ÑбÑали модÑли Deferred, Callbacks и Queue, на коÑоÑÑÑ ÑÑи ÑÑнкÑии поÑÑÑоенÑ. ÐÑли ÑÐ°Ð¹Ñ Ð¸ÑполÑзÑÐµÑ jQuery ÑолÑко Ð´Ð»Ñ Ð²ÑбоÑки ÑлеменÑов и ÑабоÑÑ Ñ DOM â беÑиÑе slim, Ñайл бÑÐ´ÐµÑ Ð·Ð°Ð¼ÐµÑно легÑе.</p> 260<div class="art-table-wrap"><table class="art-table"> 261<thead> 262<tr><th>СбоÑка</th><th>ЧÑо внÑÑÑи</th><th>Ðогда бÑаÑÑ</th></tr> 263</thead> 264<tbody> 265<tr><td>jquery-4.0.0.min.js</td><td>
265ÐолнÑй набоÑ: DOM, ÑобÑÑиÑ, Ajax, ÑÑÑекÑÑ, Deferred</td><td>ÐÑÐ¶Ð½Ñ <code>$.ajax()</code>, <code>.animate()</code>, ÑÑаÑÑе Ð¿Ð»Ð°Ð³Ð¸Ð½Ñ Ð½Ð° Deferred</td></tr> 266<tr><td>jquery-4.0.0.slim.min.js</td><td>Ðез Ajax, ÑÑÑекÑов, Deferred/Callbacks/Queue</td><td>ТолÑко вÑбоÑка и манипÑлÑÑии Ñ DOM, ÑовÑеменнÑй код без jQuery-плагинов на Deferred</td></tr> 267<tr><td>jquery-3.7.1.min.js</td><td>ÐолнÑй набоÑ, как в 4.0, но Ñ ÑÐ¾Ñ ÑанÑннÑми ÑÑÑаÑевÑими API</td><td>СÑаÑÑе Ð¿Ð»Ð°Ð³Ð¸Ð½Ñ Ð¸ код, еÑÑ Ð½Ðµ пÑовеÑеннÑе на ÑовмеÑÑимоÑÑÑ Ñ 4.0</td></tr> 268<tr><td>jquery-3.7.1.slim.min.js</td><td>Ðез Ajax и ÑÑÑекÑов (Deferred/Callbacks оÑÑаÑÑÑÑ)</td><td>То же, ÑÑо и slim 4.0, но нÑжна ÑовмеÑÑимоÑÑÑ Ñ 3.x-плагинами</td></tr> 269</tbody> 270</table></div> 271<div class="art-note"><p>ÐÑли на ÑайÑе много ÑÑаÑÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð¾Ð², не пÑовеÑÑйÑе ÑовмеÑÑимоÑÑÑ Ñ 4.0 «на глаз» â ÑнаÑала пÑогониÑе ÑеÑез jQuery Migrate в ÑеÑÑовом окÑÑжении и поÑмоÑÑиÑе пÑедÑпÑÐµÐ¶Ð´ÐµÐ½Ð¸Ñ Ð² конÑоли, а Ñже поÑом пеÑеклÑÑайÑе пÑод.</p></div> 272 273<h2 id="cdn">ÐодклÑÑение Ñ CDN</h2> 274<p>ÐÑоÑе вÑего вÑÑавиÑÑ Ð³Ð¾ÑовÑй Ñег <code><script></code> Ñ Ð¾Ð´Ð½Ð¾Ð³Ð¾ из CDN. ÐÑиÑиалÑнÑй ваÑÐ¸Ð°Ð½Ñ â <strong>code.jquery.com</strong>, Ñ Ð½ÐµÐ³Ð¾ вÑегда акÑÑалÑнÑе ÑÐ°Ð¹Ð»Ñ Ð¸ еÑÑÑ Ñеги Ñ Ð³Ð¾ÑовÑм SRI-Ñ ÑÑем на ÑÑÑаниÑе <a href="https://releases.jquery.com/">releases.jquery.com</a>. Также jQuery зеÑкалиÑÑÑÑ cdnjs и jsDelivr â они бÑваÑÑ Ð¿Ð¾Ð»ÐµÐ·Ð½Ñ, еÑли оÑновной CDN недоÑÑÑпен.</p> 275<div class="art-table-wrap"><table class="art-table"> 276<thead> 277<tr><th>CDN</th><th>URL Ð´Ð»Ñ jQuery 4.0.0</th><th>URL Ð´Ð»Ñ jQuery 3.7.1</th></tr> 278</thead> 279<tbody> 280<tr><td>code.jquery.com (оÑиÑиалÑнÑй)</td><td><code>https://code.jquery.com/jquery-4.0.0.min.js</code></td><td><code>https://code.jquery.com/jquery-3.7.1.min.js</code></td></tr> 281<tr><td>cdnjs</td><td><code>https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js</code></td><td><code>https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js</code></td></tr> 282<tr><td>jsDelivr</td><td><code>https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js</code></td><td><code>https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js</code></td></tr> 283</tbody> 284</table></div> 285<p>ÐÑÐ¸Ð¼ÐµÑ Ð¿Ð¾Ð´ÐºÐ»ÑÑÐµÐ½Ð¸Ñ Ñ Ð¾ÑиÑиалÑного CDN:</p> 286<pre><code><script src="https://code.jquery.com/jquery-4.0.0.min.js"></script> 287<script> 288 // Ð²Ð°Ñ ÐºÐ¾Ð´, иÑполÑзÑÑÑий $, идÑÑ Ð½Ð¸Ð¶Ðµ 289</script></code></pre> 290<p>У Ñега Ñо ÑÑÑаниÑÑ releases.jquery.com еÑÑÑ ÐµÑÑ Ð´Ð²Ð° аÑÑибÑÑа â <code>integrity</code> и <code>crossorigin="anonymous"</code>. ÐÑо Ð¼ÐµÑ Ð°Ð½Ð¸Ð·Ð¼ Subresource Integrity (SRI): бÑаÑÐ·ÐµÑ ÑвеÑÑÐµÑ Ñ ÑÑ ÑкаÑанного Ñайла Ñ ÑказаннÑм в аÑÑибÑÑе и оÑкажеÑÑÑ Ð²ÑполнÑÑÑ ÑкÑипÑ, еÑли Ñайл бÑл подменÑн на CDN или по пÑÑи к немÑ. Ð¥ÑÑ Ð¿ÑивÑзан к конкÑеÑной веÑÑии Ñайла, поÑÑÐ¾Ð¼Ñ ÐµÐ³Ð¾ Ð
290½ÐµÐ»ÑÐ·Ñ Ð¿ÑидÑмаÑÑ Ð¸Ð»Ð¸ взÑÑÑ Â«Ð¿ÑимеÑно Ñакой же» â беÑиÑе его ÑолÑко Ñ Ð¾ÑиÑиалÑной ÑÑÑаниÑÑ Ð´Ð»Ñ Ð½Ñжной веÑÑии:</p> 291<pre><code><!-- jQuery 4.0.0, миниÑиÑиÑÐ¾Ð²Ð°Ð½Ð½Ð°Ñ Ð¿Ð¾Ð»Ð½Ð°Ñ ÑбоÑка --> 292<script src="https://code.jquery.com/jquery-4.0.0.min.js" 293 integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" 294 crossorigin="anonymous"></script> 295 296<!-- jQuery 3.7.1, миниÑиÑиÑÐ¾Ð²Ð°Ð½Ð½Ð°Ñ Ð¿Ð¾Ð»Ð½Ð°Ñ ÑбоÑка --> 297<script src="https://code.jquery.com/jquery-3.7.1.min.js" 298 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 299 crossorigin="anonymous"></script></code></pre> 300<div class="art-note"><p>Ð¥ÑÑ Ð¾ÑноÑиÑÑÑ Ðº конкÑеÑÐ½Ð¾Ð¼Ñ ÑайлÑ: Ñ <code>jquery-4.0.0.js</code>, <code>jquery-4.0.0.slim.min.js</code> и дÑÑÐ³Ð¸Ñ ÑбоÑок он Ñвой. ÐÐ»Ñ Ð´ÑÑгой веÑÑии или ÑбоÑки копиÑÑйÑе гоÑовÑй Ñег на <a href="https://releases.jquery.com/">releases.jquery.com</a> â не пÑавÑÑе Ð½Ð¾Ð¼ÐµÑ Ð²ÐµÑÑии в адÑеÑе, оÑÑавив ÑÑаÑÑй <code>integrity</code>: бÑаÑÐ·ÐµÑ Ñогда пÑоÑÑо не вÑÐ¿Ð¾Ð»Ð½Ð¸Ñ ÑкÑипÑ. Ð¢Ð¾Ñ Ð¶Ðµ Ñайл на jsDelivr (<code>npm/[email protected]/dist/jquery.min.js</code>) Ð¸Ð¼ÐµÐµÑ ÑÐ¾Ñ Ð¶Ðµ Ñ ÑÑ.</p></div> 301<p>ÐÑделÑно пÑо <strong>Google Hosted Libraries</strong> (<code>ajax.googleapis.com</code>): ÑÑÐ¾Ñ CDN иÑÑоÑиÑеÑки бÑл ÑамÑм попÑлÑÑнÑм ÑпоÑобом подклÑÑиÑÑ jQuery и до ÑÐ¸Ñ Ð¿Ð¾Ñ Ð²ÑÑÑеÑаеÑÑÑ Ð² ÑÑаÑÑÑ ÑÐ°Ð±Ð»Ð¾Ð½Ð°Ñ , но новÑе веÑÑии поÑвлÑÑÑÑÑ Ñам Ñ Ð·Ð°Ð´ÐµÑжкой. ÐÑежде Ñем пÑопиÑÑваÑÑ Ð°Ð´ÑÐµÑ Ñ 4.0, пÑовеÑÑÑе налиÑие нÑжной веÑÑии в каÑалоге <a href="https://developers.google.com/speed/libraries">developers.google.com/speed/libraries</a>; надÑжнее бÑаÑÑ 4.0 Ñ code.jquery.com, cdnjs или jsDelivr.</p> 302<p>ÐÐ»Ñ Ð°ÑдиÑоÑии из РФ Ð¸Ð¼ÐµÐµÑ ÑмÑÑл деÑжаÑÑ Ð² запаÑе локалÑнÑÑ ÐºÐ¾Ð¿Ð¸Ñ Ñайла: доÑÑÑпноÑÑÑ Ð·Ð°ÑÑбежнÑÑ CDN Ñ ÑаÑÑи пÑовайдеÑов и клиенÑÑÐºÐ¸Ñ ÑеÑей Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð½ÐµÑÑабилÑной, и ÑÐ°Ð¹Ñ Ð½Ðµ должен ÑазваливаÑÑÑÑ Ð¸Ð·-за Ñого, ÑÑо не загÑÑзилÑÑ Ð¾Ð´Ð¸Ð½ внеÑний ÑкÑипÑ. Ðиже â ÑабоÑий ваÑÐ¸Ð°Ð½Ñ Ñ ÑолбÑком на локалÑнÑй Ñайл.</p> 303 304<h2 id="local">ÐокалÑнÑй Ñайл</h2> 305<p>СкаÑайÑе нÑжнÑй Ñайл (напÑимеÑ, <code>jquery-4.0.0.min.js</code> Ñ code.jquery.com) и положиÑе в Ð¿Ð°Ð¿ÐºÑ Ñо ÑÑаÑикой ÑайÑа, напÑÐ¸Ð¼ÐµÑ <code>/js/</code>. ÐалÑÑе подклÑÑиÑе Ñегом Ñ Ð¾ÑноÑиÑелÑнÑм пÑÑÑм:</p> 306<pre><code><script src="/js/jquery-4.0.0.min.js"></script> 307<script src="/js/my-plugin.js"></script> 308<script src="/js/app.js"></script></code></pre> 309<p>ÐоÑÑдок важен: ÑнаÑала jQuery, заÑем плагинÑ, коÑоÑÑе Ð¾Ñ Ð½ÐµÑ Ð·Ð°Ð²Ð¸ÑÑÑ, и ÑолÑко поÑом Ð²Ð°Ñ ÐºÐ¾Ð´, иÑполÑзÑÑÑий и jQuery, и ÑÑи плагинÑ. ÐаждÑй ÑкÑÐ¸Ð¿Ñ Ð±ÐµÐ· <code>async</code>/<code>defer</code> вÑполнÑеÑÑÑ ÑÑÐ°Ð·Ñ Ð¿Ð¾Ñле загÑÑзки и блокиÑÑÐµÑ ÑÐ°Ð·Ð±Ð¾Ñ ÑÑÑаниÑÑ Ð´Ð¾ ÑÑого моменÑа â поÑÑÐ¾Ð¼Ñ Ñакие Ñеги обÑÑно ÑÑавÑÑ Ð² Ñамом конÑе <code><body></code>. ÐÑли Ñ Ð¾ÑиÑе деÑжаÑÑ Ð²Ñе ÑкÑипÑÑ Ð² <code><head></code>, добавÑÑе вÑем ÑÑÑм Ñегам аÑÑибÑÑ <code>defer</code> â бÑаÑÐ·ÐµÑ ÑÐ¾Ñ ÑÐ°Ð½Ð¸Ñ Ð¿Ð¾ÑÑдок вÑÐ¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ñ Ð¼ÐµÐ¶Ð´Ñ Ð½Ð¸Ð¼Ð¸ и не оÑÑÐ°Ð½Ð¾Ð²Ð¸Ñ Ð¾ÑÑиÑÐ¾Ð²ÐºÑ ÑÑÑаниÑÑ.</p> 310<p>ЧаÑÑÑй ÑÑенаÑий â гÑÑзиÑÑ jQuery Ñ CDN, а пÑи Ñбое подклÑÑаÑÑ Ð»Ð¾ÐºÐ°Ð»ÑнÑÑ ÐºÐ¾Ð¿Ð¸Ñ. ÐлаÑÑиÑеÑкий ваÑÐ¸Ð°Ð½Ñ Ð¿ÑовеÑки:</p> 311<pre><code><script src="https://code.jquery.com/jquery-4.0.0.min.js"></script> 312<script> 313 window.jQuery || document.write('<script src="/js/jquery-4.0.0.min.js">\x3C/script>'); 314</script></code></pre> 315<p><code>document.write()</code> здеÑÑ Ð±ÐµÐ·Ð¾Ð¿Ð°Ñен ÑолÑко поÑомÑ, ÑÑо оба Ñега ÑÐ¸Ð½Ñ ÑоннÑе, без <code>async</code>/<code>defer</code>: ÑÑÑаниÑа еÑÑ Ð½Ðµ доÑиÑана, и меÑод ÑÑÐ¿ÐµÐ²Ð°ÐµÑ Ð´Ð¾Ð¿Ð¸ÑаÑÑ HTML в поÑок ÑазбоÑа. РоÑÑалÑнÑÑ ÑлÑÑаÑÑ Ð¿ÑиÑм ÑÑиÑаеÑÑÑ ÑÑÑаÑевÑим: из аÑÐ¸Ð½Ñ ÑоннÑÑ ÑкÑипÑов он не ÑабоÑаеÑ, а Chrome на медленнÑÑ ÑоединениÑÑ Ð¼Ð¾Ð¶ÐµÑ Ð½Ðµ загÑÑжаÑÑ Ð²ÑÑавленнÑе ÑеÑез него ÑкÑипÑÑ Ñо ÑÑоÑÐ¾Ð½Ð½Ð¸Ñ Ð´Ð¾Ð¼ÐµÐ½Ð¾Ð². ÐаÑÐ¸Ð°Ð½Ñ Ð±ÐµÐ· <code>document.write()</code> â динамиÑеÑки ÑоздаÑÑ Ñег ÑкÑипÑа и пÑодолжиÑÑ Ð¸Ð½Ð¸ÑиализаÑÐ¸Ñ Ð² обÑабоÑÑике загÑÑзки:</p> 316<pre><code><script src="https://code.jquery.com/jquery-4.0.0.min.js"></script> 317<script> 318(function () { 319 if (window.jQuery) return; // CDN оÑÑабоÑал, ниÑего делаÑÑ Ð½Ðµ нÑжно 320 321 var script = document.createElement('script'); 322 script.src = '/js/jquery-4.0.0.min.js'; 323 script.onload = function () { 324 jQuery(function ($) { 325 // код, завиÑÑÑий Ð¾Ñ jQuery, безопаÑно вÑзÑваÑÑ Ð·Ð´ÐµÑÑ 326 }); 327 }; 328 document.head.appendChild(script); 329})(); 330</script></code></pre> 331<p>ÐинÑÑ â код, завиÑÑÑий Ð¾Ñ jQuery, пÑÐ¸Ñ Ð¾Ð´Ð¸ÑÑÑ Ð´ÐµÑжаÑÑ Ð²Ð½ÑÑÑи <code>onload</code>, а не оÑделÑнÑм Ñегом ниже. ÐÐ»Ñ Ð¾Ð´Ð½Ð¾ÑÑÑаниÑников ÑÑо обÑÑно не пÑоблема.</p> 332 333<h2 id="npm">npm и ÑбоÑÑики</h2> 334<p>РпÑоекÑе Ñо ÑбоÑÑиком (Vite, webpack) jQuery ÑÑавиÑÑÑ ÐºÐ°Ðº обÑÑÐ½Ð°Ñ npm-завиÑимоÑÑÑ:</p> 335<pre><code>npm install jquery</code></pre> 336<p>и импоÑÑиÑÑеÑÑÑ ÐºÐ°Ðº ES-модÑлÑ:</p> 337<pre><code>import $ from "jquery"; 338 339$(function () { 340 $("#app").addClass("ready"); 341});</code></pre> 342<p>ÐÑоблема Ð²Ð¾Ð·Ð½Ð¸ÐºÐ°ÐµÑ Ñо ÑÑаÑÑми плагинами, коÑоÑÑе ожидаÑÑ <code>$</code> и <code>jQuery</code>
342 как глобалÑнÑе пеÑеменнÑе, а не как импоÑÑиÑованнÑй модÑлÑ. Ð webpack ÑÑо ÑеÑаеÑÑÑ ÑеÑез <code>ProvidePlugin</code> â он подÑÑавлÑÐµÑ Ð¸Ð¼Ð¿Ð¾ÑÑ Ð°Ð²ÑомаÑиÑеÑки Ñам, где вÑÑÑеÑÐ°ÐµÑ <code>$</code> или <code>jQuery</code> без обÑÑвлениÑ:</p> 343<pre><code>// webpack.config.js 344const webpack = require("webpack"); 345 346module.exports = { 347 // ... 348 plugins: [ 349 new webpack.ProvidePlugin({ 350 $: "jquery", 351 jQuery: "jquery", 352 }), 353 ], 354};</code></pre> 355<p>Ð Vite Ñакого гоÑового плагина из коÑобки неÑ, но глобалÑнÑе алиаÑÑ Ð¼Ð¾Ð¶Ð½Ð¾ вÑÑÑавиÑÑ ÑÑками. Ðажно: инÑÑÑÑкÑии <code>import</code> вÑплÑваÑÑ Ð¸ вÑполнÑÑÑÑÑ ÑанÑÑе оÑÑалÑного кода модÑлÑ, поÑÑÐ¾Ð¼Ñ Ð¿ÑиÑваивание <code>window.jQuery</code> нÑжно вÑнеÑÑи в оÑделÑнÑй модÑÐ»Ñ Ð¸ импоÑÑиÑоваÑÑ ÐµÐ³Ð¾ пеÑвÑм:</p> 356<pre><code>// jquery-global.js 357import $ from "jquery"; 358window.$ = window.jQuery = $; 359export default $; 360 361// main.js â поÑÑдок импоÑÑов = поÑÑдок вÑÐ¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ñ 362import $ from "./jquery-global.js"; 363import "./legacy-plugin.js"; // ÑепеÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½ найдÑÑ window.jQuery</code></pre> 364<p>ÐÑли напиÑаÑÑ Ð¿ÑиÑваивание пÑÑмо в <code>main.js</code> Ð¼ÐµÐ¶Ð´Ñ Ð´Ð²ÑÐ¼Ñ <code>import</code>, плагин вÑполниÑÑÑ ÑанÑÑе него и не найдÑÑ <code>jQuery</code>.</p> 365<p>ÐÐ»Ñ Ð¾ÐºÑÑжений без бÑаÑзеÑа â Node.js Ñ jsdom, ÑеÑвеÑнÑй ÑендеÑинг, ÑеÑÑÑ â ÑпоÑоб подклÑÑÐµÐ½Ð¸Ñ Ð² jQuery 4.0 изменилÑÑ. Ð 3.x бÑло доÑÑаÑоÑно <code>require("jquery")(window)</code>, и библиоÑека Ñама возвÑаÑала ÑабÑиÑнÑÑ ÑÑнкÑиÑ, еÑли не Ð½Ð°Ñ Ð¾Ð´Ð¸Ð»Ð° глобалÑнÑй <code>window</code>. Ð 4.0 ÑÑа неÑÐ²Ð½Ð°Ñ ÑабÑика ÑбÑана из оÑновного модÑлÑ: нÑжнÑй Ð²Ñ Ð¾Ð´ â <code>jquery/factory</code> (или <code>jquery/factory-slim</code> Ð´Ð»Ñ slim-ÑбоÑки):</p> 366<pre><code>// jQuery 4.0 367const { JSDOM } = require("jsdom"); 368const { window } = new JSDOM(""); 369const $ = require("jquery/factory")(window);</code></pre> 370<p>ÐÑли поÑле пеÑÐµÑ Ð¾Ð´Ð° на 4.0 Ñакой код пеÑеÑÑал ÑабоÑаÑÑ, ÑÑо пеÑвое меÑÑо Ð´Ð»Ñ Ð¿ÑовеÑки.</p> 371 372<h2 id="wordpress">jQuery в WordPress</h2> 373<p>WordPress поÑÑавлÑÐµÑ jQuery в комплекÑе Ñ ÑдÑом â оÑделÑно подклÑÑаÑÑ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÑ Ñ CDN Ð´Ð»Ñ Ñем и плагинов не нÑжно и обÑÑно не ÑÑоиÑ. ÐÑавилÑнÑй ÑпоÑоб добавиÑÑ Ñвой ÑкÑипÑ, завиÑÑÑий Ð¾Ñ jQuery, â заÑегиÑÑÑиÑоваÑÑ Ð·Ð°Ð²Ð¸ÑимоÑÑÑ ÑеÑез <code>wp_enqueue_script()</code>, а не вÑÑавлÑÑÑ Ñег <code><script></code> напÑÑмÑÑ Ð² Ñаблон:</p> 374<pre><code>function my_theme_scripts() { 375 wp_enqueue_script( 376 'my-theme-script', 377 get_template_directory_uri() . '/js/my-script.js', 378 array( 'jquery' ), // завиÑимоÑÑÑ â WordPress Ñам подклÑÑÐ¸Ñ jQuery ÑанÑÑе 379 '1.0.0', 380 true // гÑÑзиÑÑ Ð² подвале ÑÑÑаниÑÑ 381 ); 382} 383add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );</code></pre> 384<p>Так WordPress гаÑанÑиÑÑеÑ, ÑÑо jQuery окажеÑÑÑ Ð½Ð° ÑÑÑаниÑе ÑанÑÑе ваÑего ÑкÑипÑа, даже еÑли ÐµÑ Ñже подклÑÑÐ°ÐµÑ Ñема или дÑÑгой плагин â дÑбликаÑов не бÑдеÑ.</p> 385<p>ÐÐ°Ð¶Ð½Ð°Ñ Ð¾ÑобенноÑÑÑ: ÑдÑо WordPress подклÑÑÐ°ÐµÑ jQuery в Ñежиме <code>noConflict</code>, ÑÑÐ¾Ð±Ñ Ð½Ðµ ÑпоÑиÑÑ Ð·Ð° Ñимвол <code>$</code> Ñ Ð´ÑÑгими библиоÑеками в Ñеме. Ðз-за ÑÑого глобаÐ
385»ÑнÑй Ð°Ð»Ð¸Ð°Ñ <code>$</code> в WordPress не ÑабоÑÐ°ÐµÑ â доÑÑÑпен ÑолÑко <code>jQuery</code>. СÑандаÑÑнÑй Ð¾Ð±Ñ Ð¾Ð´Ð½Ð¾Ð¹ пÑиÑм â обеÑнÑÑÑ ÐºÐ¾Ð´ в ÑÑнкÑÐ¸Ñ Ð¸ веÑнÑÑÑ ÐºÐ¾ÑоÑкий Ð°Ð»Ð¸Ð°Ñ Ð»Ð¾ÐºÐ°Ð»Ñно:</p> 386<pre><code>jQuery(function ($) { 387 // здеÑÑ $ Ñнова ознаÑÐ°ÐµÑ jQuery, но ÑолÑко внÑÑÑи ÑÑой ÑÑнкÑии 388 $('.my-block').addClass('is-ready'); 389});</code></pre> 390<p>Ðе оÑклÑÑайÑе и не деÑегиÑÑÑиÑÑйÑе вÑÑÑоеннÑй <code>jquery</code> без веÑкой пÑиÑÐ¸Ð½Ñ (напÑимеÑ, Ð·Ð°Ð¼ÐµÐ½Ñ Ð½Ð° дÑÑгÑÑ Ð²ÐµÑÑÐ¸Ñ Ð´Ð»Ñ ÐºÐ¾Ð½ÐºÑеÑного плагина, коÑоÑÑй инаÑе не ÑабоÑаеÑ) â на нÑм завÑзана ÑаÑÑÑ Ð°Ð´Ð¼Ð¸Ð½ÐºÐ¸ и Ð¼Ð½Ð¾Ð³Ð¸Ñ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð¾Ð², и без Ñвной Ð½ÐµÐ¾Ð±Ñ Ð¾Ð´Ð¸Ð¼Ð¾ÑÑи ÑÑогаÑÑ ÑÑÑ Ð·Ð°Ð²Ð¸ÑимоÑÑÑ Ð½Ðµ ÑÑоиÑ.</p> 391 392<h2 id="check">ÐÑовеÑка, ÑÑо jQuery загÑÑзилÑÑ</h2> 393<p>ÐÑкÑойÑе конÑÐ¾Ð»Ñ ÑазÑабоÑÑика (клавиÑа F12 или ÑоÑеÑание Ctrl+Shift+I) на нÑжной ÑÑÑаниÑе и введиÑе:</p> 394<pre><code>typeof jQuery</code></pre> 395<p>ÐÑли возвÑаÑаеÑÑÑ <code>"function"</code> â библиоÑека загÑÑжена. ÐнаÑение <code>"undefined"</code> ознаÑаеÑ, ÑÑо ÑкÑÐ¸Ð¿Ñ Ð½Ðµ подклÑÑилÑÑ Ð¸Ð»Ð¸ подклÑÑилÑÑ Ñ Ð¾Ñибкой. УзнаÑÑ Ð²ÐµÑÑÐ¸Ñ Ð¼Ð¾Ð¶Ð½Ð¾ Ñак:</p> 396<pre><code>jQuery.fn.jquery 397// веÑнÑÑ ÑÑÑÐ¾ÐºÑ Ð²Ð¸Ð´Ð° "4.0.0"</code></pre> 398<p>ЧÑÐ¾Ð±Ñ ÑбедиÑÑÑÑ, ÑÑо Ñайл вообÑе запÑаÑивалÑÑ, оÑкÑойÑе Ð²ÐºÐ»Ð°Ð´ÐºÑ Network, пеÑезагÑÑзиÑе ÑÑÑаниÑÑ Ð¸ найдиÑе jquery в ÑпиÑке запÑоÑов â по ÑÑолбÑÑ Status видно, оÑдал ли ÑеÑÐ²ÐµÑ 200, 404 или ÑедиÑекÑ, а по Size â не пÑиÑÑл ли вмеÑÑо Ñайла пÑÑÑой оÑвеÑ.</p> 399 400<h2 id="ready">ÐоÑовноÑÑÑ DOM</h2> 401<p>Ðод, коÑоÑÑй иÑÐµÑ ÑлеменÑÑ Ð½Ð° ÑÑÑаниÑе (<a href="/api/jQuery()-fn132.html">ÑеÑез ÑÑнкÑÐ¸Ñ <code>jQuery()</code> / <code>$()</code></a>), должен запÑÑкаÑÑÑÑ ÑолÑко поÑле Ñого, как ÑÑи ÑлеменÑÑ Ð¿Ð¾ÑвилиÑÑ Ð² DOM. СÑандаÑÑнÑй ÑпоÑоб â коÑоÑÐºÐ°Ñ ÑоÑма:</p> 402<pre><code>$(function () { 403 // DOM гоÑов, можно иÑкаÑÑ ÑлеменÑÑ Ð¸ веÑаÑÑ Ð¾Ð±ÑабоÑÑики 404});</code></pre> 405<p>Ðна ÑквиваленÑна более Ñвной запиÑи <code>$(document).ready(function () { ... })</code> â обе ÑоÑÐ¼Ñ ÑабоÑаÑÑ Ð¸ ÑейÑаÑ, коÑоÑкÑÑ Ð¿ÑоÑÑо Ñдобнее ÑиÑаÑÑ. Ð Ð²Ð¾Ñ Ð¿ÑивÑзка ÑеÑез <code>.on('ready', fn)</code>, коÑоÑÑÑ Ð¸Ð½Ð¾Ð³Ð´Ð° еÑÑ Ð²ÑÑÑеÑаÑÑ Ð² ÑÑаÑом коде, не годиÑÑÑ: <code>ready</code> â ÑÑо не обÑÑное DOM-ÑобÑÑие, и Ñакой ÑпоÑоб подпиÑки на него не поддеÑживаеÑÑÑ Ñже много веÑÑий подÑÑд. ÐÑполÑзÑйÑе <code>$(fn)</code> или <code>$(document).ready(fn)</code>.</p> 406<p>ÐÑли jQuery на ÑÑÑаниÑе нÑжен ÑолÑко Ñади Ð¾Ð¶Ð¸Ð´Ð°Ð½Ð¸Ñ Ð³Ð¾ÑовноÑÑи DOM, а оÑÑалÑной код напиÑан на ÑиÑÑом JavaScript, обÑÑно доÑÑаÑоÑно наÑивного ÑобÑÑиÑ:</p> 407<pre><code>document.addEventListener('DOMContentLoaded', function () { 408 // DOM гоÑов, jQuery не нÑжен 409});</code></pre> 410<p>ÐÐ¾Ñ Ð¾Ð¶Ð¸Ð¹ ÑÑÑÐµÐºÑ Ð´Ð°ÑÑ Ð°ÑÑибÑÑ <code>defer</code> Ñ Ð¾Ð±ÑÑного Ñега <code><script></code>: бÑаÑÐ·ÐµÑ Ð¾ÑкладÑÐ²Ð°ÐµÑ Ð²Ñполнение ÑкÑипÑа до моменÑа, близкого к <code>DOMContentLoaded</code>, без обÑÑÑок вида <code>$(document).ready()</code>. ÐодÑобнее о ÑазниÑе Ð¼ÐµÐ¶Ð´Ñ <code>.ready()</code> и обÑабоÑÑиками ÑеÑез <code>.on()</code> â в ÑÑаÑÑе <a href="/articles/sobytiya-jquery-on.html">пÑо ÑобÑÑÐ¸Ñ Ð² jQuery</a>.</p> 411 412<h2 id="errors">ЧаÑÑÑе оÑибки</h2> 413<div class="art-table-wrap"><table class="art-table"> 414<thead> 415<tr><th>СимпÑом</th><th>ÐÑиÑина</th><th>РеÑение</th></tr> 416</thead> 417<tbody> 418<tr><td><code>$ is not defined</code></td><td>ÐÐ°Ñ ÐºÐ¾Ð´ вÑполнÑеÑÑÑ ÑанÑÑе, Ñем подклÑÑилÑÑ jQuery, либо Ñег Ñ jQuery вообÑе оÑÑÑÑÑÑвÑÐµÑ Ð½Ð° ÑÑÑаниÑе</td><td>ÐÑовеÑÑÑе поÑÑдок Ñегов: jQuery должен бÑÑÑ Ð²ÑÑе ваÑего ÑкÑипÑа; ÑбедиÑеÑÑ ÑеÑез Ð²ÐºÐ»Ð°Ð´ÐºÑ Network, ÑÑо Ñайл вообÑе загÑÑзилÑÑ</td></tr> 419<tr><td><code>jQuery is not defined</code></td><td>То же Ñамое, но код обÑаÑаеÑÑÑ Ðº Ð¿Ð¾Ð»Ð½Ð¾Ð¼Ñ Ð¸Ð¼ÐµÐ½Ð¸, а не к алиаÑÑ <code>$</code></td><td>Та же пÑовеÑка поÑÑдка подклÑÑÐµÐ½Ð¸Ñ Ð¸ ÑакÑа загÑÑзки Ñайла</td></tr> 420<tr><td><code>$(...).plugin is not a function</code></td><td>Ðлагин подклÑÑÑн ÑанÑÑе Ñамой jQuery, либо на ÑÑÑаниÑе загÑÑÐ¶ÐµÐ½Ñ Ð´Ð²Ðµ веÑÑии jQuery и плагин пÑиÑепилÑÑ Ð½Ðµ к Ñой</td><td>ÐÑовеÑÑÑе поÑÑдок Ñегов (jQuery â Ð¿Ð»Ð°Ð³Ð¸Ð½Ñ â Ð²Ð°Ñ ÐºÐ¾Ð´) и ÑбедиÑеÑÑ, ÑÑо Ñег Ñ jQuery на ÑÑÑаниÑе один</td></tr> 421<tr><td>Ðод ломаеÑÑÑ Ð½ÐµÐ¿ÑедÑказÑемо, ÑаÑÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð¾Ð² «не видиÑ» дÑÑгие</td><td>Ðа ÑÑÑаниÑе подклÑÑÐµÐ½Ñ Ð´Ð²Ðµ веÑÑии jQuery одновÑеменно (напÑимеÑ, Ð¾Ð´Ð½Ñ ÑÑÐ½ÐµÑ Ñема, дÑÑгÑÑ â виджеÑ)</td><td>ÐайдиÑе оба Ñега <code><script></code> и оÑÑавÑÑе один; еÑли ÑбÑаÑÑ Ð½ÐµÐ»ÑÐ·Ñ â ÑазведиÑе веÑÑии ÑеÑез <code>jQuery.noConflict(true)</code></td></tr> 422<tr><td><code>$</code> занÑÑ â конÑÐ»Ð¸ÐºÑ Ñ Ð´ÑÑгой библиоÑекой</td><td>ÐÑÑ Ð¾Ð´Ð½Ð° библиоÑека Ñоже иÑполÑзÑÐµÑ Ñимвол <code>$</code> (напÑимеÑ, Prototype.js)</td><td>ÐÑзовиÑе <code>jQuery.noConflict();</code> поÑле подклÑÑÐµÐ½Ð¸Ñ jQuery и иÑполÑзÑйÑе полное Ð¸Ð¼Ñ <code>jQuery</code> вмеÑÑо <code>$</code></td></tr> 423<tr><td>СкÑÐ¸Ð¿Ñ Ñ CDN не гÑÑзиÑÑÑ, в конÑоли оÑибка пÑо mixed content</td><td>СÑÑаниÑа оÑкÑÑÑа по https, а адÑÐµÑ CDN Ñказан по http</td><td>ÐÑполÑзÑйÑе пÑоÑокол-незавиÑимÑй или Ñвно https-адÑÐµÑ CDN (вÑе акÑÑалÑнÑе CDN jQuery оÑдаÑÑ https)</td></tr> 424<tr><td>ÐÑаÑÐ·ÐµÑ Ð±Ð»Ð¾ÐºÐ¸ÑÑÐµÑ ÑкÑÐ¸Ð¿Ñ Ñ CDN, в конÑоли оÑибка Content Security Policy</td><td>Ðаголовок CSP ÑайÑа не ÑазÑеÑÐ°ÐµÑ Ð·Ð°Ð³ÑÑÐ·ÐºÑ ÑкÑипÑов Ñ Ð´Ð¾Ð¼ÐµÐ½Ð° CDN</td><td>ÐобавÑÑе домен CDN (напÑимеÑ, <code>code.jquery.com</code>) в диÑекÑÐ¸Ð²Ñ <code>script-src</code> ваÑей CSP-полиÑики или ÑазмеÑÑиÑе Ñайл локалÑно</td></tr> 425<tr><td>Ðод поÑле CDN-ÑкÑипÑа иногда Ð¿Ð°Ð´Ð°ÐµÑ Ñ <code>$ is not defined</code> ÑолÑко на медленной ÑеÑи</td><td>Ð¢ÐµÐ³Ñ Ñ jQuery по оÑибке добавлен <code>async</code>, из-за Ñего поÑÑдок вÑÐ¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ñ Ð¾ÑноÑиÑелÑно ÑоÑÐµÐ´Ð½Ð¸Ñ ÑкÑипÑов не гаÑанÑиÑован</td><td>УбеÑиÑе <code>async</code> Ñ Ñега Ñ jQuery либо пеÑеведиÑе вÑе завиÑимÑе ÑкÑипÑÑ Ð½Ð° <code>defer</code>, коÑоÑÑй ÑÐ¾Ñ ÑанÑÐµÑ Ð¿Ð¾ÑÑдок</td></tr> 426</tbody> 427</table></div> 428 429<h2 id="checklist">Чек-лиÑÑ</h2> 430<ul> 431<li>ÐпÑеделилиÑÑ, нÑжна ли веÑка 4.0.0 или 3.7.1, и обÑÑÐ½Ð°Ñ ÑбоÑка или slim.</li> 432<li>Тег Ñ jQuery ÑÑÐ¾Ð¸Ñ Ð²ÑÑе Ñегов Ñ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð°Ð¼Ð¸ и ваÑим кодом (или Ñ Ð²ÑÐµÑ Ð¿ÑоÑÑавлен ÑоглаÑованнÑй <code>defer</code>).</li> 433<li>ÐÑли иÑполÑзÑеÑе CDN â ÑÑдом еÑÑÑ Ð¿Ð»Ð°Ð½ на ÑлÑÑай его Ð
433½ÐµÐ´Ð¾ÑÑÑпноÑÑи: локалÑнÑй Ñайл и ÑолбÑк-пÑовеÑка <code>window.jQuery</code>.</li> 434<li>ÐÑли иÑполÑзÑеÑе <code>integrity</code>, Ñ ÑÑ ÑооÑвеÑÑÑвÑÐµÑ ÑоÑной веÑÑии и ÑбоÑке Ñайла (ÑкопиÑован Ñ releases.jquery.com), а не оÑÑалÑÑ Ð¾Ñ Ð´ÑÑгой веÑÑии.</li> 435<li>Ð npm-пÑоекÑе плагинам, ожидаÑÑим глобалÑнÑе <code>$</code>/<code>jQuery</code>, Ñвно пÑобÑоÑÐµÐ½Ñ Ð³Ð»Ð¾Ð±Ð°Ð»ÑнÑе пеÑеменнÑе (ÑеÑез <code>ProvidePlugin</code> или ÑÑÑное пÑиÑваивание).</li> 436<li>Ð WordPress Ñвой ÑкÑÐ¸Ð¿Ñ Ð·Ð°ÑегиÑÑÑиÑован ÑеÑез <code>wp_enqueue_script()</code> Ñ Ð·Ð°Ð²Ð¸ÑимоÑÑÑÑ <code>jquery</code>, а не оÑделÑнÑм Ñегом в Ñаблоне.</li> 437<li>Ðод, иÑÑÑий ÑлеменÑÑ Ð½Ð° ÑÑÑаниÑе, обÑÑнÑÑ Ð² <code>$(function(){...})</code>, а не вÑполнÑеÑÑÑ Ð´Ð¾ гоÑовноÑÑи DOM.</li> 438<li>ÐоÑле подклÑÑÐµÐ½Ð¸Ñ Ð¿ÑовеÑили в конÑоли <code>typeof jQuery</code> и <code>jQuery.fn.jquery</code>, а во вкладке Network â ÑÑо Ñайл дейÑÑвиÑелÑно загÑÑзилÑÑ Ñ ÐºÐ¾Ð´Ð¾Ð¼ 200.</li> 439</ul> 440<p>ÐÑли jQuery на ÑайÑе не иÑполÑзÑеÑÑÑ Ð°ÐºÑивно и подклÑÑÑн «по пÑивÑÑке» â возможно, ÑаÑÑÑ Ð·Ð°Ð´Ð°Ñ Ð²Ð¾Ð¾Ð±Ñе пÑоÑе закÑÑÑÑ Ð±ÐµÐ· него; ÑÑавнение ваÑианÑов â в ÑÑаÑÑе <a href="/articles/jquery-vs-javascript.html">нÑжен ли jQuery, или Ñ Ð²Ð°ÑÐ¸Ñ ÑиÑÑого JS</a>. Ð Ð´Ð»Ñ Ð±Ð¾Ð»ÐµÐµ ÑÐµÐ´ÐºÐ¸Ñ Ð¼ÐµÑодов и ÑÑÑаÑевÑÐ¸Ñ ÑвойÑÑв вÑоде <a href="/api/jQuery.browser-fn30.html"><code>jQuery.browser</code></a> или динамиÑеÑкой подгÑÑзки ÑкÑипÑов ÑеÑез <a href="/api/jQuery.getScript()-fn103.html"><code>jQuery.getScript()</code></a> деÑжиÑе под ÑÑкой <a href="/api/">ÑпÑавоÑник jQuery API</a>.</p> 441<h2 id="faq">ЧаÑÑÑе вопÑоÑÑ</h2> 442<div class="faq"> 443<h3>ÐÑда вÑÑавлÑÑÑ Ð¿Ð¾Ð´ÐºÐ»ÑÑение jQuery â в head или пеÑед </body>?</h3> 444<p>Ðба ваÑианÑа ÑабоÑие. Тег в конÑе <code><body></code> (пеÑед ваÑими ÑкÑипÑами) не блокиÑÑÐµÑ Ð¾ÑÑиÑÐ¾Ð²ÐºÑ ÑÑÑаниÑÑ Ð¸ оÑÑаÑÑÑÑ ÑамÑм пÑедÑказÑемÑм ваÑианÑом. Тег в <code><head></code> Ñ Ð°ÑÑибÑÑом <code>defer</code> даÑÑ ÑÐ¾Ñ Ð¶Ðµ ÑÑÑекÑ: ÑкÑÐ¸Ð¿Ñ Ð³ÑÑзиÑÑÑ Ð¿Ð°ÑаллелÑно Ñ HTML и вÑполнÑеÑÑÑ Ð¿ÐµÑед <code>DOMContentLoaded</code>, ÑÐ¾Ñ ÑанÑÑ Ð¿Ð¾ÑÑдок оÑноÑиÑелÑно дÑÑÐ³Ð¸Ñ <code>defer</code>-ÑкÑипÑов. Ðе ÑÑавÑÑе jQuery в <code><head></code> без <code>defer</code> и без <code>async</code> â Ñогда бÑаÑÐ·ÐµÑ Ð¾ÑÑÐ°Ð½Ð¾Ð²Ð¸Ñ ÑÐ°Ð·Ð±Ð¾Ñ HTML, пока не ÑкаÑÐ°ÐµÑ Ð¸ не вÑÐ¿Ð¾Ð»Ð½Ð¸Ñ Ñайл.</p> 445<h3>Ðожно ли подклÑÑиÑÑ Ð´Ð²Ðµ веÑÑии jQuery на одной ÑÑÑаниÑе?</h3> 446<p>Ð¢ÐµÑ Ð½Ð¸ÑеÑки да, но вÑоÑÐ°Ñ Ð²ÐµÑÑÐ¸Ñ Ð¿ÐµÑезапиÑÐµÑ <code>window.$</code> и <code>window.jQuery</code>, и плагинÑ, пÑивÑзаннÑе к пеÑвой веÑÑии, могÑÑ ÑломаÑÑÑÑ. ÐÑли ÑÑо неизбежно (напÑимеÑ, Ñема и плагин ÑÑнÑÑ ÑазнÑе веÑÑии), ÑÑÐ°Ð·Ñ Ð¿Ð¾Ñле пеÑвой загÑÑзки ÑÐ¾Ñ ÑаниÑе ÐµÑ ÑеÑез <code>var jQuery1 = jQuery.noConflict(true);</code>, а вÑоÑой веÑÑии оÑÑавÑÑе глобалÑнÑе имена. ÐÑавилÑнее â пÑивеÑÑи вÑе ÑаÑÑи ÑайÑа к одной веÑÑии.</p> 447<h3>Чем slim-ÑбоÑка оÑлиÑаеÑÑÑ Ð¾Ñ Ð¾Ð±ÑÑной?</h3> 448<p>Ð slim-ÑбоÑке Ð½ÐµÑ Ð¼Ð¾Ð´Ñлей Ajax и ÑÑÑекÑов (<code>.animate()</code>, <code>.fadeIn()</code> и Ñ. п.) в лÑбой веÑке. Ð jQuery 4.0 slim дополниÑелÑно лиÑена модÑлей Deferred, Callbacks и Queue, на коÑоÑÑÑ ÑÑи ÑÑнкÑии оÑнованÑ. ÐÑли ÑÐ°Ð¹Ñ Ð¸ÑполÑзÑÐµÑ ÑолÑко вÑбоÑÐºÑ Ð¸ манипÑлÑÑии Ñ DOM (<code>.addClass()</code>, <code>.attr()</code>, <code>.on()</code>), slim вÑÐ¹Ð´ÐµÑ Ð·Ð°Ð¼ÐµÑно легÑе обÑÑной ÑбоÑки; еÑли нÑÐ¶Ð½Ñ <code>$.ajax()</code> или анимаÑии â беÑиÑе полнÑÑ Ð²ÐµÑÑиÑ.</p> 449<h3>ÐÑжно ли подклÑÑаÑÑ jQuery Ð´Ð»Ñ Bootstrap 5?</h3> 450<p>ÐеÑ. ÐаÑÐ¸Ð½Ð°Ñ Ñ 5-й веÑÑии Bootstrap пеÑепиÑал JS-компоненÑÑ Ð½Ð° ÑиÑÑÑй JavaScript и не ÑÑебÑÐµÑ jQuery Ð´Ð»Ñ Ð²ÑпадаÑÑÐ¸Ñ Ð¼ÐµÐ½Ñ, модалÑнÑÑ Ð¾ÐºÐ¾Ð½, ÑÑÐ
450»Ñипов и оÑÑалÑного. jQuery нÑжен ÑолÑко Ð´Ð»Ñ Bootstrap 4 и более ÑÑаÑÑÑ Ð²ÐµÑÑий. ÐÑли на ÑайÑе Bootstrap 5 и jQuery вÑÑ Ñавно подклÑÑÑн â ÑÑо, ÑкоÑее вÑего, наÑледие ÑÐµÐ¼Ñ Ð¸Ð»Ð¸ оÑделÑного плагина, а не ÑÑебование Ñамого Bootstrap.</p> 451<h3>Ðак ÑзнаÑÑ Ð²ÐµÑÑÐ¸Ñ jQuery на ÑайÑе?</h3> 452<p>ÐÑкÑойÑе конÑÐ¾Ð»Ñ ÑазÑабоÑÑика (F12) на нÑжной ÑÑÑаниÑе и вÑполниÑе <code>jQuery.fn.jquery</code> â веÑнÑÑÑÑ ÑÑÑока вида <code>"4.0.0"</code>. ÐÑли jQuery не подклÑÑÑн, команда вÑÐ·Ð¾Ð²ÐµÑ Ð¾ÑÐ¸Ð±ÐºÑ <code>jQuery is not defined</code>. Также веÑÑÐ¸Ñ Ð²Ð¸Ð´Ð½Ð¾ во вкладке Network: Ñ Ñайла Ñ CDN обÑÑно еÑÑÑ Ð½Ð¾Ð¼ÐµÑ Ð²ÐµÑÑии пÑÑмо в имени, напÑÐ¸Ð¼ÐµÑ <code>jquery-3.7.1.min.js</code>.</p> 453<h3>ÐоÑÐµÐ¼Ñ $ не ÑабоÑÐ°ÐµÑ Ð² WordPress, Ñ Ð¾ÑÑ jQuery подклÑÑÑн?</h3> 454<p>ЯдÑо WordPress подклÑÑÐ°ÐµÑ jQuery в noConflict-Ñежиме, ÑÑÐ¾Ð±Ñ Ð½Ðµ конÑликÑоваÑÑ Ñ Ð´ÑÑгими библиоÑеками в Ñеме и Ð¿Ð»Ð°Ð³Ð¸Ð½Ð°Ñ , поÑÑÐ¾Ð¼Ñ ÐºÐ¾ÑоÑкий Ð°Ð»Ð¸Ð°Ñ <code>$</code> глобалÑно недоÑÑÑпен â ÑабоÑÐ°ÐµÑ ÑолÑко <code>jQuery</code>. ÐнÑÑÑи Ñвоего кода Ð°Ð»Ð¸Ð°Ñ Ð¼Ð¾Ð¶Ð½Ð¾ веÑнÑÑÑ Ð»Ð¾ÐºÐ°Ð»Ñно: обеÑниÑе код в <code>jQuery(function($){ /* ÑÑÑ $ Ñнова ÑабоÑÐ°ÐµÑ */ });</code> â ÑÑо ÑÑандаÑÑнÑй и безопаÑнÑй пÑиÑм именно Ð´Ð»Ñ WordPress.</p> 455</div> 456<div class="art-more"><p class="art-more-h">ÐÑÑ Ð¿Ð¾ Ñеме</p><ul><li><a href="/articles/jquery-4.html">jQuery 4.0: ÑÑо нового и как пеÑейÑи Ñ Ð²ÐµÑÑии 3.x</a></li><li><a href="/articles/jquery-vs-javascript.html">jQuery и ÑиÑÑÑй JavaScript: аналоги меÑодов и когда jQuery еÑÑ Ð½Ñжен</a></li><li><a href="/articles/sobytiya-jquery-on.html">СобÑÑÐ¸Ñ Ð² jQuery: .on(), .off(), делегиÑование и обÑÐµÐºÑ event</a></li><li><a href="/articles/ajax-jquery.html">Ajax в jQuery: $.ajax, $.get, $.post и оÑпÑавка ÑоÑм без пеÑезагÑÑзки</a></li><li><a href="/articles/selektory-jquery.html">СелекÑоÑÑ jQuery: ÑпаÑгалка Ñ Ð¿ÑимеÑами Ð´Ð»Ñ jQuery 3.x и 4.0</a></li><li><a href="/articles/formy-jquery.html">ФоÑÐ¼Ñ Ð² jQuery: знаÑÐµÐ½Ð¸Ñ Ð¿Ð¾Ð»ÐµÐ¹, ÑекбокÑÑ, select и валидаÑиÑ</a></li><li><a href="/articles/ustarevshie-metody-jquery.html">УÑÑаÑевÑие и ÑдалÑннÑе меÑÐ¾Ð´Ñ jQuery: ÑÑо ÑбÑали в 1.9, 3.0 и 4.0 и Ñем замениÑÑ</a></li></ul></div> 457<p align="right"><a href="#anch">[ навеÑÑ ]</a></p> 458</div> 459<div id="pre-sub-center"></div> 460<!-- @apalekhov ÐÐ¾Ð½ÐµÑ ÑÑаÑÑи (поÑле конÑенÑа) --> 461<div class="rl_cnt_bg" data-id="289507"></div> 462 463 464 <div style="float:right"> 465 466 </div> 467 468 <div style="float:left"> 469 470 </div> 471 472 <br class="clear" /><!--ÐºÐ¾Ð½ÐµÑ Ð²ÑÑавки--> 473 <br class="clear" /> 474 <br /> 475 <br /> 476 <br /> 477 <br /> 478 <br /> 479 <br /> 480 </div> 481 </div> 482 </td> 483 <td width="20%" align="center" valign="top"> 484 <div id="right-menu" style="padding-top:20px;"> 485 <div style="display:inline-block;margin-left:6px;background-color:#FFFFFF;text-align:center;"> 486 487 488 489</div> 490 <p class="hright"> </p> 491<!-- @apalekhov Ð¡Ð°Ð¹Ð´Ð±Ð°Ñ --> 492<div class="rl_cnt_bg" data-id="289506"></div> 493 </div> 494 </td> 495 </tr> 496</table> 497</div> 498<br /> 499<br /> 500<br /> 501<table width="100%" border="0" cellspacing="5" cellpadding="0"> 502 <tr> 503 <td width="50%" align="left" valign="bottom"> 504 505 </td> 506 <td align="right" valign="bottom"> 507 <p align="right" class="light noffset em08">СпÑавоÑник по jQuery JavaScript API на ÑÑÑÑком ÑзÑке</p> 508 </td> 509 </tr> 510</table> 511<div id="modal-init"></div> 512
512<script src="/assets/runtime-player.js" defer></script>
512 513</body> 514</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.