[МУЗЫКА].
Давайте теперь потратим некоторое время, пытаясь понять, как Bootstrap и
jQuery работают вместе для поддержки компонентов JavaScript Bootstrap.
Как мы уже поняли из предыдущего модуля, Bootstrap
имеет ряд интересных компонентов на основе JavaScript.
И мы также узнали, что компоненты на основе JavaScript Bootstrap
включены с использованием jQuery в качестве поддержки.
Так многие из этих плагинов написаны в jQuery.
Их плагины сами могут быть включены индивидуально или
вы можете включить все плагины вместе как единое целое.
В упражнениях мы включили все
плагины JavaScript Bootstrap в нашу веб-страницу.
Мы также видели эту графику в предыдущем модуле,
чтобы помочь нам понять связь между JavaScript, jQuery и
как реализованы JS-плагины Bootstrap.
Таким образом, мы увидели, что компоненты JS Bootstrap в компонентах на основе JQuery и
упрощают их использование на нашей веб-странице.
Мы также узнали, что компоненты на основе JavaScript Bootstrap могут быть использованы
на вашей веб-странице без написания одной строки кода JavaScript.
Вот где атрибуты данных* приходят нам на помощь.
Таким образом, вы можете использовать различные атрибуты, которые мы видели в предыдущем
модуле, чтобы включить многие из компонентов на основе JavaScript Bootstrap.
Если вы хотите больше гибкости с вашими компонентами JavaScript,
то полная гибкость этого API на основе JavaScript
доступна для всех компонентов Bootstrap JavaScript.
Вы можете написать код, используя синтаксис jQuery, а затем использовать
его вместе для управления JS-компонентами Bootstrap.
Мы рассмотрим это чуть более подробно в этом модуле.
Прежде чем мы продолжим дальше, позвольте мне дать вам быстрый обзор jQuery и его синтаксиса
, чтобы мы поняли некоторые из кода, который мы напишем в этом модуле.
jQuery - это очень мощная,
легкая библиотека на основе JavaScript, которая предоставляет ряд различных компонентов.
Это богатая библиотека, которая позволяет писать код для
выполнения HTML или DOM манипуляции.
Это позволяет выполнять манипуляции CSS.
Так, например,
вы можете применить классы CSS к различным элементам HTML через код jQuery.
Это позволяет обрабатывать события HTML,
и когда эти события происходят, вы можете реализовать методы, которые выполняются
в ответ на возникновение этих событий.
jQuery также поддерживает различные эффекты и
анимации, которые могут быть применены к вашим HTML-элементам.
Также jQuery позволяет взаимодействовать с серверным сервером, используя AJAX.
Хотя мы не будем подробно разбираться в этом курсе.
Мы также узнали, что компоненты JavaScript Bootstrap
построены на jQuery.
Эти компоненты используют многие из методов jQuery, которые доступны для
реализации различных функций, которые поддерживают эти компоненты Bootstrap JavaScript.
Давайте кратко рассмотрим синтаксис jQuery.
Теперь, если вы видели код, который мы включили
в предыдущий модуль, специально для
подсказки, вы помните, что что-то начиналось со знака доллара.
Таким образом, синтаксис jQuery реализован с использованием знака доллара.
Знак доллара в начале предложения означает, что это определяет и
обращается к библиотечным плагинам jQuery, которые доступны.
Теперь, когда мы используем знак доллара, вы также поставляете селектор.
Селектор используется для запроса и поиска тех
элементов HTML в вашем DOM, к которым вы хотите применить эту манипуляцию.
Существуют различные способы сделать выбор.
Посмотрим на них на следующем слайде.
Затем третьим аспектом оператора jQuery является действие, которое вы указываете.
Теперь, когда вы выбираете элемент HTML, какое действие вы хотите выполнить
на этом элементе, так что это третья часть, которую вы увидите.
Таким образом, в качестве примера вы можете указать оператор jQuery
, например $ («p») в кодах, а затем .hide.
Таким образом, в этом случае это означает, что, выберите все те элементы HTML,
которые являются элементами абзаца,
начиная с тега p, а затем эти элементы скрывают эти элементы.
Таким образом, действие, которое должно быть выполнено, - это высота,
поэтому это приведет к тому, что все элементы p будут скрыты от вашего
DOM и, следовательно, от отображаемой веб-страницы.
Аналогично, вы увидите позже на нас, используя
заявление, например, доллар, а
затем в кавычках, #mycarousel,
подразумевая, что вы указываете идентификатор определенного элемента HTML,
а затем указывая карусель и паузу.
Мы рассмотрим более подробную информацию о том, что это на самом
деле делает на одном из последующих слайдов.
Но обратите внимание на структуру синтаксиса оператора jQuery там.
Укажите селектор, а затем укажите соответствующее действие, которое будет
выполняться на элементе, который выбран этими селекторами.
Давайте посмотрим на пример Bootstrap jQuery.
Мы вернемся к предыдущему примеру, который мы видели ранее,
где мы вводим всплывающую подсказку.
Итак, когда мы вводим всплывающую подсказку, мы указали скрипт, а
затем внутри скрипта, мы сказали $ (document).
В этом случае документ означает весь документ.
Таким образом, выбранный здесь для всего документа.
Так что для всего документа, и тогда мы уточним готовый.
Готовы действия, которые необходимо предпринять.
Поэтому, когда документ готов, затем выполните эту функцию, которая
указана в качестве параметра для этого готового действия там.
Таким образом, функция, которую мы видели, используется для всплывающей подсказки, указывала его как $, а
затем в скобках, он сказал, data-toggle=» tooltip».
Теперь здесь мы указываем, что выбираем те элементы, для
которых есть атрибут с data-toggle="tooltip».
А затем для тех элементов, которые соответствуют этому критерию, выполните это действие,
называемое включением всплывающих подсказок для этих элементов.
И мы закрываем функцию там.
Таким образом, это указывает, что этот конкретный скрипт
будет активирован для тех элементов, для которых вы применили всплывающую подсказку data-toggle.
Поэтому в основном для тех элементов HTML, на которых вы определили всплывающие подсказки,
вы хотите, чтобы всплывающая подсказка была включена там.
Так вот как мы интерпретируем этот синтаксис этого примера jQuery здесь.
Давайте рассмотрим различные способы указания селекторов.
Таким образом, как мы понимаем из синтаксиса оператора jQuery,
мы всегда следуем доллару, а затем, в скобках, мы указываем селектор.
Как указать селекторы, каковы различные способы, которые вы можете указать селекторы?
Вот некоторые возможности.
Вы можете указать селектор, указав любой конкретный
HTML-элемент, указав тег.
Таким образом, вы можете сказать p, button,
h4, h3 или любой из HTML-тегов напрямую.
И поэтому в этом случае имя HTML-тега указано в кавычках
, и это сформирует ваш селектор.
Когда вы применяете селектор, как это, вы говорите, что все элементы, соответствующие
этому критерию, будут выбраны.
Затем вы также можете указать конкретный HTML DOM
элемент, указав идентификатор этого элемента с помощью #id.
Так, например, мы используем #myCarousel.
Поэтому в этом случае вы говорите, выберите тот конкретный
HTML-элемент, для которого идентификатор является MyCarousel.
Таким образом, это другой способ выбора, указав идентификатор для элемента.
Третья возможность - выбрать
элементы по классам, которые применили к этому.
Так, например, вы можете видеть в скобках, если вы скажете .btn,
то есть
будут выбраны все элементы HTML DOM, для которых вы применили класс кнопки.
Или вы можете еще больше квалифицироваться, указав группу классов,
сказав .btn.btn-default, что означает, что те элементы, для
которых класс кнопки и класс по умолчанию кнопки были применены.
Так что это другой способ,
используя классы, которые применяются к элементу HTML.
Другая возможность заключается в том, чтобы указать атрибут, который был применен
к элементу HTML.
Так, например, вы можете сказать, что атрибуты указаны в квадратных скобках здесь.
Таким образом, вы можете видеть в квадратных скобках href и включить его в кавычку,
что означает, что все те HTML-элементы, для которых был применен атрибут href.
Аналогично, вы можете сказать data-toggle="tooltip»,
который по существу сохраняет все те элементы, для
которых был применен атрибут tooltip data-toggle.
Кроме того, выбрав текущий элемент
, для которого вы хотите что-то сделать, сказав $ (это).
Поэтому смысл, для текущего элемента, который уже был выбран, для
этого сделайте что-то.
И гораздо больше других возможностей.
Итак, это несколько примеров, поэтому вы увидите, что я использую некоторые из них
в примерах и упражнении, которое следует.
Мало того, что вы также можете указать события jQuery,
события, на основе которых вы отвечаете.
Так, например, взаимодействие пользователя
с различными элементами на вашей веб-странице вызовет события DOM.
Так, например, с помощью мыши пользователь может щелкнуть в определенном месте.
Или дважды щелкните, или когда мышь входит и покидает определенное место.
Для клавиатуры вы можете реагировать на нажатия клавиш, нажатия клавиш и нажатия клавиш.
События для форм, когда форма отправлена,
когда происходит изменение
значения определенного входного элемента, и когда конкретный элемент фокусируется, и так далее.
Мы можем даже поговорить обо всем документе.
Таким образом, при загрузке документа, при изменении размера документа,
при прокрутке или выгрузке документа, вы можете реагировать на эти события.
Таким образом, в этом случае поддерживаемые методы событий jQuery включают готовые,
click, dblclick, mousedown, on и т. Д.
Таким образом, это все методы событий, которые
будут выполняться при возникновении любого из этих событий там.
Давайте рассмотрим пример карусели Bootstrap, чтобы увидеть, как
код JavaScript может быть написан для управления действиями карусели.
Итак, для карусели, вы видели уже из предыдущего модуля, размер индекса.
Мы использовали все эти атрибуты.
Поэтому мы использовали атрибут data-slide = «prev|next», или
мы сказали data-slide-to, а затем указали конкретный номер слайда,
где он говорит data-ride+"carousel».
Затем мы определили интервал данных,
интервал для скользящего действия.
Таким образом, для карусели вы можете делать такие вещи, как,
например, вы можете указать элементы управления на основе JavaScript.
Вы можете увидеть $, и в скобках указать, чтобы выбрать те элементы,
карусели, которые включены в вашу страницу, указав .carousel.
Значение всех тех элементов, для которых был применен класс карусели,
а затем после этого вы используете карусель, чтобы указать что-то.
Итак, в качестве примера вы увидите, что я использую что-то вроде этого
в следующем упражнении.
Мы скажем карусель и карусель, и
внутри там вы указываете интервал: 2000,
что означает установить интервал для скольжения 2000 миллисекунд.
Или две секунды, в данном случае.
Таким образом, вы контролируете или изменяете конкретное свойство
элемента JavaScript карусели там.
Карусель также поддерживает многие другие элементы управления.
Так, например, вы можете сказать карусель ('cycle'),
что означает начать цикл элементов слева направо.
Можно сказать карусель («пауза»), чтобы приостановить скользящее действие карусели.
Затем можно сказать карусель (число), так что
она циклирует карусель к конкретному элементу карусели.
И тогда вы можете сказать карусель («prev»),
карусель («next»), чтобы перейти к предыдущему элементу и следующему элементу в моей карусели.
Таким образом, они могут быть вызваны непосредственно из нашего кода JavaScript.
Аналогично, когда
элемент карусели JavaScript находится на вашей веб-странице, это вызывает различные события.
И основываясь на возникновении этих событий, вы можете ответить.
Так, например, вы можете сказать slide.bs.carousel.
Это конкретное событие будет запущено при вызове метода экземпляра слайда.
Аналогично slid.bs.carousel означает, что
это событие запускается, когда оно завершило переход слайда к следующему элементу.
Таким образом, в вашем коде вы можете указать что-то
вроде $ (» #myCarousel «) .on («slide.bs.carousel».
Это означает, что когда начинается это действие слайда, затем вызовите эту функцию,
а затем сделайте что-то внутри этой функции.
Таким образом, такой код может быть возвращен также
для реагирования на события, вызванные поведением вашей карусели.
Рассмотрев некоторые из этих примеров, мы перейдем к упражнению, где мы на
самом деле напишем код на основе JavaScript для управления нашей каруселью.
Мы напишем код, чтобы включить пару кнопок в нашей карусели,
которые будут использоваться для управления скользящим действием карусели.
Итак, что означает, что мы можем приостановить и возобновить скользящее действие нашей карусели.
И мы активируем эти кнопки с JavaScript.
[ МУЗЫКА]