Разное

Подключить jquery к html: Что такое jQuery? Как его скачать и подключить к сайту?

04.04.1993

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

« Предыдущая

Следующая глава »


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

Есть два способа добавить jQuery Mobile на ваш веб-сайт. Вы можете:

  • Ссылка на библиотеку jQuery Mobile, хранящуюся в CDN (рекомендуется)
  • Ссылка на библиотеку jQuery Mobile, хранящуюся на вашем компьютере

Ссылка на jQuery Mobile из CDN

CDN (сеть доставки контента) используется для распространения часто используемых файлов через Интернет.
Это значительно увеличивает скорость загрузки для пользователя.

Как и в случае с ядром jQuery, на вашем компьютере ничего не нужно устанавливать; ты только включите следующие таблицы стилей (.css) и библиотеки JavaScript (.js) непосредственно в свой HTML-страница, чтобы заставить jQuery Mobile работать:

jQuery Mobile CDN:




Попробуйте сами »


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

Ширина = ширина устройства устанавливает ширину страницы в соответствии с шириной экрана устройства (которые будут различаться в зависимости от устройства).

Initial-scale=1 устанавливает начальный уровень масштабирования при первой загрузке страницы. браузером.


Ссылка на jQuery Mobile, хранящуюся на вашем компьютере

Если вы хотите самостоятельно разместить библиотеку jQuery Mobile, вам необходимо сначала загрузить это из jQuerymobile.com.

Затем добавьте на свою страницу следующий код:






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

Вам интересно, почему у нас нет type=»text/javascript» внутри тега

При этом вы всегда можете прочитать части, в которых вы не уверены, позже 🙂

Предпосылки

Прежде чем идти дальше, вам понадобится node.js и нпм . Если вы не знаете, что это такое, давайте просто скажем, что npm — это менеджер пакетов, и для него требуется Node. Мы будем использовать npm из кода VS (в командной строке), чтобы помочь нам установить наш файл определения jQuery «IntelliSense» .

  1. Node.js
  2. NPM поставляется вместе с Node, поэтому здесь больше никаких действий не требуется 🙂

Установите Node и NPM и убедитесь, что путь добавлен к вашей переменной среды PATH . Таким образом, вы сможете получить доступ к node и npm отовсюду, не вводя каждый раз путь к файлу. Который станет действительно полезным очень быстро, я вам говорю.

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

После установки откройте консоль ( cmd для пользователей Windows) и введите npm . Если это не сработает, посмотрите следующую ссылку: исправление пути npm в Windows 8. Для других версий Windows это будет очень похоже. Для других ОС я действительно не знаю - Google вам в помощь, хотя… сри

jQuery IntelliSense

Каталог проекта

Теперь, когда Node.js и NPM установлены, давайте создадим папку Visual Studio Code . Я создал свой проект там по адресу F:\Repos\BlogPost\jquery-intellisense .

Вот структура моего проекта:

В моем файле index.html я использовал расширение Bootstrap 3 Snippets для создания базового макета (фрагмент

bs3-template:html5 ). Я изменил связанный файл jQuery на версию 3.1.0, а также включил целостность и crossorigin атрибуты к моему тегу script .

Вот полный файл index.html :

 

    <голова>
        <мета-кодировка="utf-8">
        
        
        Как добавить jQuery IntelliSense в файл JavaScript Visual Studio Code
        
<тело>

Как добавить jQuery IntelliSense в файл JavaScript Visual Studio Code

jquery.com/jquery-3.1.0.min.js" целостность="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous">

Определения типов jQuery TypeScript

Теперь вы можете подумать следующее:

Почему в заголовке написано JavaScript , а сейчас вы говорите о TypeScript ?

Мы будем использовать файл определений типов TypeScript в JavaScript.

Если вы не знаете TypeScript, это тоже хорошая тема для изучения. Но давайте отложим это на другой день…

Глобальная установка TSD

Позволяет глобально установить пакет npm с именем TSD, введя следующую команду:

 нпм установить тсд -г
 

Откройте консоль (терминал VS Code, cmd для пользователей Windows и т. д.), это не имеет большого значения, так как мы устанавливаем пакет глобально.

Установка файла определений типов jQuery TypeScript

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

Введите следующую команду:

 тсд установить jquery --сохранить
 

Это установит файл определений типов TypeScript, который мы ищем.

Теперь структура вашего проекта должна выглядеть следующим образом:

Использовать файл(ы) определения

Давайте откроем наш файл app.js . Если набрать $ все равно ничего нет. Чтобы включить jQuery IntelliSense, нам нужно добавить справочную инструкцию /// в наш файл JavaScript.

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

Вот копируемый фрагмент:

 /// 
 

Это в основном говорит VS Code добавить определения типов, содержащиеся в нашем файле tsd.d.ts , к его фактическому IntelliSense.

Если вы откроете файл tsd.d.ts , вы увидите ссылку на jquery/jquery.d.ts , который является нашим файлом определений типов jQuery (файл, который мы «установили» ранее). Таким образом, связывая tsd.d.ts в наших файлах JavaScript, мы можем включить все загруженные файлы определений типов одновременно (на данный момент у нас есть только jQuery, но кто знает будущее ;)).

Вернемся к нашему файлу

app.js . Теперь у нас есть полный jQuery IntelliSense:

Что делать в вашем следующем проекте

Теперь, когда у нас все настроено и работает, единственное, что вам нужно сделать в вашем следующем проекте, это установить файл определений типов jQuery TypeScript и сослаться на него в ваших файлах JavaScript, как описано в разделе Использование файлов определений. ) раздел.

Итак, команда, которую вы хотите запомнить, это:

 тсд установить jquery --сохранить
 

А этот:

 /// 
 

Обратите внимание, что значение атрибута пути должно соответствовать местоположению вашего файла tsd.d.ts , поэтому вам может потребоваться изменить его.

Заключение

Это было довольно просто, предполагая, что у вас уже установлены Node.js и npm , мы сделали следующее:

  1. Создать папку и добавить в нее файл (или открыть существующий)
  2. Установите TSD глобально, используя следующую команду: npm install tsd -g
  3. Установите файл определений типов jQuery в наш проект с помощью следующей команды: tsd install jquery --save
  4. Добавьте ссылку на наш файл tsd.d.ts в наш файл app.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *