Как установить jquery: Три способа подключить библиотеку jQuery

Содержание

3 способа как установить jQuery на сайт Joomla

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

Зачем на сайт Joomla устанавливать библиотеки jQuery

С “голым” JavaScript, который доступен на сайте Joomla по умолчанию, так сказать в родной комплектации движка, работать очень сложно. Нужно быть заядлым любителем жесткого кода, чтобы бы быстро решать различные задачи на сайте.

И все равно вы хоть что-нибудь, да упустите во время работы. С библиотеками jQuery работать куда проще.

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

Написание скрипта с jQuery становится легкой отдушиной в жизни вебмастера – это уже не основная сложность в его жизни. Ведь на JavaScript приходится писать много, в частности, для визуальных эффектов. А библиотеки скриптов решают эту задачу единичными строками. При этом часто используются основные функции get() и post().

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



Еще многим нравится, что jQuery – это всем доступный фреймворк, который используют лидирующие в Рунете поисковики: Яндекс и Гугл. Установка не будет сложной. В этом вы убедитесь по ходу данной статьи. А еще вы убедитесь в том, что возможности библиотек практически не ограничены. А все потому, что существует тысяча плагинов, которые вы можете скачать и установить на сайт, таким образом дополнив функции jQuery. Что бы вы не хотели добавить к себе на страницу веб-ресурса, знайте, что jQuery это уже умеет, просто нужно найти подходящий плагин для реализации вашей задумки.

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

Как подключить jQuery на сайт Joomla

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

Для начала вам необходимо скачать библиотеки jQuery. Сделать это можно на сайте официального разработчика. Как и многие гениальные вещи, эти библиотеки создали обычные веб-программисты, которым надоел громоздкий JavaScript. Они решили придумать облегченную версию кода, и таким образом создали jQ. Теперь эта библиотека быстро разошлась по миру и уже стала любимой для многих сайтостроителей.

Итак, заходите на официальный ресурс с библиотеками. Находите страницу загрузки и нажимаете кнопку Download. Вы должны сразу определиться, какую версию библиотек вы хотите установить к себе на ресурс. Существует сжатая и облегченные версии jQuery. Суть в том, что в сжатой версии будет сложнее разобраться новичку – там код написан без разбивки на строки и идет одним целом. Сжатая версия на официальном сайте будет называться compressed, а облегченная с пробелами, абзацами и т. д. – uncompressed. Учтите, что хоть облегченной версией пользоваться проще, если вы самостоятельно пишите и редактируете код, но сжатая не спроста предлагается вебмастерам. Она весит меньше из-за меньшего числа символов в файлах, потому загружается быстрее и не так тормозит работу сайта. А значит сжатая версия лучше повлияет на SEO сайта. Так что думайте, что для вас важнее: простота или скорость?


После того, как определитесь с типом библиотек, нажимайте на название версии и скачивайте архив на компьютер. Далее вам необходимо будет зайти на хостинг. Используйте для этого FTP-клиент, которым вы обычно пользуетесь. Зайдите на сервер и найдите ту директорию сайта, в которой хранится index.html. Именно туда вам необходимо будет переместить файл с библиотекой. Если вы загрузили сжатую версию, все содержимое ее будет весить около 100 килобайт. В то время, как развернутая версия библиотек отнимет целых 300 килобайт дискового пространства, то есть она в три раза больше, так что еще раз вас предупреждаем: хорошенько подумайте на счет загрузки именно сжатой версии.

Теперь перейдем к непосредственному подключению jQuery к сайту с движком Joomla. В целом, этот процесс аналогичен процессу подключения css к сайту. Вам нужно будет лишь прописать единичную строку. И выглядеть она будет следующим образом:

<script src="js/название файла библиотек, который вы загрузили на хостинг"> < /script>

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

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

jQuery Easy

Еще один метод подключения – это использование плагина jQuery Easy. Он обеспечит noconflict подключение и работу библиотеки, чтобы в Joomla не возникало каких-либо противоречий при использовании двух фреймворков. Если вы никогда не решали проблемы, связанные с noconflict в коде, тогда вы буквально обязаны себя выручить, установив специальный плагин Easy jQ.

Причины возникновения конфликтных ситуаций в коде могут быть разные. К примеру, вы могли установить очередное расширение, не особо обратив внимание на совместимость его с библиотеками. После активации такого дополнения обязательно возникнет противоречие в коде – Easy jQ вам поможет. Аналогично инструмент Easy jQ выручит вас, если возникли какие-то стычки jQuery с библиотекой MooTools. В любом случае плагин Easy jQ восстановит положение noconflict – конфликты будут устранены и Joomla заработает нормально.

Установка библиотек на Joomla при помощи плагина происходит в автоматическом режиме при помощи возможностей поисковика Гугл. Но с расширением делать это лучше, так как он добавляет на сайт библиотеки с кодом noconflict. Эта функция noconflict является профилактикой для устранения возможных противоречий в работе двух библиотек. Если бы вы не использовали плагин, тогда бы вам пришлось вручную прописывать в коде тег noconflict. А теперь представьте, как бы вам это было “легко” сделать, если вы используете сжатую версию.

Но не стоит жертвовать скоростью работы библиотек, ради того, чтобы иметь возможность вписать noconflict вручную – лучше сразу установите на сайт Easy jQuery.

Тем более, что инструмент Easy jQ можно будет гибко настроить. К примеру, есть возможность активировать его только для отдельных страниц сайта. Так вы еще больше ускорите работу ресурса. Вы сможете настроить работу различных библиотек, а также их стили отображения. Чтобы еще больше увеличить скорость загрузки, можно будет изменить способ закачивания файлов на сайт. Но самое главное – это то, что вам будет очень легко подключить любую доступную версию библиотек. После установки фреймворка вы сможете обновлять версии и удобно переключаться между ними в настройках плагина.

jQuery — Как подключить jQuery?

Подключаем jQuery со страницы своего сайта

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

1. Загружаем свежую версию jQuery

Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию.

Затем надо будет нажать кнопку «Download». Скорее всего, перед Вами появиться jQuery в текстовом виде, и библиотеку можно будет сохранить в нужное место через меню браузера «Сохранить страницу как».

2. Закачиваем jQuery на сайт

Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.

Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.

3. Создаём веб-страницу и вставляем туда ссылку на jQuery

Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот, подключить jQuery можно, если добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.


<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>

После добавления, Ваша страница может иметь такой вид:


<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<title>Страница, на которую я подключаю jQuery</title>
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
</head>
<body>
Контент моей страницы
</body>
<html>

Значение атрибута SRC тега script указывает на путь к внешнему JavaScript, который необходимо подключить на страницу. Обычно так подключается любой внешний JavaScript (хотя не обязательно вставлять тег SCRIPT именно в секцию HEAD, но так принято делать). В нашем случае внешним JavaScript-ом является библиотека jQuery. На момент написания статьи последняя версия jQuery — 1.7.2, но когда Вы будете читать эту статью, ситуация может измениться, следовательно, обратите внимание на имя скачанного файла js и подставьте его в код.

Реализация Lazy Load на Jquery

Видеоурок: Lazy Load на Jquery

 

Что такое Lazy Load

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

И здесь нам на помощь приходит Jquery плагин Lazy Load, с помощью которого изображения на вашем сайте загружаются не сразу, а по мере того, как пользователь прокручивает страницу вниз.

 

 

Подобный эффект вы видите постоянно, когда пользуетесь социальными сетями. Представьте себе, сколько бы загружалась страница социальной сети пользователя, на стене которого 8000 постов, без Lazy Load.

Lazy Load стал неотъемлемой частью сайтов веб 2.0 не только потому что он облегчает вес страницы, но и еще потому что классно смотрится.

 

Реализация Lazy Load загрузки страницы

Для реализации Lazy Load на Jquery создайте такую структуру проекта:

 

Скачайте плагин jquery.lazyload.min.js и положите его в корень или создайте для нее отдельный каталог js и положите туда.

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

Создайте файл index.php и напишите следующий код:

 

В блок head мы помещаем библиотеку Jquery и плагин jquery Lazy Load. В моем примере, картинки называются 1.png, 2.png и так далее.

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

Пример вы можете скачать по этой ссылке. Далее у нас идет Javascript код работы плагина lazy load. documet.ready обозначает, что мы вызываем код только после того, как все DOM элементы загрузятся.

Это делается для того, чтобы не было ошибок выполнения кода. Затем мы применяем к изображениям с классом lazy эффект lazy load.

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

Вы можете поэкспериментировать и пробовать другие Jquery эффекты.

Поместите каталог с файлами на ваш веб-сервер и запустите проект в каталоге lazyload. Затем попробуйте прокрутить страницу вниз.

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

 

Вывод

Как вы видите, реализовать Lazy Load или ленивую подгрузку изображений с помощью Jquery очень просто.

Скачать готовый пример вы можете по ссылке.

В следующих статьях, мы поговорим о том, как реализовать Lazy Load эффект для div элементов.

Подписывайтесь на наш канал в YouTube и группу VK. Впереди у нас много интересного материала для веб-программистов.





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




Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.

Как установить jQuery — манекены

  1. Веб-дизайн и разработка
  2. Javascript
  3. Как установить jQuery

Автор: Стив Суеринг, Джанет Валад (Steve Suehring), Джанет Валад (Janet Valade)

Есть два способа использовать загруженный jQuery: локально или на Сеть доставки контента (CDN). Локальная копия — это просто файл, который находится в корне вашего документа на жестком диске вашего сервера. Версия, размещенная на CDN, означает, что файл jQuery находится на чужом сервере, и вы просто ссылаетесь на него в своем коде.

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

Установить jQuery локально

jQuery доступен для загрузки. Оказавшись там, выберите производственную версию и нажмите Загрузить. В зависимости от настроек вашего браузера вы можете получить страницу, полную кода JavaScript. В этом случае выберите «Сохранить как» в меню «Файл».

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

Файл должен быть помещен в корень вашего документа. Запомните имя файла; она вам понадобится позже.

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

Использовать jQuery, размещенный в CDN

Вариант jQuery с размещением в CDN отлично подходит для разработки. Вам не нужно беспокоиться о загрузке файла или его размещении в нужном месте; он всегда доступен (пока работает CDN). Версии, размещенные на CDN, доступны у многих крупных игроков в Интернете, таких как Google и Microsoft.

Вам не нужно ничего загружать, чтобы использовать jQuery, размещенный на CDN, поэтому этот раздел короткий и приятный. Вы можете найти ссылки на версии, размещенные на CDN, по адресу www.jquery.com/download.

Об авторе книги

Стивен Сюринг — архитектор технологий и автор или редактор нескольких популярных книг по технологиям.Джанет Валад — технический писатель, веб-дизайнер, программист и системный аналитик. Она провела различные технические семинары и написала несколько книг, в том числе PHP и MySQL для чайников, 4-е издание .

jQuery Начало работы


Добавление jQuery на ваши веб-страницы

Есть несколько способов начать использовать jQuery на своем веб-сайте. Вы можете:

  • Загрузите библиотеку jQuery с сайта jQuery.com
  • Включить jQuery из CDN, например Google

Загрузка jQuery

Для загрузки доступны две версии jQuery:

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

Обе версии можно загрузить с jQuery.com.

Библиотека jQuery — это отдельный файл JavaScript, на который вы ссылаетесь с помощью тега HTML

Совет: Поместите загруженный файл в тот же каталог, что и страницы, на которых вы хотите его использовать.


jQuery CDN

Если вы не хотите загружать и размещать jQuery самостоятельно, вы можете включить его из CDN (сети доставки контента).

Google - это пример того, кто размещает jQuery:

Google CDN:



Попробуй сам "

Одно большое преимущество использования размещенного jQuery от Google:

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



Начало работы с jQuery

В разделе «Что такое jQuery?» Вы узнали, что jQuery - это библиотека JavaScript, которая упрощает создание многофункциональных веб-страниц с поддержкой JavaScript.

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

Пошли!

Загрузка и установка jQuery

Самый простой способ загрузить последнюю версию jQuery - через домашнюю страницу jQuery. Загрузите рабочую (уменьшенную) версию, если вы не хотите возиться с самим кодом jQuery.Рабочая версия имеет гораздо меньший размер файла, что означает более быструю загрузку страниц для ваших посетителей.

Сохраните загруженный файл в папку на жестком диске. Файл будет называться примерно так: jquery-1.4.1.min.js . Чтобы упростить задачу, переименуйте файл в jquery.js .

Чтобы использовать jQuery на веб-странице, сначала сохраните страницу в той же папке, что и файл jquery.js . Затем откройте свою веб-страницу в текстовом редакторе и добавьте следующий код в элемент head вашей страницы:

    

Это загружает файл jQuery JavaScript всякий раз, когда веб-страница открывается в браузере, и делает библиотеку jQuery доступной для любого кода JavaScript на странице.

Так как же на самом деле использовать jQuery? Для этого вам сначала нужно понять 2 важных концепции:

  • jQuery объектов и
  • функция jQuery () .

Понимание jQuery объектов

В большинстве случаев при работе с jQuery вы получаете доступ к методам и свойствам объектов jQuery .

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

Для создания объектов jQuery обычно вызывается функция jQuery () , которая объясняется ниже.

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

Загрузить jQuery | jQuery

Ссылка

Загрузка jQuery

Доступны сжатые и несжатые копии файлов jQuery. Несжатый файл лучше всего использовать во время разработки или отладки; сжатый файл экономит полосу пропускания и повышает производительность в производственной среде. Вы также можете загрузить файл исходной карты для использования при отладке сжатого файла.Файл карты - это , а не , необходимый пользователям для запуска jQuery, он просто улучшает работу отладчика разработчика. Начиная с jQuery 1.11.0 / 2.1.0 комментарий // # sourceMappingURL не включается в сжатый файл.

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

ссылка jQuery

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

Загрузите сжатую рабочую версию jQuery 3.5.1

Скачать несжатый, разрабатываемый jQuery 3.5.1

Скачать файл карты для jQuery 3.5.1

Вы также можете использовать тонкую сборку, которая исключает модули ajax и эффектов:

Загрузите сжатую рабочую версию jQuery 3.5.1 slim

Загрузите несжатую, разрабатываемую jQuery 3.5.1 slim build

Загрузите файл карты для jQuery 3.5.1 slim build

jQuery 3.Примечания к выпуску 5.1

Ссылка

Загрузка jQuery с помощью npm или Yarn

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

В качестве альтернативы вы можете использовать команду интерфейса командной строки Yarn:

Это установит jQuery в каталог node_modules . В node_modules / jquery / dist / вы найдете несжатый выпуск, сжатый выпуск и файл карты.

Ссылка

Загрузка jQuery с помощью Bower

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

Это установит jQuery в каталог установки Bower, по умолчанию bower_components . В bower_components / jquery / dist / вы найдете несжатый выпуск, сжатый выпуск и файл карты.

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

ссылка Плагин jQuery Migrate

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

Существует две версии Migrate. Первый поможет вам обновить код jQuery до версии 1.9 до jQuery 1.9 до 3.0. Вы можете получить эту версию здесь:

Загрузите сжатый рабочий файл jQuery Migrate 1.4.1

Загрузить несжатый, разрабатываемый jQuery Migrate 1.4.1

Вторая версия помогает обновить код для работы на jQuery 3.0 или выше, после использования Migrate 1.x и обновления до jQuery 1.9 или выше :

Загрузите сжатую рабочую версию jQuery Migrate 3.3.2

Загрузить несжатый, разрабатываемый jQuery Migrate 3.3.2

link Кросс-браузерное тестирование с помощью jQuery

Обязательно протестируйте веб-страницы, использующие jQuery, во всех браузерах, которые вы хотите поддерживать. На сайте ресурсов для разработчиков Microsoft доступны виртуальные машины для тестирования множества различных версий Internet Explorer.Более старые версии других браузеров можно найти на oldversion.com.

link Предварительные сборки jQuery

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

Загрузить незавершенную сборку jQuery

Ссылка

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

Сети CDN

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

ссылка

Как установить JQuery, Popper JS И Bootstrap 4 В Angular 6

Введение

В этой статье я продемонстрирую, как установить Bootstrap 4 в Angular 6.Есть два способа установить Bootstrap в Angular. Если вы новичок в настройке среды разработки, ознакомьтесь с моей статьей. Щелкните здесь:

Для установки Bootstrap есть два метода:

  1. Прямое использование ссылки CDN в проекте
  2. Использование npm или angular CLI

Первый метод

Шаг 1

Открыть тип браузера https: //getbootstrap.com/ и скопируйте ссылки css и script.

  1. : https://support.microsoft.com/script //cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js "Integльность =" sha384-ZMP7rVo3mIykV + 2 + 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK / l8WvCWPIPm49 "crossorigin =" anonymous ">
  2. /
  3. /strapcapt. 1 / js / bootstrap.min.js "Integльность =" sha384-smHYKdLADwkXOn1EmN1qk / HfnUcbVRZyYmZ4qpPea6sjB / pTJ0euyQp0Mk8ck + 5T "crossorigin ="

        , папка
      , папка
    , папка "crossorigin"

      > в папке src откройте index.html скопируйте и вставьте над ссылками CDN, как показано на изображении ниже.

      Код для ссылки CDN в index.html

      1. HelloWorld
      2. crossorigin = ”anonymous”>

      Шаг 3

      Откройте папку приложения найдите приложение.compponent.html щелкните по нему и откройте rit и замените какой-нибудь темой Bootstrap 4.

      Снимок экрана 1

      Снимок экрана 1


      Код для app.component.html
      1. Navbar
  • Добро пожаловать в angular

  • Bootstrap - это самая популярная платформа HTML, CSS и JS для разработки адаптивных, ориентированных на мобильные устройства проектов в Интернете.

  • Это какой-то текст.

  • Это другой текст.

  • Шаг 4

    Запустить проект


    Второй метод

    Шаг 1

    Откройте index.html и удалите из него все ссылки CDN.

    1. HelloWorld
    2. < base href = "/">

    Шаг 2

    Щелкните проект правой кнопкой мыши и откройте его в командной строке.

    Шаг 3

    Bootstrap зависит от JQuery и Popper js. Чтобы установить Jquery и Popper js, введите следующие команды.

    • Чтобы установить jquery, введите
      npm install jquery - save
    • Чтобы установить popper js
      npm install popper.js --save
    • Чтобы установить bootstrap 4, введите следующую команду:
      npm install ngx-bootstrap [email protected]

    Шаг 4: Откройте папку проекта, найдите папку node_modules; под этим проверьте, установлены ли папки JQuery, Popper js и Bootstrap.

    Скриншот 1

    Скриншот 2

    Скриншот 3

    Шаг 5: Открыть Angular.json из проекта и введите следующий код.

    1. «стили»: [
    2. «src / styles.css»,
    3. «./node_modules/bootstrap/dist/css/bootstrap.min.css»
    4. ],
    5. «скрипты»: [
    6. "./node_modules/jquery/dist/jquery.min.js",
    7. "./node_modules/popper.js/dist/umd/popper.min.js",
    8. "./node_modules/bootstrap/dist/js / bootstrap.min.js "
    9. ]

    Шаг 6: Завершение работающего сервера. Для завершения запущенный сервер нажмите ctrl + c

    Прервать пакетное задание (Д / Н)?
    Введите Y, нажмите, введите
    Теперь введите ng serve , чтобы перезапустить сервер и открыть его в браузере.

    Заключение

    В этой статье я шаг за шагом объяснил установку Jquery, Popper js и Bootstrap 4. Надеюсь, это будет полезно для новичков.


    шагов для установки подключаемого модуля JQuery

    Я подумал, что было бы неплохо перечислить основные шаги, необходимые для установки плагина jQuery на ваш сайт. Это для новичков, которые только изучают магию JavaScript, и это дружественный родственник jQuery. Этот пример был проведен Бренной из HackerYou, и мы использовали популярный Flexslider для нашей демонстрации.

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

    Загрузить библиотеку jQuery (сервер Google)
    Мы использовали библиотеку jQuery сервера Google, это быстро и эффективно. Его нужно загрузить только один раз, даже если вы устанавливаете несколько плагинов. У Google есть множество размещенных библиотек для разработчиков, вам, очевидно, понадобится библиотека jQuery. Скопируйте и вставьте код в вашего HTML-документа.

    Это изображение того, как выглядит код.

    Поместите загруженные файлы в соответствующие папки
    Следующий шаг - поместить файлы, которые вы загрузили, в папки проекта. Поместите файл .css в папку CSS, а файл .js - в папку JS. (Часто бывает две версии файла .js, вы можете увидеть -min в конце одной. В этом файле нет пробелов - если бы вы открыли его в текстовом редакторе, вы бы увидели весь код в одном (очень длинная) строка.В файле без -min есть пробелы, и он более удобочитаем для человеческого глаза. Файл -min будет загружаться намного быстрее, поэтому, вероятно, в ваших интересах использовать его.)

    Свяжите файлы (CSS и JS) в документе
    Теперь, когда вы разместили загруженные файлы в правильные папки, вам нужно связать их в заголовке вашего HTML-документа. Это та же идея, что и при ссылке на обычную старую таблицу стилей .css. Хорошая практика - разместить ваш.css последним в строке, потому что вы, вероятно, захотите переопределить некоторые из предустановленных параметров из плагина, и лучше всего вносить эти изменения в свой документ .css, а не в загруженный документ .css. Подробнее об этом позже.

    Добавить разметку HTML
    Затем вам нужно будет написать (или скопировать и вставить) некоторый HTML, чтобы плагин мог работать. Документация плагина jQuery предоставит вам некоторые инструкции о том, как отформатировать ваш HTML - в основном так, чтобы HTML, CSS и JS взаимодействовали друг с другом и находились на одной странице.

    Вот пример HTML для flexslider

    Добавить JS (первый $ (window) .load, а также фактический JS плагина)
    Документация плагина также предоставит код JavaScript, чтобы плагин работал. Это войдет в теги