Как добавить jquery в файл js

Обновлено: 01.07.2024

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

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

О режиме совместимости jQuery

Прежде чем мы начнем прикреплять скрипты к WordPress, важно понять режим совместимости jQuery.

Как вы, наверное, знаете, WordPress поставляется с предварительно загруженным jQuery, который вы можете использовать со своим кодом.

JQuery в WordPress также имеет «режим совместимости», который позволяет избежать конфликтов с библиотеками других языков.

Часть этого защитного механизма означает, что вы не можете использовать знак $ напрямую, как в других проектах.

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

В качестве примера посмотрите код ниже:

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

С некоторыми изменениями вы можете снова использовать наш прекрасный маленький знак доллара.

Кстати, если вы новичок в jQuery, знак $ – это просто псевдоним jQuery(), а затем псевдоним функции.

Основная структура выглядит следующим образом: $(selector).action() . Знак доллара определяет jQuery… «(селектор)» запрашивает или находит элементы HTML… и, наконец, «jQuery action()» — это действие, которое должно быть выполнено над элементами.

Вернемся к тому, как мы можем обойти проблему совместимости… вот несколько подходящих вариантов:

1. Войдите в скрытый режим jQuery

Первый способ обойти режим совместимости – скрыть свой код.

Например, если вы загружаете свой скрипт в нижний колонтитул, вы можете поместить свой код в анонимную функцию, которая сопоставит jQuery с $ .

Как в примере ниже:

Если вы хотите добавить свой скрипт в заголовок (чего вам следует избегать, если это возможно, подробнее об этом ниже), вы можете обернуть все в готовую к документу функцию, передавая $ по пути.

2.Войдите в режим «Без конфликтов»

Еще один простой способ избежать написания jQuery по буквам — перейти в режим "без конфликтов" и использовать другой ярлык.

В этом случае: $j вместо $ по умолчанию.

Все, что вам нужно сделать, это объявить это в начале вашего скрипта: var $j = jQuery.noConflict();

Хорошо, теперь вы знаете больше о написании действительного кода jQuery для WordPress, давайте добавим его на наш веб-сайт.

Шаги по добавлению скриптов jQuery в WordPress

Один из самых простых способов добавления скриптов jQuery в WordPress — это процесс, который называется «постановка в очередь».

Для обычного HTML-сайта мы использовали бы этот элемент для добавления скриптов. В конечном итоге WordPress делает то же самое, но для этого мы будем использовать специальные функции WP.

Таким образом, он обрабатывает все наши зависимости за нас (спасибо WP!).

Если вы работаете над темой, вы можете использовать функцию wp_enqueue_script() в файле functions.php.

Вот как это выглядит:

Эта функция принимает пять аргументов:

  1. $handle — уникальный дескриптор, который можно использовать для ссылки на скрипт.
  2. $src – расположение файла скрипта.
  3. $deps — указывает массив зависимостей.
  4. $ver — номер версии вашего скрипта.
  5. $in_footer — сообщает WordPress, куда поместить скрипт.

*Обратите внимание на то, что $in_footer по умолчанию загружает скрипты в заголовок.

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

Добавление скриптов в панель администратора WordPress

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

Например:

Вместо подключения к wp_enqueue_scripts нам нужно использовать admin_enqueue_scripts .

Как отменить регистрацию jQuery в WordPress

Но что, если вы хотите использовать версию jQuery, отличную от той, которую предварительно загружает WordPress?

Вы можете поставить его в очередь... но тогда на странице останутся две версии JQ.

Чтобы избежать этого, мы должны отменить регистрацию версии WP.

Вот как это выглядит:

Это так же просто, как использовать wp_deregister_script() для отмены регистрации jQuery WP, а затем включить скрипт jQuery, который вы хотите добавить.

В приведенном выше примере мы использовали библиотеку jQuery, размещенную в Google, но вы, очевидно, замените ее URL-адресом своего собственного скрипта.

Не следует ли регистрировать скрипты перед постановкой в ​​очередь?

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

Например, на wp_loaded:

После того, как вы это сделаете, вы сможете ставить сценарии в очередь, когда они вам понадобятся:

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

Использование условных тегов

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

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

Дополнительную информацию см. в документации по сценариям постановки в очередь администратора в Кодексе WordPress.

Добавить jQuery в WordPress с помощью плагинов

В каталоге плагинов WP также есть множество отличных плагинов, которые вы можете использовать для вставки скриптов в свои записи, страницы или темы WordPress.

Создайте собственную историю jQuery

Получение лучшего понимания jQuery только сделает вашу работу более эффективной. Будь то для вашего собственного веб-сайта или клиентских проектов.

jQuery хорошо известен своей простотой, и, как вы (надеюсь) узнали из этой статьи, добавить простые скрипты jQuery в WordPress очень просто, если вы знаете, как это сделать.

Да, по сравнению с обычным HTML возникают некоторые накладные расходы, но есть и дополнительные преимущества управления зависимостями и ясности.

Кроме того, применяя небольшие хитрости, такие как обход совместимости jQuery с WP по умолчанию, вы сэкономите себе много времени, усилий и избавитесь от раздутого кода.

Используете ли вы jQuery на своем сайте? Какие еще советы и рекомендации по jQuery вы хотели бы видеть в нашем блоге? Дайте нам знать в комментариях ниже.

Дэниел Патаки Здравствуйте, меня зовут Дэниел, и я делаю вещи для Интернета. Я технический директор Kinsta и пишу для ряда замечательных изданий, таких как WPMU DEV и Smashing Magazine. В свободное время я играю в настольные игры или планирую следующую потрясающую офисную игру, такую ​​как совсем не разрушительный Мегашар.

Рик Кроушоу Рик — фанат копирайтинга и маркетинга, который называет домом прекрасную Новую Зеландию (да, она так же прекрасна, как вы слышали). Когда этот киви не произносит слов на странице, вы, скорее всего, обнаружите, что он застрял в странной кроличьей норе на YouTube или запоем комедии положений 90-х годов.

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

Проблема: как добавить jQuery и подключаемый модуль сортировщика таблиц в этот файл .js?

Я пробовал что-то вроде этого:

но это, кажется, не работает.

Как это лучше всего сделать?

Я просто поддержу то, что некоторые другие сказали в своих ответах. Это не очень хорошая идея. Если вы хотите контролировать, какие файлы будут включены в одно место, используйте общий файл на вашем сервере для записи тегов сценариев (например, scripts.php будет генерировать теги сценариев для общих файлов js).

20 ответов 20

@DerFlatulator: мне также нужно отправить переменную в этот включенный скрипт. как это сделать? например, мне нужно отправить переменную itemtype = 11 или itemtype = 22 в этот включенный файл js, а затем использовать ее в этом файле соответственно

Это не работает. Я заменил строку script.scr загруженным файлом (тот же каталог, поэтому просто указал имя файла), а также попробовал ссылку на хост Microsoft jQuery, но это тоже не сработало.

Если вы хотите включить код jQuery из другого файла JS, это должно помочь:

В моем файле HTML было следующее:

Я создал отдельный файл my_jquery.js со следующим:

Ну и что, это все еще хороший ответ, и он может помочь кому-то еще, кто ищет, как это сделать. Добро пожаловать в stackoverflow, R-The_Master!

Вы можете использовать приведенный ниже код для загрузки jQuery в файл JS. Я также добавил jQuery JSFiddle, который работает и использует функцию самовызова.

Другой вариант. Вы также можете попробовать Require.JS, который является загрузчиком модулей JS.

Если вы хотите добавить ссылку на какой-либо файл js, скажем, из своего проекта, вы также можете добавить его напрямую, используя тег ссылки, в Visual Studio IDE это выполняется автоматически путем перетаскивания внешнего файла из обозревателя решений в текущий файл (это также работает для файлов разметки, файлов .js и .css)

Проблема в том, что вы используете внутри скрипта, который завершает тег script. Попробуйте это:

Вот решение, которое я принял как комбинацию некоторых решений, предложенных на некоторых других форумах.

Таким образом, вы можете ссылаться как на файлы css, так и на другие файлы js в одном файле js, таким образом внося изменения в следующий раз только в одном месте. Пожалуйста, дайте мне знать, если у вас есть какие-либо опасения по этому поводу.

Я сделал следующее:

объявил и выполнил следующий код в этом файле

Надеюсь, мои усилия будут оценены по достоинству.

невозможно импортировать файл js внутри другого файла js

Способ использования jquery внутри js

импортируйте js в html или любую другую страницу просмотра, которую вы используете, внутри которой вы собираетесь включить файл js

view.html

default.js

это определенно сработает для вас

Кроме того, эта строка document.write запишет теги script в html, а не в ваш файл js.

Поэтому я надеюсь, что это может помочь вам немного с вашей проблемой

Я считаю, что вы все еще хотите включить этот файл js в свой html dom, если это так, то этот подход будет работать.

  1. Напишите свой код jquery в файле javascript так же, как в своем HTML-доме
  2. Включите фреймворк jquery перед закрытием тега body.
  3. Включить файл javascript после включения файла jqyery

Пример: //файл js

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

Проблема решается созданием элемента script в JavaScript, а затем установкой атрибута src на путь к файлу jQuery.

Выше мы создаем элемент скрипта.

Затем мы устанавливаем атрибут src на путь, как объяснялось ранее. Это может быть установлено на

И последнее, но не менее важное: добавление нового элемента в заголовок документа:

Если вы хотите часто обновлять ссылку на файл jquery на файл новой версии, на вашем сайте на многих страницах, за один раз..

Создайте файл javascript (.js) и вставьте приведенный ниже код, а затем сопоставьте этот файл javascript со всеми страницами (вместо сопоставления файла jquery непосредственно на странице), чтобы при обновлении ссылки на файл jquery на этом javascript файл, который будет отображаться на сайте.

Приведенный ниже код протестирован и работает хорошо!

Вы можете создать базу эталонных страниц без включенных файлов js и jquery. Поместите заполнитель содержимого в основу эталонной страницы в разделе заголовка, затем создайте вложенную эталонную страницу, которая наследуется от этой базовой эталонной страницы. Теперь поместите свои включения в asp:content на вложенной главной странице, наконец, создайте страницу содержимого из этой вложенной главной страницы

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

Кроме этого, вас должен волновать тип создаваемого вами веб-сайта. Вы действительно считаете хорошей идеей включать файлы .js из файлов .js?

просто скопируйте код из двух файлов в свой файл вверху.

Я считаю, что лучше всего использовать это.

Это из проекта Codecademy "Создать интерактивный веб-сайт".

После долгих исследований я решил эту проблему с подсказкой ответа ofir_aghai о событии загрузки скрипта.

В основном нам нужно использовать $ для кода jQuery, но мы не можем использовать его, пока jQuery не загружен. Я использовал document.createElement(), чтобы добавить скрипт для jQuery, но проблема в том, что для загрузки требуется время, в то время как следующий оператор в JavaScript с использованием $ терпит неудачу. Итак, я использовал решение ниже.

myscript.js содержит код, использующий jQuery. main.js используется для загрузки файлов jquery.min.js и myscript.js, обеспечивая загрузку jQuery. .

Вот так это сработало. Использование loadJQueryFile() из myscript.js не сработало. Он немедленно переходит к следующему оператору, который использует $ .

HTML, CSS и JavaScript – это три основных языка Интернета. Мы структурируем наши веб-сайты с помощью HTML, стилизуем их с помощью CSS и добавляем интерактивные функции с помощью JavaScript. На самом деле, большинство анимаций и любых действий, происходящих в результате щелчка мышью, наведения курсора мыши или прокрутки, создаются с помощью JavaScript.

jQuery — это библиотека JavaScript "Пиши меньше, делай больше". Это не язык программирования, а скорее инструмент, используемый для упрощения написания общих задач JavaScript. Дополнительным преимуществом jQuery является совместимость с разными браузерами, а это означает, что вы можете быть уверены, что вывод вашего кода будет правильно отображаться в любом современном браузере.

Сравнивая простое "Hello, World!" программы как на JavaScript, так и на jQuery, мы можем увидеть разницу в том, как они оба написаны.

В этом коротком примере показано, как jQuery может достичь того же конечного результата, что и обычный JavaScript, но в сжатой форме.

Цели

Это руководство предполагает отсутствие предварительных знаний о jQuery и охватывает следующие темы:

  • Как установить jQuery в веб-проект.
  • Определения важных концепций веб-разработки, таких как API, DOM и CDN.
  • Распространенные селекторы, события и эффекты jQuery.
  • Примеры для проверки концепций, изученных в статье.

Предпосылки

Прежде чем приступить к работе с этим руководством, вам потребуется следующее:

  • Базовые знания HTML и CSS. Вы уже должны знать, как настроить простой веб-сайт, и иметь представление о селекторах CSS, таких как идентификаторы, классы и псевдоэлементы.
  • Понимание основ программирования.Хотя можно начать писать jQuery и без углубленных знаний JavaScript, знакомство с понятиями переменных и типов данных, а также с математикой и логикой значительно поможет.

Настройка jQuery

jQuery — это файл JavaScript, на который вы будете ссылаться в своем HTML-коде. Есть два способа включить jQuery в проект:

  • Скачать локальную копию.
  • Ссылка на файл через сеть доставки контента (CDN).

Примечание. Сеть доставки контента (CDN) — это система из нескольких серверов, которые доставляют веб-контент пользователю в зависимости от его географического положения. Когда вы связываетесь с размещенным файлом jQuery через CDN, он может быть доставлен пользователю быстрее и эффективнее, чем если бы вы разместили его на своем собственном сервере.

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

Мы начнем это упражнение с создания небольшого веб-проекта. Он будет состоять из файла style.css в каталоге css/, scripts.js в каталоге js/ и основного файла index.html в корне проекта.

Для начала создайте скелет HTML и сохраните его как index.html .

Ссылка на jQuery CDN прямо перед закрывающим тегом, за которым следует ваш собственный файл JavaScript scripts.js .

Ваш файл JavaScript ( scripts.js ) должен быть включен в документ ниже библиотеки jQuery, иначе он не будет работать.

Примечание. Если вы загрузили локальную копию jQuery, сохраните ее в папке js/ и дайте ссылку на нее в js/jquery.min.js .

На данный момент библиотека jQuery загружается на ваш сайт, и у вас есть полный доступ к jQuery API.

Примечание. Интерфейс прикладного программирования (API) — это интерфейс, позволяющий программам взаимодействовать друг с другом. В этом случае API для jQuery содержит всю информацию и документацию, необходимые для доступа к jQuery.

Использование jQuery

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

Объектная модель документа (DOM) — это метод, с помощью которого JavaScript (и jQuery) взаимодействует с HTML в браузере. Чтобы точно увидеть, что такое DOM, в веб-браузере щелкните правой кнопкой мыши текущую веб-страницу и выберите «Проверить». Это откроет инструменты разработчика. HTML-код, который вы видите здесь, — это DOM.

Каждый элемент HTML считается узлом в модели DOM — объектом, с которым может работать JavaScript. Эти объекты расположены в древовидной структуре, причем они расположены ближе к корню, а каждый вложенный элемент представляет собой ветвь дальше по дереву. JavaScript может добавлять, удалять и изменять любые из этих элементов.

Если щелкнуть сайт правой кнопкой мыши еще раз и выбрать "Просмотреть исходный код страницы", вы увидите исходный HTML-код веб-сайта. Поначалу легко спутать DOM с исходником HTML, но они разные — исходник страницы — это именно то, что прописано в файле HTML. Он статичен и не изменится, и на него не повлияет JavaScript. Модель DOM является динамической и может изменяться.

Самый внешний слой модели DOM, охватывающий весь узел, — это объект документа. Чтобы начать манипулировать страницей с помощью jQuery, нам нужно сначала убедиться, что документ «готов».

Создайте файл scripts.js в папке js/ и введите следующий код:

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

Во вступлении к этой статье вы видели простую фразу "Hello, World!" сценарий. Чтобы инициировать этот сценарий и вывести текст в браузер с помощью jQuery, сначала мы создадим пустой элемент абзаца на уровне блока с примененным к нему демонстрационным идентификатором.

jQuery вызывается и обозначается знаком доллара ( $ ). Мы получаем доступ к DOM с помощью jQuery, используя в основном синтаксис CSS, и применяем действие с помощью метода. Базовый пример jQuery следует этому формату.

Теперь мы собираемся поместить наше собственное "Hello, World!" внутри оболочки jQuery ready(). Добавьте эту строку в ваш файл scripts.js внутри существующей функции:

После сохранения файла вы можете открыть файл index.html в браузере. Если все работает правильно, вы увидите вывод Hello, World! .

Если раньше вас смущал DOM, теперь вы можете увидеть его в действии. Щелкните правой кнопкой мыши на «Hello, World!» текст на странице и выберите «Проверить элемент». Теперь DOM будет отображать

. Если вы просматриваете исходный код страницы, вы увидите только

, необработанный HTML, который мы написали.

Селекторы

Селекторы — это то, как мы сообщаем jQuery, над какими элементами мы хотим работать. Большинство селекторов jQuery такие же, как те, с которыми вы знакомы в CSS, с некоторыми дополнениями, характерными для jQuery.Вы можете просмотреть полный список селекторов jQuery на страницах их официальной документации.

Чтобы получить доступ к селектору, используйте символ jQuery $ , за которым следуют круглые скобки () .

Руководство по стилю jQuery предпочитает строки в двойных кавычках, хотя также часто используются строки в одинарных кавычках.

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

Как правило, чаще всего вы сталкиваетесь с классами и идентификаторами — с классами, когда вы хотите выбрать несколько элементов, и с идентификаторами, когда вы хотите выбрать только один.

События jQuery

В разделе «Привет, мир!» Например, код запускался, как только страница загружалась и документ был готов, и поэтому не требовал вмешательства пользователя. В этом случае мы могли бы написать текст прямо в HTML, не заморачиваясь с jQuery. Однако нам нужно будет использовать jQuery, если мы хотим, чтобы текст появлялся на странице одним нажатием кнопки.

Вернитесь к файлу index.html и добавьте элемент. Мы будем использовать эту кнопку для прослушивания события клика.

Мы будем использовать метод click() для вызова функции, содержащей наш текст «Hello, World!» код.

Вот окончательный код.

Сохраните файл scripts.js и обновите index.html в браузере. Теперь, когда вы нажимаете кнопку, «Hello, World!» появится текст.

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

  • click() — Click: выполняется одним щелчком мыши.
  • hover() — Hover: выполняется, когда указатель мыши находится над элементом. mouseenter() и mouseleave() применяются только к входу или выходу мыши из элемента соответственно.
  • submit() — Отправить: выполняется при отправке формы.
  • scroll() — прокрутка: выполняется при прокрутке экрана.
  • keydown() — Keydown: выполняется, когда вы нажимаете клавишу на клавиатуре.

Чтобы изображения анимировались или исчезали, когда пользователь прокручивает экран вниз, используйте метод scroll(). Чтобы выйти из меню с помощью клавиши ESC, используйте метод keydown(). Чтобы создать выпадающее меню-аккордеон, используйте метод click().

Понимание событий необходимо для создания динамического контента веб-сайта с помощью jQuery.

Эффекты jQuery

Эффекты jQuery работают рука об руку с событиями, позволяя добавлять анимацию и иным образом манипулировать элементами на странице.

Мы сделаем пример, в котором мы открываем и закрываем всплывающее окно. Хотя мы могли бы использовать два идентификатора — один для открытия наложения, а другой — для его закрытия, вместо этого мы будем использовать класс для открытия и закрытия наложения с одной и той же функцией.

Удалите теги current и

из тела файла index.html и добавьте в HTML-документ следующее:

В нашем файле style.css мы будем использовать минимальное количество CSS, чтобы скрыть наложение с display: none и центрировать его на экране.

В файле scripts.js мы собираемся использовать метод toggle(), который будет переключать свойство отображения CSS между none и block , скрывая и показывая оверлей при нажатии.

Обновить index.html . Теперь вы сможете переключать видимость модального окна, нажимая на кнопки. Вы можете изменить toggle() на fadeToggle() или slideToggle(), чтобы увидеть несколько других встроенных эффектов jQuery.

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

  • toggle() — Toggle: переключает видимость элемента или элементов. show() и hide() — связанные односторонние эффекты.
  • fadeToggle() — Fade Toggle: переключает видимость и анимирует непрозрачность элемента или элементов. fadeIn() и fadeOut() — связанные односторонние эффекты.
  • slideToggle() — Slide Toggle переключает видимость элемента или элементов с эффектом скольжения. slideDown() и slideUp() — связанные односторонние эффекты.
  • animate() — Animate применяет пользовательские эффекты анимации к свойству CSS элемента.

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

Заключение

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

С этого момента вы должны лучше понимать возможности jQuery и быть на пути к написанию собственного кода.

Хотите узнать больше? Присоединяйтесь к сообществу DigitalOcean!

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

jQuery – это платформа JavaScript, которая работает очень быстро с очень небольшим кодом библиотеки JavaScript. Он может легко реализовать множество эффектов анимации JavaScript, оперируя объектами DOM, обрабатывая события и обрабатывая взаимодействия Ajax. jQuery может упростить исходный код JavaScript, чтобы повысить скорость разработки и производительность выполнения кода JavaScript. В этой статье я расскажу вам, как добавить ссылки jQuery как в HTML-файлы, так и в файлы javascript, и как использовать jQuery для реализации некоторых базовых анимаций с примерами.

1. Добавьте ссылку jQuery в HTML-файл.

2. Добавить ссылку jQuery в файл JavaScript.

  1. Если вы добавите ссылку jQuery в исходный HTML-код, вы должны добавить приведенный ниже код в каждый раздел заголовка HTML-файла. Недостатком этого метода является то, что если вы хотите использовать новую версию jQuery, вы должны вручную обновить все файлы HTML один за другим, это не очень хороший метод.
  2. Чтобы решить указанную выше проблему, вы можете добавить ссылку jQuery в файл javascript (например, include-jquery.js), а затем включить этот файл js в свои HTML-страницы. Таким образом, если вы хотите использовать новую версию библиотеки jQuery, вам просто нужно обновить файл include-jquery.js. Ниже приведены некоторые примеры.
  3. В этом примере на HTML-странице есть ссылка. Когда вы щелкнете по ссылке, появится всплывающее диалоговое окно с предупреждением, после чего текст ссылки исчезнет. На видео ниже показан эффект.
  4. Все приведенные ниже примеры используют файл test.html, содержащий только одну ссылку.

2.1 Используйте функцию document.writeln() для добавления ссылки jQuery в файл JavaScript.

  1. Добавьте приведенный ниже код js в файл include-jquery.js, а затем импортируйте файл include-jquery.js в test.html.
  2. include-jquery.js
  3. использовать-jquery-когда-jquery-is-loaded.js
  4. test.html

2.2. Добавление jQuery путем создания элемента сценария в другом файле JavaScript.

  1. создать-элемент-js-для-включения-jquery-js-file.js
  2. использовать-jquery-когда-jquery-is-loaded.js
  3. test.html
  4. Вы можете просмотреть исходный код файла test.html в инспекторе Chrome ( Как найти веб-элемент с помощью инспектора веб-браузера ), чтобы найти добавленные элементы скрипта.

3. Пример jQuery.

  1. Этот пример содержит два HTML-файла: hellow-world-alert.html и hello-world-add-number.html.

3.1 Пример оповещения jQuery Hello World.

  1. В первом примере при загрузке страницы будет отображаться диалоговое окно с предупреждением.
  2. На странице также есть кнопка с текстом «Добро пожаловать в мир JQuery». При нажатии кнопки отображаются два диалоговых окна предупреждений, текст первого диалогового окна предупреждения: «Вы нажимаете кнопку», второе диалоговое окно предупреждения text — это исходный текст кнопки, затем для текста кнопки будет задано значение "Желаю, чтобы вам понравился JQuery 🙂", а текст кнопки и цвет фона изменились.
  3. hello-world-alert.html

3.2 jQuery Hello World Пример добавления номера.

jQuery – это облегченная библиотека JavaScript, упрощающая использование JavaScript на веб-странице.

Вы можете выполнять свои действия с меньшим количеством кода по сравнению с JavaScript.

Это упрощает манипулирование документами HTML, обход, обработку событий и выполнение запроса AJAX.

Совместим с большинством браузеров и поддерживает селекторы CSS3 для поиска и изменения стиля свойств.

Как встроить jQuery в HTML-страницу

Содержание

1. Скачать и включить

  • Перейдите на официальный сайт jQuery.
  • Библиотека доступна в двух версиях — сжатой и несжатой. Сжатый файл имеет меньший размер по сравнению с несжатым, потому что в нем нет лишних пробелов и комментариев. Несжатая версия удобочитаема и ее легче отлаживать.
  • Скачать сжатую версию.
  • Используйте, чтобы включить библиотеку в HTML в или .
  • Вы также можете использовать доступную CDN для включения библиотеки.

2. Инициализировать

На веб-странице напишите свой код jQuery в состоянии готовности документа в теге.

Пример

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

Вывод

Нажмите кнопку.

3. Внешний файл

  • Создайте новый файл script.js и поместите в него указанный выше скрипт.
  • Включите script.js после библиотеки jQuery.

index.html

Вывод

Нажмите кнопку.

4. Заключение

Вы можете использовать внешнюю библиотеку jQuery или версию CDN для включения скрипта.

Если вы создали внешний скрипт и используете для него jQuery, его необходимо включить после скрипта библиотеки jQuery, иначе он не будет работать и выдаст ошибку.

Если вы нашли это руководство полезным, не забудьте поделиться им.

Похожие сообщения:

Последние публикации

Категории

© 2016-2022 Makitweb, Все права защищены

<Р> DIV> DIV> h2: экв (0)»данных код = 'PGRpdiBjbGFzcz0nY29kZS1ibG9jayBjb2RlLWJsb2NrLTInIHN0eWxlPSdtYXJnaW46IDhweCBhdXRvOyB0ZXh0LWFsaWduOiBjZW50ZXI7IGRpc3BsYXk6IGJsb2NrOyBjbGVhcjogYm90aDsgd2lkdGg6IDEwMCU7IGhlaWdodDogMjUwcHg7Jz4KPCEtLSBDYXRlZ29yeSAtIDIgKG1ha2l0d2ViLmNvbSkgLS0 + CjxkaXYgY2xhc3M9J2FkaW5zZXJ0ZXJfYWQnIHN0eWxlPSJkaXNwbGF5OmJsb2NrO3dpZHRoOjEwMCU7bWluLWhlaWdodDoyNTBweDtoZWlnaHQ6MjUwcHgiPjxpbnMgY2xhc3M9ImFkc2J5Z29vZ2xlIgogICAgIHN0eWxlPSJkaXNwbGF5OmJsb2NrO3dpZHRoOjEwMCU7bWluLWhlaWdodDoyNTBweDsiCiAgICAgZGF0YS1hZC1jbGllbnQ9ImNhLXB1Yi00MTM3MDIzMTQwNzUzMTI4IgogICAgIGRhdGEtYWQtc2xvdD0iNjI1MzgwOTgyNCIKICAgICBkYXRhLWFkLWZvcm1hdD0iYXV0byIKICAgICBkYXRhLWZ1bGwtd2lkdGgtcmVzcG9uc2l2ZT0idHJ1ZSI + PC9pbnM + PC9kaXY + CjxzY3JpcHQ + CihhZHNieWdvb2dsZSA9IHdpbmRvdy5hZHNieWdvb2dsZSB8fCBbXSkucHVzaCh7fSk7Cjwvc2NyaXB0PjwvZGl2Pgo =' данных блока = '2'>

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