[Powered by Google Translate] [Семинар: JQUERY]
[Vipul Шехават, Гарвардский университет]
[Это CS50.] [CS50.TV]
Если вы следуете у себя дома, вы можете получить доступ к своему онлайн слайды
перейдя по этой ссылке.
Это TjjRWj, на bit.ly.
Вы также можете просто пойти в URL напрямую,
который cloud.cs50.net / ~ vshekhawat, что мое имя,
и JQuery.
Я настоятельно призываю вас следовать, если вы наблюдаете у себя дома,
и если вы здесь, также, потому что это довольно интерактивной презентации.
>> Итак, сегодня я собираюсь говорить о JQuery, и первый вопрос,
что JQuery?
В этом году, я знаю, вы, ребята, не распространяется JavaScript
так же подробно, как у нас в последние годы.
JavaScript является, в первую очередь, как раз на стороне клиента языке
которое используется для выполнения сценариев и кода на машине каждого пользователя.
Так у вас есть сервер, который обеспечивает веб-страниц для людей,
но вы можете делать такие вещи, на своей машине,
спросите их машину для отправки запросов на сервер каждые 30 секунд или что-то вроде этого.
Вы можете сделать это с помощью JavaScript.
JQuery просто предоставляет больше возможностей, на вершине JavaScript
, что делает дополнительный материал для вас.
Если вы посмотрите на содержимое на вершине,
который описывает некоторые из вещей, которые вы в состоянии сделать.
В общем и целом, он был создан в январе 2006 года.
Впервые он был задуман в августе 2005 года.
Это было вокруг в течение нескольких лет, и это действительно часть нового движения Web 2.0
которая сделана в Интернет, поэтому блестящими.
Это наиболее широко используемый JavaScript библиотеки.
За 19600000 сайты используют его, и использование по-прежнему растет
в соответствии с builtwith.com, которая, по-видимому, в течение последнего года,
только что был постоянно растет довольно линейно.
Среди топ-10000000 сайтов, есть еще -
около 40% из них в настоящее время его использования.
Facebook использует его, много других веб-сайтов сейчас ее используют.
Вы можете посмотреть на эти статистические данные по своему усмотрению, если вы хотите.
А вы могли бы сказать, что это законно, потому что имеет основание и 13 членов совета директоров,
вместе с командой из 20 человек, которые работают на его на регулярной основе.
Так что это очень широко используется, она имеет. Орг URL, это фантазия,
он имеет спин-офф за другие вещи, так что это большое дело.
>> Почему вы должны использовать это? JQuery очень легкий.
Это означает, что это не огромный файл. Вы можете скачать
уменьшенная файлами, которая без всяких пробел и комментарии, и это только 32 КБ.
Так что это легко просто бросить на своей веб-странице
и просто начать использовать его.
Это также очень эффективно написано, так что не занимает много -
это не замедляет ваш сайт много, когда вы его используете.
Это позволяет реализовать то, что было ранее невозможно.
Есть некоторые аспекты функциональности,
как создание анимации, который обычно был бы очень, очень трудно сделать.
Но в JQuery они на самом деле очень проста.
И есть некоторые вещи, которые раздражают делать,
возможно в JavaScript, как отправка POST запроса,
но, чтобы послать запрос к серверу, вы должны написать
пять или шесть или семь строк кода.
Теперь вы можете сделать это в одну строку кода, в одном вызове функции.
Это действительно упрощает многие вещи, которые вы делаете.
И все спокойные дети используют его. Под этим я имею в виду меня.
В мой последний проект в прошлом году, которое является news.whrb.org,
которая является для радиостанции, я создал этот блог
в котором находится все показывает, что мы сделали, и MP3-файлы для них.
Вы можете просматривать прошлого показывает,
и все это делается с помощью JQuery. Вы можете сказать,
Из-за всех этих анимации, по существу.
Так что если у вас есть - если вы создаете новое сообщение,
Вы видите эти маленькие slideDowns, вот и все делается с помощью JQuery.
И это исчезать - так что такие вещи все это делается использованием JQuery,
и вам не придется постоянно перезагрузите страницу перемещаться по сайту.
Другая интересная вещь, которая формируется с помощью JQuery это представление.
Я использую эту открытую вещь исходным кодом под названием scrolldeck,
который кто-то написал на вершине JQuery.
Если вы действительно посмотрите на исходный код, вы можете видеть, что
они используют этот знак доллара; знаки доллара
используются в JQUERY, чтобы показать, что функция JQUERY функции.
Так что они определении оберткой для JQuery
, что позволяет делать презентации, как это,
и вы можете видеть, что здесь они в том числе исходный файл JQuery,
чего и вам придется включать, если хотите использовать JQuery
в вашем собственном веб-сайтов.
>> Говоря о том, как Вы его установить?
Вы можете просто пойти в jQuery.com и загрузите файл,
добавить его в веб-каталог и включить его.
Так что просто на вершине, в голове метку вашего HTML файла
Вашей основной HTML файл, просто есть эта строка кода
с правильной версией для какой версии JQuery вы используете.
Вы можете скачать его, перейдя в jQuery.com,
Нажмите кнопку "Скачать JQuery", и вы его получили. Вот и все.
А на самом деле, мы можем взглянуть на то, что он выглядит.
Если вы нажмете на скачать здесь, Jquery это.
Это просто один большой файл JavaScript, что выполняет все, что материал для вас.
Это уменьшенная версия, которая не читается вообще.
Вы также можете посмотреть на развитие версии, который доступен
но все еще очень, очень длительным.
Это много чего там.
Вы можете перейти по ссылке состоялся версии Google, о нем.
Так что позволю тебе просто полагаться на Google, чтобы обеспечить это.
Они обеспечивают каждый вариант, доступный в любое время.
Таким образом, вы, вероятно, может рассчитывать на Google разместить его для вас.
Или вы можете по ссылке собственной последней версии JQuery автора.
У них есть URL, который всегда обновлен до последней версии.
Это JQuery-последнее, и есть одна проблема с этим,
который является то, что если обновленный JQUERY и некоторые из предыдущих функциональность
они становятся ретроградированный или которые устарели,
она не может - он может начать, чтобы не получить поддерживаются.
Так что если вы написать сайт с помощью версии 1.8.2,
к тому времени, версии 2.7 выходит
некоторые из функций, которые вы написали больше не работают.
Так что лучше просто скачать файл 32 Кб,
положить его на веб-страницу, и он будет работать вечно.
>> Я собираюсь идти вперед и начать говорить о фактической функциональности JQuery.
Первое, что селекторы. Это то, что JQuery была первоначально задумана предоставить.
И вы можете нажать на документацию, чтобы посмотреть на
Рабочая документация на селекторы Я собираюсь быть покрытие.
Идея селекторов, которые можно выбрать HTML элементы на странице.
Элементов на странице есть идентификаторы и классы и другие аспекты выявления на них.
Там же - они в разном порядке.
Некоторое время они вложены друг в друга.
JQuery позволяет создавать простые запросы, которые извлекают из элементов страницы.
Тогда вы можете манипулировать этими элементами использованием JQuery функции,
которая является манипуляцией разделе мы получим позже.
Вы можете изменить HTML, CSS изменить,
Вы также можете добавить анимацию и функции, которые активируются по определенным событиям.
Так, например, если что-то щелкнуло, вы хотите, чтобы что-то случилось,
Вы можете сделать это с помощью JQuery, а также.
И есть огромное количество способов выбора элементов.
Большинство из них я никогда не использовал, но есть основные,
которые являются довольно важными.
Селектора элемента, например, если вы просто ничего выбора
то есть DIV - Я на самом деле есть код открыт для этого слайда презентации.
Так, к примеру, вот первый слайд.
Здесь мы имеем дел. Если мы на самом деле выбрать все дивы на странице,
это будет просто дать нам массив всех дивы, которые существуют в этом файле.
ID селектор позволяет выбрать все что угодно с данным ID.
Так что, если это, например, эта вещь имеет ID "что"
и если бы мы сделали это с #, что вместо некоторых ID,
было бы просто вернуть массив, который имеет единственный элемент и что в том, что элемент страницы.
Мы также можем комбинировать селекторы Таким образом, имея
выбрать только вещи с идентификаторами, которые дивы.
Так что да. Только выберите дивы, которые имеют этот ID.
Для класса вы просто используете точка, это то же самое, CSS.
Потомок также работает, так что если у вас есть некоторый класс
и это имеет вложенные элементы внутри него - так, например,
есть некоторый класс и он имеет тега привязки в ссылку на другую страницу,
Вы можете использовать этот синтаксис для получения ссылки.
Вы также можете выбрать несколько вещей сразу, просто разделите их запятыми,
использовать любой селектор вы хотите, и вы выберите их все сразу, в одном массиве.
А тут еще и не селектором, так что вы можете выбрать все дивы
, которые не имеют некоторый определенный класс.
И это только полезный способ получить введение в выборе, как это работает.
Я покажу несколько конкретных примеров в секунду.
>> Расширенный селекторы - это лишь несколько примеров.
Существуют десятки из них, но если вы хотите, чтобы выбрать все теги изображения
в течение некоторого элемента, то вы просто делаете: изображения.
Если вы хотите выбрать четные элементы, например, если есть 20 из них,
Вы хотите выбрать 0, 2, 4, 6 и так далее,
Вы делаете: даже, или вы также можете сделать: странно.
Это псевдо-селекторы, что означает, что они на самом деле вычислить
любой другой элемент, а не просто собирается и выбрав все из них.
Вы также можете - каждый элемент может иметь атрибуты.
Так, например, класс = центр также атрибут.
Для этого тега привязки, HREF, гипертекстовой ссылки, является атрибутом также.
Таким образом, вы можете выбрать то, что ссылки на конкретную страницу или просто - это действительно общая.
Вы можете выбрать все что угодно с любой атрибут, который вы хотите.
А потом, также, содержит атрибут.
Если вы, например, хотел, чтобы выбрать все элементы ввода
, которые содержат слово "проход" в качестве имени из них,
Если у страницы есть блок ввода текста
это называется "пароль", что бы быть одним из способов вы можете выбрать, что.
И есть еще много. Вы можете пойти дальше и посмотреть на документацию
и увидеть конкретные примеры того, как это работает.
>> Следующим важным моментом является DOM манипуляции.
После того как мы выбрать элементы, мы хотим на самом деле делать вещи с ними.
До сих пор мы не смотрели на это вообще, но если вы посмотрите на документацию,
Там на самом деле много, что мы могли сделать.
На данный момент, мы собираемся, чтобы выбрать элементы на этой презентации
и манипулировать их с помощью JQuery.
Потому что это реализуется с помощью JQuery, мы имеем доступ к JQuery библиотеки,
и мы можем использовать эти функции в этом коде.
Одна полезная вещь, что вы можете не знать о том, консоль.
И Google Chrome является то, что я использую. Вы можете нажать Alt команды J
или управления ALT J, чтобы открыть консоль.
В Firefox я думаю, что это команда сдвига К или управление переключением К.
В Safari вы должны пойти изменить некоторые настройки.
Там в ссылку, если вы хотели бы это сделать, но я рекомендую получить Chrome или Firefox.
Так что давайте откройте консоль, это здесь.
Она позволяет в основном только делать все что угодно.
Таким образом, вы можете просто ввести в создаем переменную с именем х,
х = 5, давайте посмотрим, что х + 2.
Вы даже можете сделать что-то вроде CS + Посмотрим, х + 45, которые будут CS50.
Вы можете просто сделать некоторые типичные вещи JavaScript.
Но вы также можете сделать JQuery здесь.
>> Итак, давайте посмотрим на это первым аспектом здесь.
Мы собираемся создать переменную HTML, который является строкой.
Она имеет тег абзаца в нем, что называется новым текстом.
Так что у нас есть этот HTML, это некоторый новый текст в теги абзаца.
Теперь мы действительно хотим, чтобы добавить его на страницу.
Я поставил его так, чтобы HTML для этого абзаца, этот титул здесь, добавление ID.
Если мы выбираем добавление идентификатор, а затем добавить к нему
HTML переменной я только что создал,
она будет добавить, что HTML в конце, сразу после этого тега абзаца.
Так что если мы это сделаем, - мы выбрали этот пункт,
и мы назвали добавление функции с переменным HTML я просто добавил,
она будет добавить, что новый текст прямо на странице.
Мы можем также соответствующим образом исправить, что означает, он будет направлен, в начале этого элемента.
Таким образом, есть некоторый новый текст в начале и после него.
Я могу идти вперед и обновить, чтобы избавиться от этой вещи я только что сделал.
Но это пример того, как можно использовать Prepend и добавить методы
манипулировать материал на страницы, добавить некоторые HTML.
>> Вы также можете изменить классов.
Назад в этом стиле файл, я создал это для победы класса
Текст, который имеет красный цвет, некоторые цвета фона, текста и тени.
Это выглядит отвратительным, но не могу на самом деле -
настоящем пункте, соответствует классу ID.
Так что я могу добавить класс для победы.
Я могу выполнить это в консоли,
и что будет добавить, что класс, и теперь он выглядит отвратительным, как и ожидалось.
CSS автоматически будет применяться к классам, что вы -
если есть CSS для класса, он автоматически будет применяться
если вы измените классом элемента.
Тогда мы можем просто удалить его с помощью Remove Class.
Так что если у вас есть предопределенные классы, как красный подчеркиваются,
а затем вы хотите применить к элементам тех,
Вы не должны сделать все, CSS стилей каждый раз.
Вы можете просто добавить класс к элементу, а затем это автоматически станет -
она будет автоматически искать подходящие для этого класса.
Мы также можем удалить вещи, так что я собираюсь, чтобы выбрать все дивы
на странице и удалить их.
И что это будет выглядеть?
Это будет выглядеть, как будто ничего, так что нет на самом деле ничего не осталось.
Мое выступление не стало.
Я могу обновить и привести его обратно, к счастью,
Потому что это просто ходит раз,
но это пример удаления, если вы хотите, чтобы полностью уничтожить элемент со страницы.
>> Вы также можете переписать, и я собираюсь, чтобы выбрать все теги абзаца на странице
и заходите внутрь их и заменить любым текстом они имеют в них
с только слово "тестирование".
Если вы сделаете это, вы замените каждый абзац на странице с этого тестирования.
Да. Они все заменены тестирования.
Вот пример доступа к тексту и перезаписи.
Вы также можете получить информацию, и это действительно здорово для ввода.
Если у вас есть поле ввода, что люди набрав вещи в,
люди набрав в него вещи,
Здесь мы выбираем входные, любой вход тега с типом текста.
В этом случае есть только одно поле ввода в целое представление,
поэтому мы просто выберите первую, а затем мы вызываем функцию Val на нем.
, Который возвращает значение, а для ввода,
Значение только что бы ни случилось, чтобы быть внутри него.
Так что, если мы сделаем это, он просто возвращает строку материал.
И если мы называем его снова после написания больше материала, она превращается в больше вещей.
Вот один отличный способ доступа к элементам поле ввода, а затем проверьте,
это адрес электронной почты, это является допустимой датой, например.
Вы можете просто получить вещи мгновенно, как люди набрав его,
а затем проверить, является ли это действительно, отправить его обратно на сервер, делать все, что хотите с ним.
И это, как вы получаете доступ, что находится внутри этих ящиков.
>> Вы также можете изменить CSS напрямую, так что вместо добавления
класса, который имеет некоторые предопределенные свойства,
вы можете просто добавить любой CSS вы хотите что-нибудь.
Так давайте выберем тело, которое всей презентации,
и цвет является свойством, которое определяет, какие цвета текста.
Если мы изменим его на красный, весь текст на странице станет красным.
Мы можем сделать что-то вроде синий цвет фона
там мы идем, это красиво.
Вы можете делать все что угодно с этим.
Используя свойство CSS, вы можете реально изменить, как что-то выглядит в любое время.
Следующим важным моментом является эффектов.
Эффекты в основном такие же вещи, как изменение CSS,
но они на самом деле обеспечивают некоторую дополнительную анимацию к нему.
Таким образом, вместо того, чтобы просто показывать или скрывать что-то или изменения цвета,
Вы можете фактически сделать его анимированным.
Вот документацию, если вы хотите взглянуть на обширную документацию на него.
Но я собираюсь охватить основные из них.
Есть Отображение и скрытие свойств.
Показать / скрыть номер действительно соответствует этому целую коробку,
так что если я скрыть это, он просто исчезнет.
И я могу показать его снова, если я хочу, чтобы сделать его вернуться.
И он вернулся. Это на самом деле не исчезнут,
Я фактически не удалить его со страницы, я просто установить свойство CSS видимости в скрытом
так что вы не можете видеть его больше.
Там же скользить вверх и скользить вниз, что позволяет иметь такой эффект.
Он скользит до исчезают, а после того, как исчезает
Вы можете двигать его вниз, чтобы он вернулся. А теперь он вернулся.
Там также это эффект затухания, которое - исчезают ID соответствует этой рамки.
Если я исчезать до нее, то она будет постепенно исчезать.
Я могу также исчезают его, и он вернется.
Вы также можете сделать, чтобы исчезать, который специфичен для функция фейдера.
Вы можете иметь его исчезать с каким-либо конкретным непрозрачность, что вы хотите.
Так что если вы исчезают так медленно 0,5, это станет половину видимой.
Я могу сделать это пойти в 0,1, и обратно в 1, чтобы сделать его полностью видимым.
Вот только анимацию, которое вы можете сделать.
>> Есть также переключатель эффектов.
Так что я собираюсь, чтобы выбрать переключение ID, который соответствует этой рамки,
и на этой DIV вы можете позвонить Toggle; если это видимо он станет невидимым,
если это невидимое станет видимым.
Так что я просто назвал эту функцию переключения в два раза, первый из которых был
то же, что скрывать, на второй вызов было то же самое, как шоу.
И вы также можете сделать это с помощью переключения исчезают,
которая делает то же самое, за исключением того, фактически исчезает.
И то же самое с горкой переключения.
Есть прикован эффекты, а также, что означает,
При выборе элемента и просто позвонить куча анимации его методы,
Если вы хотели, чтобы исчезать, а затем сдвиньте вниз,
а затем прятать и затем исчезают в, он будет делать их в ряд.
Так исчез, вернулся - по некоторым причинам, шкура не произошло.
Давайте попробуем его. Да, так что исчез, и затем это соскользнула.
И есть еще много. Вы можете использовать функцию анимации
чтобы создавать свои собственные анимации, которая является довольно сложной,
но она дает вам бесконечную расширяемость.
Вы можете сделать любой вид анимации вы хотите.
Вы также можете использовать очереди стоять в очереди несколько анимаций одновременно.
Так что если вы хотите, чтобы что-то покупать на странице,
слайд с верхнего правого в нижний левый, вы можете сделать это,
и просто есть куча действий идущих друг за другом.
>> Следующее, что мы собираемся поговорить о событиях.
События позволяют - до сих пор, мы только что печатал вещи в консоли
и что является одним из способов, чтобы это произошло,
но на реальной странице, вы не собираетесь быть в состоянии
делать вещи, типа пользователя в консоли.
Вы хотите, чтобы то, что происходит автоматически.
Для этого вам нужно использовать события, которые активируют на некоторых определенных происходит событие.
Вы можете проверить документацию для получения полной информации.
Итак, давайте посмотрим. Мы хотим, чтобы скрыть или показать окно,
но сейчас эта кнопка ничего не делает, потому что я не выполнил его еще.
Я собираюсь пойти в фактических HTML страницы.
Вот слайд. Там в DIV для слайда.
Он имеет класс слайда.
Там в тексте. Теперь, есть этот флажок и кнопку ящика.
Как бы мы на самом деле сделать это исчезнуть?
Прежде всего, давайте напишем функцию, которая делает текстовое окно ID исчезают.
Это синтаксис Funtion, давайте просто называть это hideTheBox.
Она не принимает никаких аргументов, потому что нет никаких аргументов, которые должны быть приняты.
Мы можем выбрать поле Идентификатор.
Таким образом, используя JQuery выбора, мы можем выбрать окно ID,
а потом просто заставить его исчезнуть.
Давайте сделаем это постепенно исчезают.
Если мы вдруг эта функция в реальной консоли,
мы могли бы определить эту функцию, мы можем называть hideTheBox, и она работает.
Но мы хотим, чтобы это произошло, когда кнопка нажата на самом деле.
Чтобы сделать это, мы должны использовать события.
Чтобы привязать событие к некоторым конкретным кнопки или некоторые действия происходит,
мы должны выбрать элемент, что событие вызовет -
или, что будет инициировать событие, извините.
>> Итак, прежде всего, давайте выберем поле Код кнопки
потому что это кнопка, и теперь, для этой кнопки,
мы хотим создать анимацию при нажатии.
Так что эту функцию мыши.
Она позволяет связать другую функцию к нему.
Эта функция принимает другую функцию в качестве аргумента
мы можем передать в функцию hideTheBox,
и всякий раз, когда эта кнопка нажата, эта функция автоматически выполнит.
Так что это будет работать, если мы сохраним это, я обновления,
и - одну секунду, мне очень жаль.
Позвольте мне исправить это действительно быстро.
Хорошо. Там мы идем. Так что теперь поле исчезает, когда мы нажимаем на кнопку.
Мы также можем изменить это просто fadeToggle,
изменить его, чтобы скрыть или показать окно,
и это также будет работать тоже, если мы обновляем.
Мы можем скрыть это, мы также можем показать это, и что будет продолжать работать.
Другое дело, что мы можем сделать, мы на самом деле не надо определить этот hideTheBox функции
перед вызовом функции мыши.
Так вместо определения функции и вызов hideTheBox,
мы только собираемся называть это если эта вещь кнопки.
Таким образом, мы можем определить его анонимно здесь,
которая является функцией, которая имеет JavaScript.
Вы можете определить функцию; нормально, мы бы сказали, функции hideTheBox
с аргументами, но вместо этого, мы можем просто сказать не функционируют аргументов,
начать фигурной скобки, определяющие функции,
близко, что фигурной скобки, а потом просто определить функцию здесь,
в течение первых скобках и последней скобкой
, которые соответствуют аргументам функции мыши.
Так что мы передаем в этой функции, мы можем скопировать эту строку кода прямо здесь,
и что будет делать одно и то же.
А теперь у нас нет этой случайной функции fadeTheBox
, который сидит вокруг без всякой видимой причины.
Функция была определена анонимно, он не имеет имени.
Это будет выполняться только когда мы нажимаем на кнопку ящика.
Так освежая, еще раз, еще раз, и вы можете видеть, что он все еще работает.
И вот как создавать события.
>> Есть много разных событий, которые мы можем использовать.
Я собираюсь вернуться в режим с помощью консоли, чтобы просто показать вам, как они работают.
Идентификаторы для каждого из этих соответствуют каждой коробке.
Так это поле Щелкните ID, на этот раз идентификатором ключа, и этот мышь ID.
Еще одна вещь, то, что есть эта функция действия; а не вводить его каждый раз,
Я на самом деле пошел вперед и определил эту функцию действия здесь.
Он делает то же самое, что и hideTheBox функции.
Он получает эту коробку и либо постепенно изменяется оно исчезает или его дюйма
И именно поэтому мы можем использовать его здесь.
Так что, если мы нажмем на эту Щелкните ID, мы хотим сделать коробку исчезать или появляться.
Это то же самое, что и кнопка, которая у нас была в последнем слайде.
Теперь после того, как мы называем это, мы можем нажать на эту и окно исчезает,
затем щелкните на нем снова и снова появится окно.
Это довольно просто. Дважды щелкните делает то же самое,
за исключением того, требуется двойной щелчок.
Так что если вы щелкните на ней и нажмите на нее снова ничего не случится,
но если вы дважды щелкните быстро, то оно исчезнет.
Если вы дважды щелкните снова, он вернется.
Так что это довольно просто.
Ввод с клавиатуры немного странно, я не думаю, что это на самом деле работает в этом примере
потому что ключ вниз, ключевые и нажатием клавиши и других ключевых действий
не активируете независимо от того, какой элемент вы связать его с.
Например, даже если я связан вниз для тела или что-то еще полностью,
то это обошлось бы активировать независимо от того - это не конкретно.
Я не должна быть перейдя по этой и нажмите клавишу, чтобы сделать что-нибудь исчезнуть.
Было бы быть активированы независимо от того, элемент, который я в настоящее время нахожусь дюйма
Так что это на самом деле не работают в данном примере
потому что он не узнал меня, как ввод вклад в DIV ввод с клавиатуры.
>> Но если вы посмотрите на действия мыши,
Первый из них парят, и он может сделать некоторые из этих использованием CSS.
Если вы используете CSS, вы можете создать его так, чтобы при наведении на что-то,
то его изменение стиля.
Но использование JQuery вы можете изменить стили и другие вещи.
Так, например, мы собираемся называть действия, если мы наведем курсор мыши этой див.
Это означает, что если мы навести на нее, то окно исчезнет.
Если мы будем двигаться от него, вновь появится окно.
Если мы называем это и навести на нее, коробка действительно исчезает,
и как только мы уходим, он возвращается.
Если мы назовем эту функцию при наведении мыши на ID,
что соответствует этой рамки, то, если мы наведем курсор мыши коробки,
Затем бокс будет на самом деле исчезают - это бытие фанк прямо сейчас, но -
Если мы отойдем от него, он вновь появится. Сейчас это назад по некоторым причинам.
Введите мыши и функции перемещения мыши в чем-то похожи, но немного отличается.
Мышь ввести только активизируется, когда мышь входит в коробку, как и ожидалось.
Так что, если вы двигаетесь в этом, то оно исчезнет.
Но это не будет снова появится, когда вы уходите, вы будете иметь, чтобы вернуться на него для того, чтобы вернуться.
Там также функции перемещения мыши, которая будет активировать
когда мышь даже присутствует в коробке.
Так что будем просто продолжать идти, Плавное появление и исчезновение.
И это на самом деле Лесоповал - Это кажется, что это просто исчезают, и выйдет,
но это на самом деле вход намного больше действий, чем это,
поэтому, когда вы уходите он будет просто продолжать идти, потому что вошли как тысяча из них.
Может, не тысяча. Может быть, пять.
Он регистрирует более того.
Дело в том, все действия мыши, есть многие из них.
Вы можете прочитать о других, но все они немного отличаются,
и вы можете выбрать ту, вам нужно
для какой конкретной цели вы пытаетесь сделать.
>> Следующее, что я хочу поговорить о том, AJAX.
AJAX, я знаю, мы не охватили JavaScript в столько глубины в этом году,
так что я просто буду говорить о AJAX вообще ни на минуту.
AJAX расшифровывается как Asynchronous JavaScript и XML.
Это в основном, например, когда вы на Facebook, и это толкает вам уведомление
это потому, что AJAX работает на вашем веб-браузере.
Каждые несколько секунд ваш браузер на самом деле
собираются серверы Facebook, спрашивая их, у вас есть что-нибудь новое для меня,
а затем он возвращается к вам.
Это позволяет отправлять запросы на сервер
фактически без необходимости загрузки страницы.
Так что нормально, если вы используете только PHP и базы данных,
у вас есть, чтобы обновить страницу, прежде чем получить новую информацию с сервера.
Но использование AJAX, можно потянуть за эту новую информацию постоянно,
или тянуть за него, когда вы нажимаете на кнопку или что-нибудь подобное.
Таким образом, это позволяет нам посылать запросы без перезагрузки страницы,
и мы можем использовать либо получить или подайте запросов.
>> GET запросы, например, если вам в Google.com
и делать Q = тест. Это дает им запроса тест.
И это GET запрос, потому что это проходящий в эти параметры в URL себя.
POST запрос, как будто вы отправляете их по почте.
Это, как вы положите его в письмо и отправить его к ним,
но они на самом деле не увидеть содержимое. Они не видны в URL.
Вы не можете напрямую ввести его, вы должны отправить его чуть ли не тайком.
Это в должности.
Но использование JQuery, вы можете сделать GET и POST запросы
гораздо легче, чем вы обычно могли просто использованием JavaScript.
Вы можете запросить использованием API, получаем запросы, и вы также можете проверить информацию для входа.
На следующей странице, я создал этот, который спрашивает: "Что у нас на обед?"
использованием Гарвардского еду API, так что давайте тянуть, что вверх.
Это всего лишь пример того, как можно использовать JQuery сделать GET запрос к API
и получить информацию от него.
Поэтому мы хотим, чтобы посмотреть меню на сегодняшний день,
и мы хотим посмотреть, что у нас на обед.
Вот URL создать GET запрос в JQuery.
Вы используете $. получить функцию.
Первым аргументом является URL, так что то, что Вы запроса.
Тогда следующий аргумент является функцией, которая выполняется при GET запрос выполнен.
Таким образом, вы отсылают некоторые запрос на сервер, ждать его, чтобы вернуться.
Когда он вернется, вы собираетесь предпринять некоторые действия с данными, что вернулся с сервера.
Давайте пойдем дальше и код это также.
Я не закодировал это либо, нарочно.
Вот что предстоит сделать. Прежде всего, давайте использовать привязку события
так что при нажатии на эту кнопку, мы посылаем GET запрос.
И когда это GET запрос возвращается с некоторым данным,
мы собираемся записать его в эту ID DIV информация еды.
Прежде всего, давайте выберем ID еду кнопки.
Когда она нажата, мы хотим, чтобы что-то сделать.
Давайте просто сделать его анонимным фикция, как и прежде.
Можно обернуть эти фигурные скобки,
и когда эта кнопка нажата, мы хотим послать GET запрос
чтобы проверить, что у нас на обед.
Чтобы сделать это, мы можем просто типа в $. Получить.
Это JQuery функции, используя знак доллара.
Это займет всего пару аргументов. Первым из них является URL,
вторая функция обратного вызова, функции, вызываемой
когда это на самом деле возвращает запрос.
Давайте просто построить URL в первую очередь.
Мы можем получить его из API, что Давид написал.
Движение здесь, мы можем видеть, что это food.cs50.net/api/1.3/menus,
а затем вы просто передаете в названиях параметров, которые вы хотели бы.
Таким параметром 1 Значение 1.
Похоже, что стандарт даты, даты начала, по умолчанию сегодня
Если вы ничего не введете, а также дата окончания по умолчанию
на сегодня, если вы ничего не введете.
Это то, что мы хотим. Мы хотим, чтобы просто получить информацию на сегодняшний день.
>> Мы хотим, чтобы формат, который будет в JSON.
Вот только произвольные, вы можете использовать любую форму, которую вы хотите.
Вы можете использовать CSV, JSON, но это нотации объектов JavaScript.
Это очень легко для JavaScript, чтобы понять, что это значит,
и мы можем напечатать его более легко, что путь.
Итак, давайте просить его в JSON, и запрос обеда давай.
Так еды = обеда. Просто, чтобы описать, что URL, мы идем сюда.
Там в меню. Первым параметром является выход = JSON
потому что это то, что мы хотим, и вы разделите с параметрами и.
Второй параметр - Я не помню.
Питания. И мы хотим обеда =.
Вы можете проверить это URL, введя его в адресную строку браузера и идти в него.
Это даст вам некоторое выход. Это просто куча вещей, что у нас на обед.
Именно в этом формате уродливым. Мы хотим распечатать на нашей странице в лучшем формате.
Так URL правильный, Теперь нам нужно написать функцию
перезвонить при успешном выполнении запроса.
Эта функция будет фактически принимать аргумент. Это будет данных.
Данных является то, что возвращается из GET запрос после GET запрос делается.
Мы можем сделать фигурные скобки; здесь мы пишем анонимные функции
, которая выполняет, используя эти данные, когда мы получаем информацию обратно.
Так что данные, когда мы набрали в этом URL,
это то, что данные собирается выглядеть. Это собирается быть эта огромная строка.
Но хорошо то, JavaScript может разобрать его с помощью JSON.parse функции.
Поэтому давайте создадим новую переменную по имени разбора данных.
И анализировать данные массива объектов.
Каждый объект содержит информацию, такую ​​как - ну, давайте посмотрим.
Она имеет даты, еда, категория, рецепт, все эти другие вещи.
Так что давайте просто распечатать имя для каждого из них.
Переберем целый ряд вещей, которые мы вернемся из этого,
и просто распечатать каждый - вывода названия каждого из них.
Это цикл.
>> JavaScript имеет полезные синтаксиса, где вы можете создать переменную и петля над массивом,
Var и я просто итератора, чтобы вместо того, чтобы делать Var = 0,
Я был меньше, чем длина, я + +, вы можете просто сделать уаг я в анализируемых данных.
В этом примере анализируемых данных (I) будет соответствовать текущим элементом
массива, фактическое объекта.
И мы хотим, чтобы получить имя из него.
Так что давайте просто делать имя.
И последняя вещь, мы собираемся иметь некоторые JQuery снова.
На самом деле добавить его в DIV, DIV эту еду информация, которая в настоящее время пуст.
Так что давайте, что выбрать.
Мы будем использовать JQuery и выберите еды информация DIV ID или ID еды информация, извините.
Мы хотим добавить к этому.
Если бы мы сделали тест, например, было бы просто перезаписать его каждый раз.
Так что мы можем просто добавить это.
Текущего элемента в массиве, мы получим имя из него,
и мы добавим его в конце ID DIV информация еды.
А потом просто, чтобы сделать ее более чистой,
мы также добавляем строки так что это не все в одной строке.
Так что, если все пойдет хорошо, то должно быть хорошо -
Прежде всего, всякий раз, когда эта кнопка нажата,
он пошлет с GET запрос к этому URL.
Когда данные возвращается от него, это будет разобрать его,
превратить его в JSON, петля на весь массив, представляющий, что данные,
а затем добавите имя и строки
к каждой строке в этом ID еды информацию, которая ранее была пустой.
Так возвращаясь к этой странице будет обновлен,
клик, выяснить - она ​​не работает. Это печально.
И вот тут приходит дюйма отладки
Index.html, линии 1.
Интересно.
Хорошо, ну, а не тратить время, делая это, я просто собираюсь
подтянуть сделать файл, который у меня есть, который является завершенной версией.
Я не уверен, в чем разница, но мы можем просто открыть это вместо этого.
И мы идем к AJAX, и это должно работать правильно.
Это то, что было на обед сегодня,
В частности, нет порядка, с кавычками вокруг него, так что это не самая красивая.
Но, очевидно, если вы делаете это для окончательного проекта,
Вы хотели, чтобы она выглядела лучше.
Но это всего лишь простой пример того, как вы делаете GET запроса.
И если мы посмотрим на реальный код, я предполагаю, что, я уверен,
он по-прежнему в значительной степени то же самое.
Ой, я забыл, чтобы преобразовать его в строку, вот и все.
Нет, он по-прежнему не работает. Несмотря на это, вот фактическая завершено код
за то, что это должно выглядеть,
и он делает то же самое, что я только что реализовано.
Когда вы нажимаете на кнопку, она использует GET JSON для автоматического разбора данных.
Он принимает данные от него и перебирает весь массив
и печатает - все, что сегодня на обед, название его,
и добавляет разрыв строки после каждой строки.
Это, как вы используете функцию GET.
>> Вы также можете использовать пост, который у меня не было времени
подправить пример для этого, но мы можем посмотреть на документацию.
Если вы посмотрите на jquery.post,
Вы можете видеть, что это почти то же самое.
У вас есть URL, но вместо передачи параметров с помощью -
просто положить их в строку для URL себе,
вы должны пройти в этом переменные данные
что в основном массив, словарь, который отображает параметры в значения.
Вы проходите, что в, и что отправляет их при помощи POST.
И как только вы это, то вы можете иметь успех функцию
который выполняется, когда данные возвращается.
В противном случае, это точно так же. Таким образом, используя POST,
Вы можете использовать POST, например, если у вас есть форма ввода
Вы позволяете людям пароли входа в него, и отправить эти пароли от
к серверным сценарием, чтобы проверить в базе данных, что ли пользователь является действительным или нет.
Вы можете сделать это все с использованием JQuery вместо того, чтобы обновить страницу вообще.
Вот как я реализовал в своем блоге, что я показал вам ранее.
Если мы пойдем до конца портал и выйти из системы, выйти из системы,
Выйти не работает.
Ну, позвольте мне открыть его в новом окне.
Здесь есть пароль, а я собирался ввести что-то случайное.
Она не работает, но вы можете видеть, что мы не
на самом деле нужно обновить страницу вообще.
Кода, если вы хотите взглянуть на нее,
Все это доступно здесь.
Таким образом, код, который я написал в прошлом году некоторое время.
Как вы можете видеть здесь, мы посылаем запрос POST.
У меня есть файл с именем login.php в задней части,
которая проверяет, является ли пароль едины.
Параметров мы передаем только с помощью пароля, отображается на
входа, в этом поле себе.
И когда данные вернется, мы проверяем.
Если данные ложные, то говорят, неправильный пароль, переместите его вниз,
и просто заставить его исчезнуть после этого.
В противном случае, мы загружаем страницу администратора.
И все это было сделано с помощью JSON.
В этом много строк кода, вы можете просто передать данные на сервер данных,
проверка является ли он правильный, проверьте, что авторизация прошла успешно,
и на самом деле ответить на него, перенаправление человека на нужную страницу
или не давая им войти и говорил им, что у них был неправильный пароль.
Вот пример того, как вы могли бы использовать JQuery POST
отправить POST запрос к задней части,
проверки, является ли кто-то авторизация прошла успешно.
>> Ладно, так что все примеры, которые я имел, и все то, что я хотел, чтобы покрыть.
Таковы основные вещи, которые JQuery позволяет вам делать:
выбрать элементы, изменять их с помощью DOM манипуляции,
Вы можете добавить эффекты, активизируют вещи на определенные события,
а также делать запросы AJAX очень легко и просто.
Так что спасибо, что пришли или смотреть,
и если у вас есть какие-либо вопросы, просто дайте мне знать. Да?
[Студент] назад, когда вы показали, нужно было JSON после POST запроса в кавычках,
и мне было просто интересно, что это сделал.
>> Да, я вижу. Вопрос заключался в том, что в примере, который я только что показал,
было слово JSON в кавычки -
Я просто потяните его вверх, снова - вокруг поста функции.
Я просто потянув его вверх, чтобы показать.
Итак, вот этот пост запрос, и есть эта JSON в кавычки.
Это просто определяет, что мы ожидаем выход быть.
Так, если мы передадим в JSON как ожидаемый тип данных,
это не требование, но если мы пройдем его,
то данные будут автоматически анализироваться как JSON.
Таким образом, мы не должны вызывать функцию разбора JSON на нем,
это будет просто происходить автоматически.
И если вы посмотрите на документацию по почте,
есть эта переменная тип данных, тип данных, ожидаемые от сервера.
По умолчанию имеет обоснованные предположения, что может быть не так,
так что вы можете оставить его пустым, но это всего лишь тип данных
в кодировании, что вы используете, будь то JSON или XML или что-то еще.
>> Любые другие вопросы?
Хорошо. Если у Вас есть какие-либо вопросы, не стесняйтесь, пишите мне
на vshekhawat@college.harvard.edu,
и слайды и код должен быть доступны в Интернете довольно скоро.
Удачи вам в ваших окончательных проектов, надеюсь, что вы используете JQuery.
[CS50.TV]