Веб-разработка. Библиотека jQuery

Сентябрь 7, 2022

Главная
Алгебра
Веб-разработка. Библиотека jQuery

Содержание

2. JavaScript библиотека jQuery
3. jQuery jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода Девиз jQuery -
4. Установка jQuery Добавление jQuery на страницы:
5. jQuery Селекторы Селекторы используются для доступа к элементам страницы Синтаксис: $(селектор) А что такое «селектор»?? Знак
6. jQuery Селекторы Например: $("p") - будут выбраны все элементы , которые находятся на странице $(".par") -
7. jQuery Селекторы Селекторами называют строчные выражения, с помощью которых задаются условия поиска элементов DOM на странице
8. jQuery Селекторы vs функции JavaScript $("#par") vs document.getElementById("par") $(".par") vs document.body.getElementsByClassName("par") $("p") vs document.body.getElementsByTagName("p")
9. jQuery Селекторы Разновидности селекторов: - Базовые селекторы - Комбинированные селекторы - Селекторы по атрибутам - Простые
10. jQuery Селекторы Базовые
11. jQuery Селекторы Комбинированные селекторы
12. jQuery Селекторы Подробнее про селекторы: http://jquery.page2page.ru/index.php5/Селекторы
13. jQuery Команды Код jQuery состоит из последовательно идущих команд. Стандартный синтаксис jQuery команд: $(селектор).метод(); Метод задает
14. jQuery Команды Методы в jQuery разделяются на следующие группы: Методы для манипулирования DOM; Методы для оформления
15. Обработчики событий jQuery Обработчики событий - это функции, код которых исполняется только после совершения определенных действий.
16. Обработчики событий jQuery Общий вид определения обработчиков jQuery: $(селектор).обработчик_события(function() { код_обработчика_события }); …или document.getElementById(…).addEventListener(“событие”, function() {
17. Обработчики событий jQuery. Примеры. $(document).ready(function() { $("#but1").click(function() { alert("Вы нажали один раз на первую кнопку!"); });
18. Обработчики событий jQuery. Примеры. $(document).ready(function() { $("p").mouseover(function() { $("p").css("color", "green") }); $("p").mouseout(function() { $("p").css("color", "black") });
19. Обработчики событий jQuery blur() change() click() dblclick() focus() focusin() focusout() hover() keydown() keyup() load() mousedown() mouseenter()
20. Объект event $(селектор).событие(function(event) { // Затем в коде обработчика вы можете обращаться // к его свойствам
21. Объект event
22. Объект event
23. jQuery Эффекты
24. jQuery Эффекты С помощью jQuery методов fadeOut(), fadeIn() и fadeTo() можно скрывать и отображать элементы анимированно:
25. jQuery Эффекты Пример: $(document).ready(function() { $("#but1").click(function() { $("#par1").fadeOut(3000); }); $("#but2").click(function() { $("#par1").fadeIn(3000); }); $("#but3").click(function() { $("#par1").fadeTo(3000,
26. jQuery Эффекты С помощью методов slideUp, slideDown и slideToggle можно плавно изменять высоту выбранных элементов. //
27. jQuery Эффекты Пример: $(document).ready(function() { $("#but1").click(function(){ $("#square").slideUp(3000); }); $("#but2").click(function(){ $("#square").slideDown(3000); }); $("#but3").click(function(){ $("#square").slideToggle(3000); }); $("#but4").click(function(){ $("#square").slideUp(3000,
28. Анимация в jQuery $("селектор").animate( {стили}, скорость, функция_смягчения, функция_обратного_вызова ); стили - CSS стили для анимации скорость
29. Анимация в jQuery Пример: $(document).ready(function() { $("#but1").click(function() { $("#par1").animate({fontSize: "1.3em"}, 1000); $("#par1").animate({marginLeft: "30px"}, 1000); $("#par1").animate({marginTop: "50px"},
30. Работа с DOM в jQuery Изменение содержимого элементов с помощью jQuery: // Узнаем содержимое элемента var
31. Работа с DOM в jQuery append() / prepend() - вставить произвольный текст после или перед внутренним
32. Работа с DOM в jQuery Работа с атрибутами: attr() - узнать/изменить содержимое атрибута у выбранного элемента.
33. Работа с DOM в jQuery $(document).ready(function(){ $("#but1").click(function(){ alert($("#anchor1").attr("href")); }); $("#but2").click(function(){ $("#anchor1").attr("href","http://www.kremlin.ru"); }); $("#but3").click(function(){ $("#anchor1").removeAttr("href"); }); });
34. Работа с DOM в jQuery Метод wrap позволяет "обернуть" выбранный элемент указанными тэгами: $("селектор").wrap(" "); Пример:
35. Управление стилями в jQuery
36. Управление стилями в jQuery Узнать текущие или установить новые значения свойств стилей элементов: // Узнаем значение
37. Управление стилями в jQuery addClass() - добавить указанный класс выбранному элементу removeClass() - удалить указанный класс
38. Асинхронная работа в jQuery Использование асинхронных запросов позволяет значительно ускорить загрузку страниц, т.к. обновляться будет только
39. Асинхронная работа в jQuery Простейший способ асинхронного запроса: $("селектор").load(url, данные, функция); Пример: $(document).ready(function() { $("#but1").click(function(){ $("#par1").load("testfile.txt");
40. За кадром Низкоуровневые методы работы с AJAX Плагины jQuery jQuery UI
41. Где почитать подробнее https://jquery.com/ http://jquery.page2page.ru/ http://www.wisdomweb.ru/JQ/jquery-first.php
42. Вопросы есть?
44. Скачать презентацию

Слайд 2

JavaScript библиотека jQuery

Слайд 3

jQuery
jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода
Девиз

jQuery - "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение

Слайд 4

Установка jQuery
Добавление jQuery на страницы:

Слайд 5

jQuery Селекторы
Селекторы используются для доступа к элементам страницы Синтаксис: $(селектор)
А что такое

«селектор»??

Знак $ сообщает, что символы, идущие после него, являются jQuery кодом.
Селектор позволяет выбрать элемент на странице.

Слайд 6

jQuery Селекторы
Например: $("p") - будут выбраны все элементы
, которые находятся

на странице
$(".par") - будут выбраны все элементы на странице с class="par"
$("#par") - будет выбран первый элемент на странице с id="par"

Слайд 7

jQuery Селекторы
Селекторами называют строчные выражения, с помощью которых задаются условия

поиска элементов DOM на странице
Строчные выражения пишутся в стиле CSS
Селекторы позволяют находить элементы по различным признакам: значению атрибутов, содержимому элементов, родительским элементам, дочерним элементам, порядковым номерам, именам классов, идентификаторов и тегов

Слайд 8

jQuery Селекторы vs функции JavaScript
$("#par") vs document.getElementById("par")
$(".par") vs document.body.getElementsByClassName("par")
$("p") vs document.body.getElementsByTagName("p")

Слайд 9

jQuery Селекторы
Разновидности селекторов: - Базовые селекторы
- Комбинированные селекторы
- Селекторы по атрибутам
-

Простые фильтры
- Фильтры по содержимому
- Фильтры дочерних элементов
- Фильтры элементов форм

Слайд 10

jQuery Селекторы
Базовые

Слайд 11

jQuery Селекторы
Комбинированные селекторы

Слайд 12

jQuery Селекторы
Подробнее про селекторы: http://jquery.page2page.ru/index.php5/Селекторы

Слайд 13

jQuery Команды
Код jQuery состоит из последовательно идущих команд. Стандартный синтаксис jQuery команд:
$(селектор).метод();
Метод задает

действие, которое необходимо совершить над выбранным элементом.

Слайд 14

jQuery Команды
Методы в jQuery разделяются на следующие группы:
Методы для манипулирования DOM;
Методы

для оформления элементов;
Методы для создания AJAX запросов;
Методы для создания эффектов;
Методы для привязки обработчиков событий.

Слайд 15

Обработчики событий jQuery
Обработчики событий - это функции, код которых исполняется только после

совершения определенных действий.

Примеры действий, после которых выполняются обработчики:
Курсор мыши наведен на элемент;
Веб-страница или картинка полностью загружена;
Изменено содержимое поля формы;
HTML-форма отправлена;
Нажата клавиша на клавиатуре.

Слайд 16

$Обработчики событий jQuery Общий вид определения обработчиков jQuery: $(селектор).обработчик_события(function() { код_обработчика_события$

Обработчики событий jQuery
Общий вид определения обработчиков jQuery:
$(селектор).обработчик_события(function() { код_обработчика_события });
…или document.getElementById(…).addEventListener(“событие”, function() {

код_обработчика_события });

Слайд 17

Обработчики событий jQuery. Примеры.
$(document).ready(function() { $("#but1").click(function() {
alert("Вы нажали один раз

на первую кнопку!");
});
$("#but2").dblclick(function() {
alert("Вы нажали два раза на вторую кнопку!");
});
});

Слайд 18

Обработчики событий jQuery. Примеры.
$(document).ready(function() { $("p").mouseover(function() { $("p").css("color", "green")
});

$("p").mouseout(function() {
$("p").css("color", "black")
});
});

Слайд 19

Обработчики событий jQuery
blur() change() click()
dblclick() focus() focusin()
focusout() hover() keydown()
keyup() load() mousedown()
mouseenter()

mouseleave() mousemove()
mouseout() mouseover() mouseup()
ready() resize() scroll()
select() submit() unload()

Слайд 20

Объект event
$(селектор).событие(function(event) {
// Затем в коде обработчика вы можете

обращаться // к его свойствам и методам следующим образом: console.log(event.data);
event.preventDefault();
});
Объект event хранит информации о произошедшем событии.
Его необходимо явно передать в обработчик события.

Слайд 21

Объект event

Слайд 22

Объект event

Слайд 23

jQuery Эффекты

Слайд 24

jQuery Эффекты
С помощью jQuery методов fadeOut(), fadeIn() и fadeTo()
можно скрывать и отображать элементы анимированно:
//

Позволяет постепенно скрыть выбранный элемент $("селектор").fadeOut(скорость, функция); // Позволяет постепенно отобразить выбранный элемент $("селектор").fadeIn(скорость, функция); // Позволяет постепенно скрыть/отобразить элемент // до указанного значения прозрачности $("селектор").fadeTo(скорость, прозрачность, функция);

Слайд 25

jQuery Эффекты
Пример: $(document).ready(function() {
$("#but1").click(function() { $("#par1").fadeOut(3000); });
$("#but2").click(function() {

$("#par1").fadeIn(3000); });
$("#but3").click(function() { $("#par1").fadeTo(3000, 0.3); });
$("#but4").click(function() { $("#par1").fadeTo(3000, 0.8); });
$("#but5").click(function() { $("#par1").fadeOut(3000, function() {
alert("Абзац был полностью скрыт.");
});
});

Слайд 26

jQuery Эффекты
С помощью методов slideUp, slideDown и slideToggle
можно плавно изменять высоту выбранных элементов.
// Изменяет высоту

элемента до нуля
$("селектор").slideUp(скорость, функция);
// Плавно возвращает элементу его изначальную высоту
$("селектор").slideDown(скорость, функция);
// При первом вызове будет действовать как slideUp, // а при втором как slideDown
$("селектор").slideToggle(скорость, функция);

Слайд 27

jQuery Эффекты
Пример: $(document).ready(function() {
$("#but1").click(function(){ $("#square").slideUp(3000); });
$("#but2").click(function(){ $("#square").slideDown(3000); });
$("#but3").click(function(){ $("#square").slideToggle(3000);

});
$("#but4").click(function(){ $("#square").slideUp(3000, function() {
alert("Текст был скрыт");
});
});

Слайд 28

$Анимация в jQuery $("селектор").animate( {стили}, скорость, функция_смягчения, функция_обратного_вызова ); стили -$

Анимация в jQuery
$("селектор").animate( {стили}, скорость, функция_смягчения, функция_обратного_вызова
);
стили - CSS стили для анимации
скорость -

скорость анимации: "slow", "fast", "normal" или в мс
функция_смягчения - функция, которая будет отвечать за плавность выполнения анимации
функция_обратного_вызова - указывает имя функции, код которой будет выполнен после завершения анимации

Слайд 29

Анимация в jQuery
Пример:
$(document).ready(function() {
$("#but1").click(function() {
$("#par1").animate({fontSize: "1.3em"}, 1000);
$("#par1").animate({marginLeft:

"30px"}, 1000);
$("#par1").animate({marginTop: "50px"}, 1000);
$("#par1").animate({fontSize: "1em"}, 1000);
$("#par1").animate({marginLeft: "0px"}, 1000);
$("#par1").animate({marginTop: "0px"}, 1000);
});
});

Слайд 30

Работа с DOM в jQuery
Изменение содержимого элементов с помощью jQuery: // Узнаем

содержимое элемента var value = $("селектор").html(); // Изменим содержимое элемента $("селектор").html("новое содержимое");

Слайд 31

Работа с DOM в jQuery
append() / prepend() - вставить произвольный текст после

или перед внутренним содержимым выбранного элемента
// Добавим текст после внутреннего содержимого элемента
$("селектор").append("произвольный текст");
// Добавим текст перед внутренним содержимым элемента
$("селектор").prepend("произвольный текст");

Слайд 32

Работа с DOM в jQuery
Работа с атрибутами: attr() - узнать/изменить содержимое атрибута у

выбранного элемента.
removeAttr() - удалить указанный атрибут у выбранного элемента. // Узнаем значение произвольного атрибута
var value = $("селектор").attr("атрибут");
// Установим новое значение произвольному атрибуту $("селектор").attr("атрибут", "новое значение");
// Удалим атрибут
$("селектор").removeAttr("атрибут");

Слайд 33

Работа с DOM в jQuery
$(document).ready(function(){
$("#but1").click(function(){
alert($("#anchor1").attr("href"));
});

$("#but2").click(function(){
$("#anchor1").attr("href","http://www.kremlin.ru");
});
$("#but3").click(function(){
$("#anchor1").removeAttr("href");
});
});

Слайд 34

Работа с DOM в jQuery
Метод wrap позволяет "обернуть" выбранный элемент указанными тэгами:
$("селектор").wrap("<нач_тэг><кон_тэг>"); Пример:
$(document).ready(function() {

$("#but1").click(function(){ $("#par1").wrap("");
});
$("#but2").click(function(){
$("#par3").wrap("

");
});
});

Слайд 35

Управление стилями в jQuery

Слайд 36

Управление стилями в jQuery
Узнать текущие или установить новые значения свойств стилей

элементов:
// Узнаем значение указанного CSS свойства выбранного элемента
$("селектор").css("свойство");
// Установим новое значение указанному CSS свойству выбранного элемента
$("селектор").css("свойство", "значение");
// Установим произвольные значения нескольким CSS свойствам элемента
$("селектор").css({свойство1:значение1, свойствоN:значениеN});

Слайд 37

Управление стилями в jQuery
addClass() - добавить указанный класс выбранному элементу
removeClass() -

удалить указанный класс у выбранного элемента
toggleClass() - переключение между удалением и добавлением класса
$("селектор").addClass("имя_класса");
$("селектор").removeClass('имя_класса');
$("селектор").toggleClass('имя_класса');

Слайд 38

Асинхронная работа в jQuery
Использование асинхронных запросов позволяет значительно ускорить загрузку страниц,

т.к. обновляться будет только та часть страницы, которая содержит новые данные, а не страница целиком.
Техника использования асинхронных запросов называется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML)

Слайд 39

Асинхронная работа в jQuery
Простейший способ асинхронного запроса: $("селектор").load(url, данные, функция); Пример: $(document).ready(function() {

$("#but1").click(function(){
$("#par1").load("testfile.txt");
})
});

Другие методы AJAX: http://www.wisdomweb.ru/JQ/ajax.php

Слайд 40

За кадром
Низкоуровневые методы работы с AJAX
Плагины jQuery
jQuery UI

Слайд 41

Где почитать подробнее
https://jquery.com/
http://jquery.page2page.ru/
http://www.wisdomweb.ru/JQ/jquery-first.php

Слайд 42

Веб-разработка. Библиотека jQuery

Содержание

JavaScript библиотека jQuery

jQueryjQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кодаДевиз

Установка jQueryДобавление jQuery на страницы:

jQuery Селекторы Селекторы используются для доступа к элементам страницы Синтаксис: $(селектор)А что такое

jQuery Селекторы Например: $("p") - будут выбраны все элементы , которые находятся

jQuery Селекторы Селекторами называют строчные выражения, с помощью которых задаются условия

jQuery Селекторы vs функции JavaScript$("#par") vs document.getElementById("par")$(".par") vs document.body.getElementsByClassName("par")$("p") vs document.body.getElementsByTagName("p")

jQuery Селекторы Разновидности селекторов: - Базовые селекторы- Комбинированные селекторы- Селекторы по атрибутам-

jQuery Селекторы Базовые

jQuery Селекторы Комбинированные селекторы

jQuery Селекторы Подробнее про селекторы: http://jquery.page2page.ru/index.php5/Селекторы

jQuery КомандыКод jQuery состоит из последовательно идущих команд. Стандартный синтаксис jQuery команд:$(селектор).метод();Метод задает

jQuery КомандыМетоды в jQuery разделяются на следующие группы:Методы для манипулирования DOM;Методы

Обработчики событий jQueryОбработчики событий - это функции, код которых исполняется только после

Обработчики событий jQuery. Примеры.$(document).ready(function() { $("#but1").click(function() { alert("Вы нажали один раз

Обработчики событий jQuery. Примеры.$(document).ready(function() { $("p").mouseover(function() { $("p").css("color", "green") });

Обработчики событий jQueryblur() change() click()dblclick() focus() focusin()focusout() hover() keydown()keyup() load() mousedown()mouseenter()

Объект event$(селектор).событие(function(event) { // Затем в коде обработчика вы можете

Объект event

Объект event

jQuery Эффекты

jQuery ЭффектыС помощью jQuery методов fadeOut(), fadeIn() и fadeTo() можно скрывать и отображать элементы анимированно://

jQuery ЭффектыПример: $(document).ready(function() { $("#but1").click(function() { $("#par1").fadeOut(3000); }); $("#but2").click(function() {

jQuery ЭффектыС помощью методов slideUp, slideDown и slideToggle можно плавно изменять высоту выбранных элементов. // Изменяет высоту

jQuery ЭффектыПример: $(document).ready(function() { $("#but1").click(function(){ $("#square").slideUp(3000); }); $("#but2").click(function(){ $("#square").slideDown(3000); }); $("#but3").click(function(){ $("#square").slideToggle(3000);

Анимация в jQuery$("селектор").animate( {стили}, скорость, функция_смягчения, функция_обратного_вызова);стили - CSS стили для анимациискорость -

Анимация в jQueryПример:$(document).ready(function() { $("#but1").click(function() { $("#par1").animate({fontSize: "1.3em"}, 1000); $("#par1").animate({marginLeft:

Работа с DOM в jQueryИзменение содержимого элементов с помощью jQuery: // Узнаем

Работа с DOM в jQueryappend() / prepend() - вставить произвольный текст после

Работа с DOM в jQueryРабота с атрибутами: attr() - узнать/изменить содержимое атрибута у

Работа с DOM в jQuery$(document).ready(function(){ $("#but1").click(function(){ alert($("#anchor1").attr("href")); });

Работа с DOM в jQueryМетод wrap позволяет "обернуть" выбранный элемент указанными тэгами: $("селектор").wrap("<нач_тэг><кон_тэг>"); Пример:$(document).ready(function() {

Управление стилями в jQuery

Управление стилями в jQueryУзнать текущие или установить новые значения свойств стилей

Управление стилями в jQueryaddClass() - добавить указанный класс выбранному элементуremoveClass() -

Асинхронная работа в jQueryИспользование асинхронных запросов позволяет значительно ускорить загрузку страниц,

Асинхронная работа в jQueryПростейший способ асинхронного запроса: $("селектор").load(url, данные, функция); Пример: $(document).ready(function() {

За кадромНизкоуровневые методы работы с AJAXПлагины jQueryjQuery UI

Где почитать подробнееhttps://jquery.com/http://jquery.page2page.ru/http://www.wisdomweb.ru/JQ/jquery-first.php

Вопросы есть?

Похожие презентации

jQuery
jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода
Девиз

Установка jQuery
Добавление jQuery на страницы:

jQuery Селекторы
Селекторы используются для доступа к элементам страницы Синтаксис: $(селектор)
А что такое

jQuery Селекторы
Например: $("p") - будут выбраны все элементы
, которые находятся

jQuery Селекторы
Селекторами называют строчные выражения, с помощью которых задаются условия

jQuery Селекторы vs функции JavaScript
$("#par") vs document.getElementById("par")
$(".par") vs document.body.getElementsByClassName("par")
$("p") vs document.body.getElementsByTagName("p")

jQuery Селекторы
Разновидности селекторов: - Базовые селекторы
- Комбинированные селекторы
- Селекторы по атрибутам
-

jQuery Селекторы
Базовые

jQuery Селекторы
Комбинированные селекторы

jQuery Селекторы
Подробнее про селекторы: http://jquery.page2page.ru/index.php5/Селекторы

jQuery Команды
Код jQuery состоит из последовательно идущих команд. Стандартный синтаксис jQuery команд:
$(селектор).метод();
Метод задает

jQuery Команды
Методы в jQuery разделяются на следующие группы:
Методы для манипулирования DOM;
Методы

Обработчики событий jQuery
Обработчики событий - это функции, код которых исполняется только после

Обработчики событий jQuery. Примеры.
$(document).ready(function() { $("#but1").click(function() {
alert("Вы нажали один раз

Обработчики событий jQuery. Примеры.
$(document).ready(function() { $("p").mouseover(function() { $("p").css("color", "green")
});

Обработчики событий jQuery
blur() change() click()
dblclick() focus() focusin()
focusout() hover() keydown()
keyup() load() mousedown()
mouseenter()

Объект event
$(селектор).событие(function(event) {
// Затем в коде обработчика вы можете

jQuery Эффекты
С помощью jQuery методов fadeOut(), fadeIn() и fadeTo()
можно скрывать и отображать элементы анимированно:
//

jQuery Эффекты
Пример: $(document).ready(function() {
$("#but1").click(function() { $("#par1").fadeOut(3000); });
$("#but2").click(function() {

jQuery Эффекты
С помощью методов slideUp, slideDown и slideToggle
можно плавно изменять высоту выбранных элементов.
// Изменяет высоту

jQuery Эффекты
Пример: $(document).ready(function() {
$("#but1").click(function(){ $("#square").slideUp(3000); });
$("#but2").click(function(){ $("#square").slideDown(3000); });
$("#but3").click(function(){ $("#square").slideToggle(3000);

Анимация в jQuery
$("селектор").animate( {стили}, скорость, функция_смягчения, функция_обратного_вызова
);
стили - CSS стили для анимации
скорость -

Анимация в jQuery
Пример:
$(document).ready(function() {
$("#but1").click(function() {
$("#par1").animate({fontSize: "1.3em"}, 1000);
$("#par1").animate({marginLeft:

Работа с DOM в jQuery
Изменение содержимого элементов с помощью jQuery: // Узнаем

Работа с DOM в jQuery
append() / prepend() - вставить произвольный текст после

Работа с DOM в jQuery
Работа с атрибутами: attr() - узнать/изменить содержимое атрибута у

Работа с DOM в jQuery
$(document).ready(function(){
$("#but1").click(function(){
alert($("#anchor1").attr("href"));
});

Работа с DOM в jQuery
Метод wrap позволяет "обернуть" выбранный элемент указанными тэгами:
$("селектор").wrap("<нач_тэг><кон_тэг>"); Пример:
$(document).ready(function() {

Управление стилями в jQuery
Узнать текущие или установить новые значения свойств стилей

Управление стилями в jQuery
addClass() - добавить указанный класс выбранному элементу
removeClass() -

Асинхронная работа в jQuery
Использование асинхронных запросов позволяет значительно ускорить загрузку страниц,

Асинхронная работа в jQuery
Простейший способ асинхронного запроса: $("селектор").load(url, данные, функция); Пример: $(document).ready(function() {

За кадром
Низкоуровневые методы работы с AJAX
Плагины jQuery
jQuery UI

Где почитать подробнее
https://jquery.com/
http://jquery.page2page.ru/
http://www.wisdomweb.ru/JQ/jquery-first.php