j. Query sp. courses. dp. ua 2

Скачать презентацию j. Query sp. courses. dp. ua  2 Скачать презентацию j. Query sp. courses. dp. ua 2

17-jquery.pptx

  • Размер: 1.7 Мб
  • Автор:
  • Количество слайдов: 25

Описание презентации j. Query sp. courses. dp. ua 2 по слайдам

j. Query sp. courses. dp. ua j. Query sp. courses. dp. ua

2 j. Query – самая популярная JS библиотека Java. Script бибилотеки обычно представлены внешним2 j. Query – самая популярная JS библиотека Java. Script бибилотеки обычно представлены внешним подключаемым файлом с кодом. Файл можно скачать и хранить рядом с другими файлами вашего сайта.

3 Цели стоящие перед j. Query Кроссбраузерность; Поиск элементов в дереве документа,  манипуляция3 Цели стоящие перед j. Query Кроссбраузерность; Поиск элементов в дереве документа, манипуляция ими и их свойствами, работа с событиями; Спецэффекты (анимация). AJAX (асинхронная загрузка/выгрузка данных);

Как использовать j. Query Как использовать j. Query

5 Немного практики http: //files. courses. dp. ua/web/23/ex 04. html Поиск элементов в j.5 Немного практики http: //files. courses. dp. ua/web/23/ex 04. html Поиск элементов в j. Query основан на css-селекторах. Если в результате поиска нашлось более одного элемента, j. Query поймёт это, и применит действие к каждому из найденных элементов.

6 Как использовать j. Query $( selector ). action () $()  – главная6 Как использовать j. Query $( selector ). action () $() – главная (и по сути единственная) функция в библиотеке; selector – css-селектор, для выборки элемента, или можно сразу передать объект-тег (из дерева документа); action() – какое-либо действие над найденным элементом (если элементов много, то действие примениться к каждому в этой коллекции).

7 Как использовать j. Query $(p). hide() – выбрать все теги p и скрыть7 Как использовать j. Query $(«p»). hide() – выбрать все теги p и скрыть каждый из них; $(«. test“). append(“ YAHOO”) – выбрать все теги с классом “ test ” и добавить в каждый из них слово “YAHOO”; $(function(){ … }); – выполнить описываемую функцию после загрузки документа, аналог подписки на событие window. onload ;

8 j. Query и события Подписка на события в j. Query осуществляется методом .8 j. Query и события Подписка на события в j. Query осуществляется методом . on() , которому передаётся имя события, и функция-обработчик. Если по селектору нашлось более одного элемента, то для каждого из них будет «оформлена» подписка. Для того, чтобы отписаться от события есть метод . off().

9 j. Query и содержимое тегов. text() – считывает или задёт текстовое содержимое тега9 j. Query и содержимое тегов. text() – считывает или задёт текстовое содержимое тега (аналог inner. HTML, но с удалением всех внутренних тегов); . html() – считывает или задёт содержимое тега (аналог inner. HTML).

10 j. Query и содержимое тегов. val() – считывает или задёт содержимое поля ввода;10 j. Query и содержимое тегов. val() – считывает или задёт содержимое поля ввода;

11 Цепочки вызовов Результат выполнения большинства функций j. Query это объект-обёртка j. Query, 11 Цепочки вызовов Результат выполнения большинства функций j. Query это объект-обёртка j. Query, к которому по второму кругу можно применять какие-либо функции «улучшайзеры» .

12 Удаление элементов с j. Query В плане удаление ничего оригинального создатели j. Query12 Удаление элементов с j. Query В плане удаление ничего оригинального создатели j. Query не придумали)) Но, придумали новый метод . empty() который очищает всё содержимое тега (делает операцию аналогичную . inner. HTML = «»; )

13 j. Query и свойства СSS Цепочки вызовов и функция css()  позволяют в13 j. Query и свойства СSS Цепочки вызовов и функция css() позволяют в одну строчку установить любое количество свойств стиля. Для некоторых самых ходовый свойств есть даже отдельные методы: width(), height(), inner. Width(), inner. Height(), outer. Width(), outer. Height().

14 j. Query и классы. add. Class()  – добавляет к тегу класс; .14 j. Query и классы. add. Class() – добавляет к тегу класс; . remove. Class() – удаляет класс у тега (если он есть).

Спецэффекты и j. Query Спецэффекты и j. Query

16 Добавление элементов j. Query. hide()/. show() – скрывает/отображает элемент на странице; . slide.16 Добавление элементов j. Query. hide()/. show() – скрывает/отображает элемент на странице; . slide. Up()/. slide. Down() – сворачивает/разоврачивает элемент на странице; . fade. Out()/. fade. In() – «растворяет» /восстанавлиает элемент на странице (работает со свойством opacity). Перечисленные функции в качестве первого параметра могут получить время в миллисекундах, для задания продолжительности эффекта.

17 j. Query и спецэффекты и callback Поскольку анимация занимает какое-то время,  то17 j. Query и спецэффекты и callback Поскольку анимация занимает какое-то время, то можно зарегистрировать функцию, которая будет вызвана сразу после того как анимация завершиться. Такие функции называют callback -функциями.

Немного практики Немного практики

19 j. Query на практике Скачайте заготовку: http: //files. courses. dp. ua/web/23/ex 03. html19 j. Query на практике Скачайте заготовку: http: //files. courses. dp. ua/web/23/ex 03. html И скопируйте в notepad++ как html-файл.

20 j. Query - меньше кода Сделаем скидки на все телефоны, и поменяем цвет20 j. Query — меньше кода Сделаем скидки на все телефоны, и поменяем цвет ценника.

Документация по j. Query Документация по j. Query

22 j. Query – спецэффекты в одну строчку https: //jquery. com 22 j. Query – спецэффекты в одну строчку https: //jquery. com

23 j. Query для начинающих http: //anton. shevchuk. name/jquery-book/ 23 j. Query для начинающих http: //anton. shevchuk. name/jquery-book/

j. Query плагины j. Query плагины

25 j. Query UI – набор элементов ввода j. Query плагином называют Java. Script25 j. Query UI – набор элементов ввода j. Query плагином называют Java. Script библиотеку которой для работы нужна j. Query. https: //jqueryui. com /