Jquery установить: jQuery | Установка библиотеки

Использование LibMan с ASP.NET Core в Visual Studio

  • Статья
  • Чтение занимает 7 мин

Автор: Скотт Адди (Scott Addie)

В Visual Studio имеется встроенная поддержка LibMan в проектах ASP.NET Core, которая включает в себя:

  • поддержку настройки и выполнения операций восстановления LibMan при сборке;
  • пункты меню для запуска операций восстановления и очистки LibMan;
  • диалоговое окно для поиска библиотек и добавления файлов в проект;
  • поддержку редактирования libman.json — файла манифеста LibMan.

Просмотрите или скачайте пример кода (описание процедуры скачивания)

Предварительные требования

  • Visual Studio 2019 с рабочей нагрузкой
    ASP. NET и веб-разработка

Добавление файлов библиотеки

Файлы библиотек можно добавлять в проект ASP.NET Core двумя разными способами:

  1. Используйте диалоговое окно «Добавьте клиентские библиотеки».
  2. Настройте записи в файле манифеста LibMan вручную.

Использование диалогового окна «Добавьте клиентские библиотеки»

Чтобы установить клиентскую библиотеку, выполните указанные ниже действия.

  • В обозревателе решений щелкните правой кнопкой мыши папку проекта, в которую нужно добавить файлы. Выберите пункты Добавить>Клиентская библиотека. Появится диалоговое окно Добавьте клиентские библиотеки.

  • В раскрывающемся списке Поставщик выберите поставщика библиотеки. CDNJS является поставщиком по умолчанию.

  • В текстовом поле Библиотека введите имя библиотеки, которую нужно получить. IntelliSense предлагает список библиотек, имена которых начинаются с введенного текста.

  • Выберите библиотеку в списке IntelliSense. Обратите внимание, что после имени библиотеки стоит символ @ и номер последней стабильной версии, известной выбранному поставщику.

  • Решите, какие файлы следует включить.

    • Установите переключатель в положение Включить все файлы библиотеки, чтобы включить все файлы библиотеки.
    • Установите переключатель в положение Выбрать определенные файлы, чтобы включить часть файлов библиотеки. После этого станет доступно дерево выбора файлов. Установите флажки слева от имен файлов, которые нужно скачать.
  • В текстовом поле Целевое расположение укажите папку проекта, в которой необходимо сохранить файлы. Каждую библиотеку рекомендуется хранить в отдельной папке.

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

    • При запуске из корневого каталога проекта:
      • используется папка wwwroot/lib, если wwwroot существует;
      • используется папка lib, если wwwroot не существует.
    • При запуске из папки проекта используется соответствующее имя папки.

    После папки указывается имя библиотеки. В приведенной ниже таблице показаны папки, предлагаемые при установке jQuery в проекте Razor Pages.

    Место запускаПредлагаемая папка
    корневой каталог проекта (если wwwroot существует)wwwroot/lib/jquery/
    корневой каталог проекта (если wwwroot не существует) lib/jquery/
    Папка Pages проектаPages/jquery/
  • Нажмите кнопку Установить, чтобы скачать файлы в соответствии с конфигурацией в файле libman.json.

  • Ознакомьтесь со сведениями об установке в канале Диспетчер библиотек окна Выходные данные. Пример:

    Restore operation started...
    Restoring libraries for project LibManSample
    Restoring library jquery@3. 3.1... (LibManSample)
    wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
    Restore operation completed
    1 libraries restored in 2.32 seconds
    

Настройка записей в файле манифеста LibMan вручную

Все операции LibMan в Visual Studio основаны на содержимом манифеста LibMan в корневом каталоге проекта (

libman.json). Вы можете вручную изменить файл libman.json, чтобы настроить файлы библиотек для проекта. Visual Studio восстанавливает все файлы библиотек после сохранения файла libman.json.

Открыть файл libman.json для изменения можно указанными ниже способами.

  • Дважды щелкните файл libman.json в обозревателе решений.
  • В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункт Управление клиентскими библиотеками.
  • В меню Проект в Visual Studio выберите пункт Управление клиентскими библиотеками
    .

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

В Visual Studio предлагаются широкие возможности для редактирования JSON, в том числе раскраска, форматирование, IntelliSense и проверка схемы. Схему манифеста LibMan в формате JSON можно найти на странице https://json.schemastore.org/libman.

При использовании приведенного ниже файла манифеста LibMan извлекает файлы в соответствии с конфигурацией, определенной в свойстве libraries. Далее приводится описание объектных литералов, определенных в libraries.

  • От поставщика CDNJS принимается подмножество файлов jQuery версии 3.3.1. Это подмножество определено в свойстве files — jquery.min.js, jquery.js и jquery.
    min.map
    . Файлы помещаются в папку wwwroot/lib/jquery проекта.
  • Все файлы Bootstrap версии 4.1.3 получаются и помещаются в папку wwwroot/lib/bootstrap. Свойство provider объектного литерала переопределяет значение свойства defaultProvider. LibMan получает файлы Bootstrap от поставщика unpkg.
  • Подмножество файлов Lodash утверждается руководством организации. Файлы lodash.js и lodash.min.js получаются из папки C:\temp\lodash\ локальной файловой системы. Они копируются в папку wwwroot/lib/lodash проекта.
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ],
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "provider": "filesystem",
      "library": "C:\\temp\\lodash\\",
      "files": [
        "lodash.
js", "lodash.min.js" ], "destination": "wwwroot/lib/lodash/" } ] }

Примечание

LibMan поддерживает только одну версию каждой библиотеки от каждого поставщика. Файл libman.json не пройдет проверку схемы, если он содержит две библиотеки с одним и тем же именем для данного поставщика.

Восстановление файлов библиотек

Для восстановления файлов библиотек из Visual Studio в корневом каталоге проекта должен быть правильный файл libman.json. Восстановленные файлы помещаются в проект в расположение, указанное для каждой библиотеки.

Файлы библиотек можно восстановить в проекте ASP.NET Core двумя способами:

  1. Восстановление файлов во время сборки
  2. Восстановление файлов вручную

Восстановление файлов во время сборки

LibMan может восстанавливать определенные файлы библиотек в процессе сборки. По умолчанию восстановление при сборке отключено.

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

  • В обозревателе решений щелкните файл libman.json правой кнопкой мыши и выберите в контекстном меню пункт Включить восстановление клиентских библиотек при сборке.

  • При появлении запроса на установку пакета NuGet нажмите кнопку Да. Пакет NuGet Microsoft.Web.LibraryManager.Build добавится в проект:

    <PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="1.0.113" />
    
  • Выполните сборку проекта, чтобы убедиться в том, что диспетчер LibMan восстановил файлы. Пакет

    Microsoft.Web.LibraryManager.Build внедряет целевой объект MSBuild, который запускает LibMan во время операции сборки проекта.

  • В канале Сборка окна Выходные данные просмотрите журнал действий LibMan:

    1>------ Build started: Project: LibManSample, Configuration: Debug Any CPU ------
    1>
    1>Restore operation started. ..
    1>Restoring library [email protected]...
    1>Restoring library [email protected]...
    1>
    1>2 libraries restored in 10.66 seconds
    1>LibManSample -> C:\LibManSample\bin\Debug\netcoreapp2.1\LibManSample.dll
    ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
    

После включения восстановления при сборке в контекстном меню файла libman.json появляется пункт Отключить восстановление клиентских библиотек при сборке

. При его выборе ссылка на пакет Microsoft.Web.LibraryManager.Build удаляется из файла проекта. В результате клиентские библиотеки больше не будут восстанавливаться при каждой сборке.

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

Восстановление файлов вручную

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

  • Для всех проектов в решении:
    • В обозревателе решений щелкните правой кнопкой мыши имя решения.
    • Выберите пункт Восстановить клиентские библиотеки.
  • Для определенного проекта:
    • В обозревателе решений щелкните правой кнопкой мыши файл libman.json.
    • Выберите пункт Восстановить клиентские библиотеки.

Во время операции восстановления происходит следующее:

  • В строке состояния Visual Studio будет анимироваться значок Центра состояния задач (TSC) с сообщением Операция восстановления начата. Если щелкнуть значок, откроется подсказка со списком известных фоновых задач.

  • В строку состояния и канал Диспетчер библиотек окна Выходные данные будут передаваться сообщения. Пример:

    Restore operation started...
    Restoring libraries for project LibManSample
    Restoring library jquery@3. 3.1... (LibManSample)
    wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
    Restore operation completed
    1 libraries restored in 2.32 seconds
    

Удаление файлов библиотек

Чтобы произвести операцию очистки, которая удаляет файлы библиотек, восстановленные ранее в Visual Studio, выполните указанные ниже действия.

  • В обозревателе решений щелкните правой кнопкой мыши файл libman.json.
  • Выберите пункт Очистить клиентские библиотеки.

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

Во время операции очистки происходит следующее:

  • В строке состояния Visual Studio будет анимироваться значок Центра состояния задач с сообщением Начата операция с клиентскими библиотеками. Если щелкнуть значок, откроется подсказка со списком известных фоновых задач.
  • В строку состояния и канал Диспетчер библиотек окна Выходные данные передаются сообщения. Пример:
Clean libraries operation started...
Clean libraries operation completed
2 libraries were successfully deleted in 1.91 secs

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

Удаление файлов библиотек

Чтобы удалить файлы библиотек, выполните указанные ниже действия.

  • Откройте libman.json.

  • Поместите курсор внутри соответствующего объектного литерала libraries.

  • Щелкните значок лампочки, появившийся в левом поле, а затем выберите пункт Удалить <имя_библиотеки>@<версия_библиотеки>.

Кроме того, вы можете вручную изменить и сохранить манифест LibMan (libman.json). Операция восстановления выполняется при сохранении файла. Файлы библиотеки, которые больше не определены в файле libman.json, удаляются из проекта.

Обновление версии библиотеки

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

  • Откройте libman.json.
  • Поместите курсор внутри соответствующего объектного литерала libraries.
  • Щелкните значок лампочки, появившийся в левом поле. Наведите указатель на пункт Проверить обновления.

LibMan проверит наличие версии библиотеки, более поздней, чем установленная. Возможен один из следующих результатов:

  • Если установлена последняя версия, появится сообщение Обновления не найдены.

  • Будет показана последняя стабильная версия, если она еще не установлена.

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

Чтобы перейти на более старую версию библиотеки, вручную измените файл libman.json. При сохранении этого файла операция восстановления LibMan выполняет следующие действия:

  • удаляет лишние файлы из предыдущей версии;
  • добавляет новые и обновленные файлы из новой версии.

Дополнительные ресурсы

  • Использование интерфейса командной строки LibMan с ASP.NET Core
  • Репозиторий LibMan на GitHub

Свойства · jQuery для начинающих

Powered by GitBook

Кроме атрибутов также есть свойства элементов, к ним относятся «selectedIndex», «tagName», «nodeName», «nodeType», «ownerDocument», «defaultChecked» и «defaultSelected». Ну, вроде бы, список невелик, можно и запомнить. Для работы со свойствами используем методы из семейства «.prop()»:

prop(propName) — получение значения свойства

prop(propName, propValue) — установка значения свойства (также можно использовать hash либо функцию обратного вызова)

removeProp(propName) — удаление свойства (скорей всего, никогда не понадобится)

А теперь выключите музыку, и запомните следующее – для отключения элементов формы и для проверки/изменения состояния чекбоксов мы всегда используем метод «. prop()», пусть вас не смущает наличие одноименных атрибутов в HTML (это я про «disabled» и «checked»), используем «.prop()» и точка.

Давайте на примере properties.html:

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

Теперь приступим к серии экспериментов (не забудьте обновить страничку):

  1. Ставим галочку на чекбоксе посредством метода «.attr()» — $(«#checkbox»).attr(«checked», «checked»)
  2. Теперь снимите галочку мышкой — значение «.attr()» осталось без изменений, значение «.prop()» изменилось
  3. Попробуйте ещё раз поставить галочку, используя метод «.attr()»

Небольшое пояснение сути происходящего. При первом вызове метода «.attr(«checked», «checked»)» проставляется галочка, т.к. изменяются и атрибут и свойство «checked». При повторном вызове уже ничего не происходит, меняется только значение атрибута, которое и так уже «checked».

Следующий эксперимент:

  1. Поставьте мышкой галочку на чекбоксе
  2. Снимите галочку — значение «. attr()» не изменяется
  3. Попробуйте установить значение посредством вызова $(«#checkbox»).attr(«checked», «checked»)

В данном эксперименте интересен следующий момент: вызов метода «.attr(«checked», «checked»)» не срабатывает после того, как пользователь изменял статус чекбокса

Ну и ещё один эксперимент со вторым чекбоксом:

  1. Удаляем галочку — $(«#checkbox-two»).removeAttr(«checked»)
  2. Ставим галочку — $(«#checkbox-two»).attr(«checked», «checked»)
  3. Опять удаляем галочку, используя метод «.attr()»
  4. Повторяем до упаду

Работает — не трожь, мышкой всё сломаете 🙂

Сравните с поведением метода «.prop()»:

  1. Удаляем галочку — $(«#checkbox-two»).prop(«checked», false)
  2. Ставим галочку — $(«#checkbox-two»).prop(«checked», true)
  3. Можем кликать мышкой по чекбоксу и повторять предыдущие пункты в произвольном порядке, всё будет работать как часы

Надеюсь, я достаточно наглядно дал понять, когда надо использовать «. attr()», а когда «.prop()»

Это ещё не всё, у нас же есть ещё свойство «disabled»! Но не волнуйтесь, его поведение более предсказуемо, т.к. пользователь не может вмешиваться в его состояние:

  1. Включаем радио-кнопку — $(«#radio-two»).attr(«disabled», false)
  2. Выключаем — $(«#radio-two»).attr(«disabled», true)
  3. Повторяем

Аналогичное поведение при использовании метода «.prop()»:

  1. Включаем — $(«#radio-two»).prop(«disabled», false)
  2. Выключаем — $(«#radio-two»).prop(«disabled», true)
  3. Повторяем

Ну, как бы, можно использовать «.attr()», но нет!

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

❮ Назад Далее ❯


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

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

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

Скачивание jQuery

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

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

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

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

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


jQuery CDN

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

Google является примером того, кто размещает jQuery:

Google CDN: