jQuery – самая популярная JS библиотека

Сентябрь 7, 2022

Главная
Алгебра
jQuery – самая популярная JS библиотека

Содержание

2. jQuery – самая популярная JS библиотека JavaScript бибилотеки обычно представлены внешним подключаемым файлом с кодом. Файл
3. Цели стоящие перед jQuery Кроссбраузерность; Поиск элементов в дереве документа, манипуляция ими и их свойствами, работа
4. Как использовать jQuery
5. Немного практики http://files.courses.dp.ua/web/23/ex04.html Поиск элементов в jQuery основан на css-селекторах. Если в результате поиска нашлось более
6. Как использовать jQuery $(selector).action() $() – главная (и по сути единственная) функция в библиотеке; selector –
7. Как использовать jQuery $("p").hide() – выбрать все теги p и скрыть каждый из них; $(".test“). append(“
8. jQuery и события Подписка на события в jQuery осуществляется методом .on(), которому передаётся имя события, и
9. jQuery и содержимое тегов .text() – считывает или задёт текстовое содержимое тега (аналог innerHTML, но с
10. jQuery и содержимое тегов .val() – считывает или задёт содержимое поля ввода;
11. Цепочки вызовов Результат выполнения большинства функций jQuery это объект-обёртка jQuery, к которому по второму кругу можно
12. Удаление элементов с jQuery В плане удаление ничего оригинального создатели jQuery не придумали)) Но, придумали новый
13. jQuery и свойства СSS Цепочки вызовов и функция css() позволяют в одну строчку установить любое количество
14. jQuery и классы .addClass() – добавляет к тегу класс; .removeClass() – удаляет класс у тега (если
15. Спецэффекты и jQuery
16. Добавление элементов jQuery .hide()/.show() – скрывает/отображает элемент на странице; .slideUp()/.slideDown() – сворачивает/разоврачивает элемент на странице; .fadeOut()/.fadeIn()
17. jQuery и спецэффекты и callback Поскольку анимация занимает какое-то время, то можно зарегистрировать функцию, которая будет
18. Немного практики
19. jQuery на практике Скачайте заготовку: http://files.courses.dp.ua/web/23/ex03.html И скопируйте в notepad++ как html-файл.
20. jQuery - меньше кода Сделаем скидки на все телефоны, и поменяем цвет ценника.
21. Документация по jQuery
22. jQuery – спецэффекты в одну строчку https://jquery.com
23. jQuery для начинающих http://anton.shevchuk.name/jquery-book/
24. jQuery плагины
26. Скачать презентацию

Слайд 2

jQuery – самая популярная JS библиотека
JavaScript бибилотеки обычно представлены внешним

подключаемым файлом с кодом.

Файл можно скачать и хранить рядом с другими файлами вашего сайта.

Слайд 3

Цели стоящие перед jQuery
Кроссбраузерность;
Поиск элементов в дереве документа, манипуляция ими и

их свойствами, работа с событиями;

Спецэффекты (анимация).

AJAX (асинхронная загрузка/выгрузка данных);

Слайд 4

Как использовать jQuery

Слайд 5

Немного практики
http://files.courses.dp.ua/web/23/ex04.html
Поиск элементов в jQuery основан на css-селекторах.
Если в результате поиска

нашлось более одного элемента, jQuery поймёт это, и применит действие к каждому из найденных элементов.

Слайд 6

Как использовать jQuery
$(selector).action()
$() – главная (и по сути единственная) функция в

библиотеке;

selector – css-селектор, для выборки элемента, или можно сразу передать объект-тег (из дерева документа);

action() – какое-либо действие над найденным элементом (если элементов много, то действие примениться к каждому в этой коллекции).

Слайд 7

Как использовать jQuery
$("p").hide() – выбрать все теги p и скрыть каждый

из них;

$(".test“). append(“ YAHOO”) – выбрать все теги с классом “test” и добавить в каждый из них слово “YAHOO”;

$(function(){ … }); – выполнить описываемую функцию после загрузки документа, аналог подписки на событие window.onload;

Слайд 8

jQuery и события
Подписка на события в jQuery осуществляется методом .on(), которому

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

Слайд 9

jQuery и содержимое тегов
.text() – считывает или задёт текстовое содержимое тега

(аналог innerHTML, но с удалением всех внутренних тегов);

.html() – считывает или задёт содержимое тега (аналог innerHTML).

Слайд 10

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

Слайд 11

Цепочки вызовов
Результат выполнения большинства функций jQuery это объект-обёртка jQuery, к которому

по второму кругу можно применять какие-либо функции «улучшайзеры».

Слайд 12

Удаление элементов с jQuery
В плане удаление ничего оригинального создатели jQuery не

придумали))

Но, придумали новый метод .empty() который очищает всё содержимое тега (делает операцию аналогичную .innerHTML = "";)

Слайд 13

jQuery и свойства СSS
Цепочки вызовов и функция css() позволяют в одну

строчку установить любое количество свойств стиля.

Для некоторых самых ходовый свойств есть даже отдельные методы: width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight().

Слайд 14

jQuery и классы
.addClass() – добавляет к тегу класс;
.removeClass() – удаляет класс

у тега (если он есть).

Слайд 15

Спецэффекты и jQuery

Слайд 16

Добавление элементов jQuery
.hide()/.show() – скрывает/отображает элемент на странице;
.slideUp()/.slideDown() – сворачивает/разоврачивает элемент

на странице;

.fadeOut()/.fadeIn() – «растворяет»/восстанавлиает элемент на странице (работает со свойством opacity).

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

Слайд 17

jQuery и спецэффекты и callback
Поскольку анимация занимает какое-то время, то можно

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

Слайд 18

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

Слайд 19

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

Слайд 20

jQuery - меньше кода
Сделаем скидки на все телефоны, и поменяем цвет

ценника.

Слайд 21

Документация по jQuery

Слайд 22

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

Слайд 23

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

Слайд 24

jQuery – самая популярная JS библиотека

Содержание

jQuery – самая популярная JS библиотека JavaScript бибилотеки обычно представлены внешним

Цели стоящие перед jQueryКроссбраузерность;Поиск элементов в дереве документа, манипуляция ими и

Как использовать jQuery

Немного практикиhttp://files.courses.dp.ua/web/23/ex04.htmlПоиск элементов в jQuery основан на css-селекторах.Если в результате поиска

Как использовать jQuery $(selector).action()$() – главная (и по сути единственная) функция в

Как использовать jQuery$("p").hide() – выбрать все теги p и скрыть каждый

jQuery и событияПодписка на события в jQuery осуществляется методом .on(), которому

jQuery и содержимое тегов.text() – считывает или задёт текстовое содержимое тега

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

Цепочки вызововРезультат выполнения большинства функций jQuery это объект-обёртка jQuery, к которому

Удаление элементов с jQueryВ плане удаление ничего оригинального создатели jQuery не

jQuery и свойства СSSЦепочки вызовов и функция css() позволяют в одну

jQuery и классы.addClass() – добавляет к тегу класс;.removeClass() – удаляет класс