jQuery в JavaScript

Содержание

Слайд 2

99,99% Проблем, с которыми вы сталкиваетесь, уже кем-то решались. 99,9% Проблем,

99,99%

Проблем, с которыми вы сталкиваетесь, уже кем-то решались.

99,9%

Проблем, с которыми вы

сталкиваетесь, решались неоднократно большим количеством людей.

99%

Проблем, с которыми вы сталкиваетесь, уже решены, и примеры решения доступны в интернете, или даже оформлены в виде библиотек.

Слайд 3

JavaScript не исключение, для него существует большое количество готовых решений типичных

JavaScript не исключение, для него существует большое количество готовых решений типичных

проблем и задач которые JavaScript разработчики повседневно решают.

Однако! Все JavaScript библиотеки написаны на JavaScript, и нет ни одной функции (из тех что предоставляют библиотеки), которую нельзя было бы написать на чистом JavaScript.

Отсюда вывод: все библиотеки направлены на уменьшение объема кода который нужно написать программисту для решения тех или иных задач.

Слайд 4

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

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

JavaScript бибилотеки обычно представлены внешним

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

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

Слайд 5

jQuery – самая популярная JS библиотека http://js.courses.dp.ua/files/jq/ex01.html

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

http://js.courses.dp.ua/files/jq/ex01.html

Слайд 6

jQuery – самая популярная JS библиотека http://js.courses.dp.ua/files/jq/ex01.html Меняем JavaScript код на вот такой: ???

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

http://js.courses.dp.ua/files/jq/ex01.html

Меняем JavaScript код на вот

такой:

???

Слайд 7

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

Цели стоящие перед jQuery

Кроссбраузерность;

Поиск элементов в дереве документа, манипуляция ими и

их свойствами;

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

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

Слайд 8

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

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

 $(selector).action()

$() – главная (и по сути единственная) функция в

библиотеке;

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

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

Слайд 9

Как использовать jQuery $(this). fadeOut() – скрыть текущий элемент; $("p").hide() –

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

$(this). fadeOut() – скрыть текущий элемент;

$("p").hide() – выбрать все

теги p и скрыть каждый из них;

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

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

Слайд 10

Выбор элементов в jQuery основан на СSS селекторах http://www.w3schools.com/jquery/jquery_selectors.asp

Выбор элементов в jQuery основан на СSS селекторах

http://www.w3schools.com/jquery/jquery_selectors.asp

Слайд 11

«Пробник» селекторов jQuery http://www.w3schools.com/jquery/trysel.asp

«Пробник» селекторов jQuery

http://www.w3schools.com/jquery/trysel.asp

Слайд 12

jQuery и события Старый вариант Новый вариант

jQuery и события

Старый вариант

Новый вариант

Слайд 13

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

jQuery и содержимое тегов

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

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

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

Слайд 14

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

jQuery и содержимое тегов

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

Слайд 15

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

Цепочки вызовов

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

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

Объект jQuery ??? http://js.courses.dp.ua/files/jq/ex01.html Замените JS код в Весь дополнительный функционал

Объект jQuery

???

http://js.courses.dp.ua/files/jq/ex01.html

Замените JS код в

Весь дополнительный функционал который jQuery добавляет

к элементам дерева документа добавляется за счёт установки прототипа.
Слайд 17

Добавление элементов jQuery http://js.courses.dp.ua/files/jq/ex01.html Замените JS код в ???

Добавление элементов jQuery

http://js.courses.dp.ua/files/jq/ex01.html

Замените JS код в

???

Слайд 18

Добавление элементов jQuery .append() – добавляет элемент в конец списка дочерних

Добавление элементов jQuery

.append() – добавляет элемент в конец списка дочерних к

родительскому (полный аналог appendChild());

.prepend() – добавляет элемент первым в список дочерних элементов;

.before() – добавляет элемент перед тем элементом, для которого вызвана эта функция (в чём-то аналог insertBefore()).

.after() – добавляет элемент после того элемента, для которого вызвана эта функция ;

Слайд 19

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

Удаление элементов jQuery

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

Но,

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

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

jQuery и свойства СSS

Цепочки вызовов и функция css() позволяют в одну

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

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

Слайд 21

jQuery и спецэффекты Анимация на веб-странице это, как правило, изменение во

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

Анимация на веб-странице это, как правило, изменение во времени

того или иного стилевого свойства элемента во времени.
Слайд 22

jQuery и спецэффекты http://js.courses.dp.ua/files/jq/ex02.html

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

http://js.courses.dp.ua/files/jq/ex02.html

Слайд 23

jQuery и спецэффекты http://js.courses.dp.ua/files/jq/ex02.html Замените JS код в ???

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

http://js.courses.dp.ua/files/jq/ex02.html

Замените JS код в

???

Слайд 24

jQuery и спецэффекты и callback http://js.courses.dp.ua/files/jq/ex02.html Замените JS код в ???

jQuery и спецэффекты и callback

http://js.courses.dp.ua/files/jq/ex02.html

Замените JS код в

???

Поскольку анимация занимает

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

jQuery и спецэффекты http://js.courses.dp.ua/files/jq/ex02.html Замените JS код в ??? Toggle версии

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

http://js.courses.dp.ua/files/jq/ex02.html

Замените JS код в

???

Toggle версии анимационных функций работает

по принципу ВКЛ/ВЫКЛ, т.е. сама проверяет: если элемент скрыт, то отображает его, если видим то скрывает его.
Слайд 26

Готовых анимационных эффектов в библиотеке jQuery великое множество, но можно создавать

Готовых анимационных эффектов в библиотеке jQuery великое множество, но можно создавать

свои. Помогает в этом функция .animate();

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

http://js.courses.dp.ua/files/jq/ex02.html

Замените JS код в

???

Слайд 27

jQuery, анимация, easing http://js.courses.dp.ua/files/jq/ex03.html

jQuery, анимация, easing

http://js.courses.dp.ua/files/jq/ex03.html

Слайд 28

jQuery, анимация, easing http://js.courses.dp.ua/files/jq/ex03.html Замените JS код в ??? Стандартная анимация

jQuery, анимация, easing

http://js.courses.dp.ua/files/jq/ex03.html

Замените JS код в

???

Стандартная анимация в jQuery работает

либо по линейной схеме, либо по квадратичной. Но иногда хочется чего-то интереснее…
Слайд 29

jQuery, анимация, easing http://gsgd.co.uk/sandbox/jquery/easing/ Плагин jQuery easing позволяет использовать большое количество

jQuery, анимация, easing

http://gsgd.co.uk/sandbox/jquery/easing/

Плагин jQuery easing позволяет использовать большое количество т.н. “смягчающих

функций” для вашей анимации.
Слайд 30

jQuery, анимация, easing http://easings.net/ru Шпаргалка по «смягчающим функциям»

jQuery, анимация, easing

http://easings.net/ru

Шпаргалка по «смягчающим функциям»

Слайд 31

jQuery, анимация, easing http://gsgd.co.uk/sandbox/jquery/easing/ Плагин jQuery easing позволяет использовать большое количество

jQuery, анимация, easing

http://gsgd.co.uk/sandbox/jquery/easing/

Плагин jQuery easing позволяет использовать большое количество т.н. “смягчающих

функций” для вашей анимации.

http://js.courses.dp.ua/files/jq/ex03.html

Замените JS код в

???

Слайд 32

Домашнее задание http://api.jquery.com/ Самая полная документация по jQuery

Домашнее задание

http://api.jquery.com/

Самая полная документация по jQuery

Слайд 33

Домашнее задание Познакомиться с функциями jQuery которые работают с атрибутом class:

Домашнее задание

Познакомиться с функциями jQuery которые работают с атрибутом class:

Познакомиться с

функциями jQuery которые работают с родителями, соседями и потомками элемента:

.addClass(); .removeClass(); .hasClass(); .toggleClass().

.parent(); .parents(); .children(); .find(); .siblings();

.next(); .nextAll(); .prev(); .prevAll();

Познакомиться с функциями jQuery которые занимаються фильтрацией элементов:

.eq(); .filter(); .not();

- Предыдущая
Фразеология
Следующая -
CSS (Cascading Style Sheets)

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

Презентация "Памятка дольщику" - скачать презентации по Экономике
Le musée d'Orsay - Paris 7e
Вироби учнів 3-А класу Бершадської ЗОШ №3 із теми "Умілі руки" - презентация для начальной школы_
Таргет-костинг Метод учёта затрат
Цифровая схемотехника. Триггер Шмитта. Генераторы импульсов
Транспорт газов кровью и газообмен в организме
Насилие… но в семье ли
Презентация Системный подход к управлению качеством
Основные правила изображений
Формулы сокращенного умножения Знание самое превосходное из владений. Все стремится к нему, само оно не приходит. А
Выполнила студентка 2 курса Дузенко Оксана Руководитель: Ситько Р.М.
UML. Diagramy Klas
Плюсы и минусы моими глазами УК "Клининг групп"
Инженерная графика. Электронное учебное пособие
Презентация Неформализованные методы разработки управленческих решений:   Кепнер-трего
Самые необычные праздники мира
Коммутационные схемы
Системы объектно-ориентированного программирования
Технология ORM и её реализации
Презентация структура страхового тарифа: нетто- премия , нагрузка.
Народные костюмы Китая
Выбор инновационной стратегии для производства
«Мы первыми сумели на Земле открыть Вселенной запертые двери» 100 лет со дня рождения С.П.Королёва 150 лет со дня рождения К.Э. Циолко
Федеративное устройство РФ
Как я портил продукты Фил Смирнов (motka.ru)
Презентация "Выход из кризиса" - скачать презентации по Экономике
Гибридные автомобили
Школа развития женственности
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть