Не работает jquery во внешнем файле

Обновлено: 04.07.2024

В данной статье будет рассказано о том, каким образом можно перенести JavaScript-код во внешний файл с подключением JS-скрипта. Статья будет полезна читателям, только начинающим изучение языка программирования JavaScript.

Первое, о чём следует сказать, — зачем вообще выносить код во внешний файл? Ответ прост. Давайте представим, что у пользователя (user) есть большой script, занимающий 100 и более строк кода. Скрипт этот должен работать на каждой странице веб-сайта. Каждый раз дублировать сотни строк кода, как и само наличие в HTML-документе не HTML-кода — не самое оптимальное решение, и это ещё мягко сказано. Намного лучше вынести код JS в отдельный файл и подключить его к HTML-странице (по аналогии с файлами, отвечающими за стили). Но как же это реализовать?

На деле подключение script к основному файлу особых сложностей не вызывает. Можно воспользоваться тегом <script>, добавив к нему атрибут src (как и в случае, если речь идёт о картинках). В src-атрибуте потребуется прописать путь к подключаемому script.

Практический пример

Для примера давайте перенесём коротенькую однострочную программу во внешний файл с последующим подключением этого файла. Пусть файл называется scripts.js и имеет следующее содержимое:

Важный момент заключается в том, что теги script необходимо прописывать внутри HTML-файла. Если они будут написаны в файле .js, код Джаваскрипт работать перестанет, в результате чего всё закончится ошибкой.

Давайте теперь посмотрим, каким образом выглядит непосредственное подсоединение внешнего JS-файла:

Обновив страницу, мы увидим обычное модальное окно с соответствующим приветствием.

Какие моменты важно учитывать в процессе подключения scripts? Смотрите, в примере JS-скрипт помещён в конец HTML-документа, то есть непосредственно перед закрывающим тегом body. Какое-то время назад скрипты подключали в тегах head, то есть в начале документа. Но в настоящее время поступать таким образом не рекомендуют — лучше всего выполнять подключение именно в конце. Давайте разберёмся, почему.

Для примера подключимся теперь в начале документа, между head-тегами:

На картинке выше видно, что кроме модального окна, ничего нет, то есть сам контент (в нашем случае — надпись «Это обычный HTML документ») отсутствует. Дело в том, что при подсоединении внешнего скрипта между тегами head, веб-браузер в первую очередь загрузит и попытается выполнить именно его. И до тех пор, пока загрузка и выполнение не завершатся, веб-браузер не покажет оставшуюся часть документа. Всё вроде бы ничего, но что будет, если файл по каким-нибудь причинам станет загружаться медленно? В результате users будут ждать загрузку этого файла, а ждать сейчас никто не любит, поэтому, скорее всего, users отдадут предпочтение другому ресурсу. Чтобы этого не случилось, сегодня рекомендуют подключать scripts в конце документа, то есть непосредственно перед </body>.

Однако бывают ситуации, когда какая-нибудь библиотека требует подключения как раз таки в начале документа. В данных обстоятельствах пригодятся атрибуты async и defer — они дают возможность веб-браузеру выполнять асинхронную загрузку скриптов (веб-браузер начнёт загружать скрипт, не останавливая отображение контента). Вот, как это работает (будем использовать атрибуты по очереди):

И в первом, и во втором случае будет получен одинаковый результат, то есть script будет подключен без прерывания отображения контента.

Но атрибуты async и defer всё же несколько отличаются: — defer сохраняет последовательность при подключении внешних скриптов. При использовании этого атрибута первым всегда будет выполняться скрипт, подключаемый выше. Это может иметь значение, если подключаются несколько scripts, среди которых один зависит от другого. То есть разработчик получает возможность подключить основной скрипт раньше зависимого. Можно констатировать, что атрибут defer обеспечивает соблюдение порядка; — async просто обеспечивает выполнение скрипта непосредственно после того, как он загрузился. Соответственно, при наличии скриптовых зависимостей этот атрибут лучше не использовать.

Несколько слов о jQuery или как подключить JS к JS (файл .js к другому файлу .js)?

Операцию можно выполнить с помощью библиотеки jQuery. Если кто не знает, jQuery — это набор JS-функций, обеспечивающих взаимодействие между HTML и JavaScript. Всё можно реализовать с помощью простого кода:

Интересуют более профессиональные знания по JS-разработке? Их можно получить на курсах в OTUS:

Всем привет!
Решил написать небольшой сайт лично для себя и сейчас занимаюсь изучением всего что понадобится +моментальное написание сайта.
Так вот, узнал о JQuery и о его функциях, которые упростят жизнь.
Смотрел видео и все поголовно пишут код JQuery в основном файле index.html.
Но лично для меня это выглядит не очень и хочется, чтобы всё было на своих местах.
Как писать код JQuery в отдельном файле?
Вроде скачал и подключил через:
А что дальше? Создать файл .js его подключить в основной файл через: (myjs.js например) Или как? Ни одного видео не нашёл, статьи тоже все пишут про написание в основном файле.

Вопрос задан более года назад
892 просмотра

1)создаешь файл main.js
2)подключаешь
3)ПРОВЕРЯШЬ jquery
4)погнал писать

Сначала думал, что не работает, а потом вспомнил, что чтобы увидеть на сайте надо написать alert
А ещё вопрос. Есть ли смысл использовать просто js, если есть jquery?
Если да, то где писать обычный код js в этом же файле? Или лучше ещё один создать?

modezen,
1)можно совмещать
2)писать в любом месте
3)Создавать еще один не нужно
4)jquery делает все что есть в js и наоборот)

Значит по сути я подключил обычный js, но с доп. функциями? Так?

modezen, ну типо того) jquery - это js,только с измененным и УПРОЩЕННЫМ синтаксисом)

drawnofmymind,
1) А
2) Вы
3) Всегда
4) По пукнтам
5) Расписываете?)
modezen, Если вы просто учитесь и нет строгой необходимости писать на jQuery, привязки к времени, то учитесь сразу на чистом Javascript.
querySelector и querySelectorAll освойте и поймёте что jQ не очень-то нужен.

modezen, когда вы знаете только jQ и чтобы писать на ванильке будет потрачено больше времени, которого нет.

Консоль должна быть открыта. Закрытая консоль, конечно же, не ошибка в коде, однако, ошибочный подход во время отладки сценария. Именно консоль поможет быстро сориентироваться в том, где и какая допущена ошибка, а также следить за ходом выполнения сценария. Во всех современных браузерах - этот инструмент присутствует по умолчанию. Например, в FireFox консоль можно вызвать с помощью сочетания клавиш Ctrl + Shift + K или "Меню" > "Разработка" > "Веб-консоль". В Chrome вызывается сочетанием клавиш Ctrl + Shift + J или "Меню" > "Дополнительные инструменты" > "Консоль JavaScript". В Opera - сочетание клавиш аналогичны Chrome, вызов из меню - "Инструменты разработчика" > "Веб-инспектор" ("Инструменты разработчика" предварительно включить в пункте "Другие инструменты"). Кроме того, существуют инструменты/аддоны, как, например, замечательный FireBug под FireFox или Web Developer для Chrome и этот же инструмент для FireFox

Не подключена библиотека. У кого-то этот пункт вызовет улыбку, но могу вас уверить, что по моей личной статистике, как минимум раз в месяц, на форуме появляется вопрос о том, почему ничего не работает, а после долгих выяснений оказывается, что js-файл с библиотекой просто не подключен на странице. Библиотека jQuery должна быть по возможности новее, подключена первой, до скриптов, в которых она используется и в единственном числе. Если вы используете какой-нибудь старенький плагин, которому для работы требуется такая же старая версия jQuery, то есть несколько нормальных путей решения, чем подключение на страницу и новой библиотеки и старой для плагина:

Оставляем одну новую библиотеку и сразу после неё подключаем плагин jQuery Migrate, который, в большинстве случаев, помогает решить вопрос совместимости.
Без каких-либо дополнений, сами заменяем в плагине удаленные методы на их современные аналоги. Обычно, это такие устаревшие или удаленные методы, как live(), $.browser и т.д.
И конечно же, можно найти современный аналог плагина, который вам понравился. Не зацикливайтесь на одном.

Ну, и примерный порядок подключения:

Код не обернут в конструкцию DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге <head>, то его нужно обязательно заключить в такой код:

Это так называемый "обработчик готовности дерева DOM". Попробую "на пальца" и простым языком объяснить, что это и зачем нужно. Браузер загружает страницу, начиная с первого на ней элемента и движется вниз. Всё, что подключено в теге <head>: CSS, JS и т.д., загрузится и начнёт выполняться раньше, чем дело дойдёт до элементов, которые находятся в <body>. Поэтому, при обращении к элементу из JS-кода, его еще попросту нет на странице. А обёртка, которую я показал выше, откладывает выполнение сценария до тех пор, пока вся структура страницы не будет загружена браузером полностью. Как вариант, который совсем не лишён логики и даже рекомендуется тем же Google, весь свой код можно расположить в конце страницы, перед закрывающим тегом </body>. Так же, хоть и не совсем по теме этого пункта, рекомендуется в некоторых случаях использовать атрибут async для тега <script>.

Не используется делегированная обработка событий для динамических элементов. Этот случай знаком многим, кто использует технологию Ajax. Пунктом выше, мы затронули тему DOM и доступностью элементов при загрузке страницы, но что делать, если элементы добавляются динамически и с ними нужно работать так же, как и со статичными? Вот тут на помощь приходит делегированная обработка событий. Синтаксис:

static_parent - статичный родительский элемент
event - событие
dinamic_child - динамический дочерний элемент
handler - функция-обработчик

К примеру, в каком-то блоке с классом "my_block", есть несколько ссылок с классом "my_link", при клике на которые, выполнялось какое-то действие. Все они изначально присутствовали при загрузке страницы. Теперь мы добавили еще несколько ссылок с таким же классом, но без делегированной обработки, они будут просто проигнорированы и нужное действие уже не выполнится. Для того, чтоб событие обрабатывалось и на старых, и на новых ссылках, нам нужно записать так:

! При чём, объект $(this) внутри обработчика - это именно ссылка ".my_link", на которой событие было вызвано, а не родительский элемент ".my_block", как это бы было при обычной записи, а не делегированной. Старайтесь находить ближайший родительский статичный элемент, что ускорит работу кода. Хотя, в качестве такого, можно выбрать и body, и даже document.

Неправильно подобранный селектор. Вообще, эта тема гораздо обширнее, чем звучит, но тут разберём самые основные промахи, которые допускают новички. Селектор, говоря образно, это признак элемента, по которому мы к этому элементу обращаемся или применяем какой-либо из методов. Селекторами в jQuery (и не только), может быть как имя тега, класс элемента (атрибут "class"), его идентификатор (атрибут "id"), так и любые другие атрибуты или же их комбинации. Тем, кто знаком с CSS, можно расслабится, т.к. селекторы jQuery строятся по такому же принципу, как и в CSS, а вот остальным придётся познакомиться с CSS поближе. Парочка примеров:

Теперь о главной и критической ошибке всех новичков, связанной с селекторами. Возьмите себе за правило, повесьте в рамочке на самом видном месте, повторяйте как мантру перед сном: "В пределах одной страницы - не может быть два и более элементов с одинаковыми атрибутами ID"! Это правило не имеет никаких "а вдруг . " или "а если . ". Поэтому, если вы очень удивлены тому, что на одном элементе событие срабатывает, а на втором таком же нет, то в первую очередь проверьте, а не попадают ли они под правило выше.

В этой статье точку не поставишь, поэтому следите за её обновлениями и не делайте ошибок или учитесь их исправлять ;)

Я новичок в jQuery. Я хотел бы написать свой jQuery во внешнем js-файле, а не в голове файла html, но это не удалось.

2 ответа

Я пытаюсь вызвать простую функцию с предупреждением, но она не работает, когда я пытаюсь вызвать функцию (содержащуюся во внешнем js-файле) с моей страницы html. У меня есть импорт, и звонок очень простой. Есть предложения? <head> <script src=/js/jsFunctions.js.

Что я хочу : изменить цвет текста на красный на тексте в теге <h1> с <id=headline> У кого-нибудь есть идея, почему следующий код не работает, но дальше в этом вопросе этот код работает, перемещая onclick-event во встроенный код? Не работает : следующий код написан во внешнем js-файле.

Это не имеет ничего общего с помещением кода во внешний файл, у вас была бы та же проблема, если бы он был встроенным.

вывод document.write помещается после элемента <script></script> и анализируется синтаксическим анализатором HTML после завершения выполнения скрипта. По сути, вы:

настройка jQuery для загрузки
Попытка использовать jQuery
фактическая загрузка jQuery

Вы не можете использовать jQuery до его загрузки.

Простое решение этой проблемы состоит в том, чтобы сначала использовать два элемента сценария в HTML и загрузить jQuery.

просто хочу избежать импорта jquery в каждый файл html.

Это лучше всего решать либо:

Использование системы шаблонов.
Использование системы сборки, которая объединяет содержимое всех ваших сценариев, включая сторонние библиотеки, в один файл.

Лучший способ сделать это-вызвать библиотеку jquery в начале, а внешний сценарий js-в последней части тела вашего html

Что такое jQuery и её поддержка браузерами

jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».

Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.

Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.

Преимущества и недостатки jQuery

Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:

компактность кода . Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
простой и понятный синтаксис . Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
кроссбраузерность . Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
открытый код . Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.

Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.

К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.

Статистика использования jQuery

Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»

Что можно делать с jQuery

jQuery позволяет очень легко:

выбирать элементы для выполнения различных манипуляций над ними;
создавать различные визуальные эффекты (например, плавное отображение и скрытие элементов);
создавать сложную анимацию, при этом реализовывая это за гораздо меньшее количество строк кода чем на чистом JavaScript;
манипулировать DOM элементами и их атрибутами;
реализовывать AJAX для асинхронного обмена данными между клиентом и сервером;
перемещаться от текущего узла к другим по иерархической структуре DOM дерева;
выполнять несколько действий над элементом посредством одной строчки кода;
получать или устанавливать размеры HTML элементам и т.д.

Этот список можно продолжить дальше, т.к. jQuery содержит большое количество функций, которые значительно упрощают написание кода для решения различных задач, стоящих перед веб-разработчиками.

Как скачать jQuery

Для загрузки нам доступны 2 версии: полная и slim . Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects . Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim .

Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом min ) так и в несжатом виде.

Несжатый вариант библиотеки рекомендуется использовать только во время разработки проекта или его отладки. Кроме этого, его ещё используют для изучения исходного кода jQuery. В нём можно посмотреть устройство как всей библиотеки, так и определённой функции.

На продакшене лучше применять сжатый вариант jQuery (с расширением min.js ). Он меньше весит, и, следовательно, быстрее загружается. А это очень важно для производительности сайта.

Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.

Кроме этого, существуют разные ветки jQuery: 1.x , 2.x и 3.x .

jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.

jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.

jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через requestAnimationFrame и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и slim .

После того как вы определись какой вариант библиотеки вам нужен, его необходимо загрузить.

Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как. ».

После скачивания, можно заметить, что jQuery представляет обычный файл с расширением .js . Далее его нужно загрузить на сервер.

Как подключить скрипт jQuery в html

Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега <script> с атрибутом src , в котором необходимо задать полный или относительный путь к файлу.

Подключение последней версии jQuery:

При этом разместить <script> можно как секции в <head> , так и в <body> . Но где же лучше?

Раньше (до появления режимов async и defer ) это рекомендовалось делать перед закрывающим тегом body :

При таком размещении скрипт не будет блокировать парсинг веб-страницы, т.к. его загрузка и выполнение будет осуществляться в самом конце. В результате, это приведёт к тому, что пользователь увидит содержимое страницы быстрее и сможет раньше с ней начать взаимодействовать.

Если бы мы сделали это по-другому, например, поместили script в раздел head , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.

Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе <head> ) с добавлением к ним атрибута defer или async . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.

При этом, если на странице имеется несколько внешних скриптов с атрибутом defer , то они будут выполняться строго в том порядке, в котором они расположены в коде.

Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:

При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):

Как подключить jQuery с CDN

CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.

Состоит она из большого количества серверов, географически расположенных в разных точках мира, на каждом из которых располагается кэш контента. При этом его доставка конечному пользователю осуществляется обычно с того сервера, который ближе других расположен к нему. В результате чего сокращается время его загрузки, ускоряется отклик, увеличивается производительность сайта, а также снижается нагрузка на оригинальный сервер.

Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.

Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.

Подключить jQuery с CDN очень просто. Для этого нужно вставить script с атрибутом src , в котором прописать путь до этой библиотеки.

Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:

Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу Google CDN и выбрать её.

Например, ссылка для подключения версии из ветки 1.x (1.12.4):

Google CDN для последней версии из ветки 2.x (2.2.4):

Другие популярные CDN

Yandex CDN (последняя опубликованная версия 3.3.1):

Дополнительно можно отметить, что если множество сайтов используют один и тот-же URL для подключения jQuery с CDN, то браузеру не потребуется загружать его для каждого такого ресурса. После первого скачивания он поместить jQuery в кэш и при последующих запросах будет брать её уже оттуда.

Как проверить подключён ли jQuery

Проверить подключён ли jQuery к странице можно так:

Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:

Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:

Узнать версию jQuery, которая у вас подключена к странице можно следующим образом:

Как использовать jQuery на странице

Синтаксис jQuery начинается с функции jQuery или с более короткого и красивого псевдонима - знака $ (как в этом примере).

Что делать при конфликте jQuery с другой библиотекой

Но что делать если знак $ у вас занят и используется другой библиотекой?

В этом случае, чтобы избежать конфликтов можно воспользоваться одним из следующих 3 способов.

Читайте также: