Введение в технологии W3C Лекция 9. jQuery

Введение в технологии W3C
Лекция 9. jQuery
jQuery
HTML/DOM
Утилиты
CSS
AJAX
События
Анимация
и эффекты
Поддержка jQuery
•
•
•
•
Internet Explorer 6!
Google
Microsoft
IBM
Как подключить jQuery
Статически
• jQuery.com
• <script src="jquery-1.11.1.min.js"></script>
Динамически (CDN)
• Google
– <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jq
uery.min.js"></script>
• Microsoft
– <script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery1.11.1.min.js"></script>
Синтаксис jQuery
Селектор  действие
• $(selector).action
– $ - идентификатор jQuery
– selector – «запрос» на поиск html элемента
– action – действие с выбранными элементами
• $("p").hide() – скрыть все параграфы
Событие загрузки документа
Возникает по окончанию загрузки html
элементов браузером
• $(document).ready(function(){
// обработчик
});
• $(function(){
// обработчик
});
Селекторы jQuery
• $() – указывает интерпретатору что в
скобках селектор
• Допускаются все селекторы CSS, включая
псевдоклассы
Селекторы
• Селектор элемента
– $(“’название тега”)
$("p").hide();
• Селектор идентификатора
– $(“#идентификатор”)
$("#test").hide();
• Селектор класса
– $(“.класс”)
$(".test").hide();
События
• Все взаимодействия пользователя со
страницей
– Перемещение мыши
– Выбор из меню
– Нажатие кнопки
$(“селектор”).действие(function {
Обработчик события
})
Часто используемые события jQuery
• $(document).ready()
• click()
– $("p").click(function(){
$(this).hide();
});
•
•
•
•
•
•
•
•
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
Эффекты jQuery
• Отображение
– hide() / show() / toggle()
• Затенение
– fadeIn() / fadeOut() / fadeToggle() / fadeTo()
• Всплывающая область
– slideDown() / slideUp() / slideToggle()
• Анимация
– animate()
• Остановка
– stop()
Манипуляция HTML
• Получение значений и атрибутов
– text(), html(), val(), attr(“атрибут”)
• Задание значений и атрибутов
– text(“значние”), html (“значние”), val
(“значние”), attr (“атрибут”,“значние”)
• Добавление содержимого HTML
– append(), prepend(), after(), before()
• Удаление Html элементов
– remove(), empty()
Манипуляция CSS
• addClass() – Добавить класс CSS
• removeClass() – Удалить класс CSS
• toggleClass() - Добавить или удалить класс
CSS
• css() – установить или прочитать значение
CSS атрибутов
Взаимоотношения элементов jQuery
• Предки
– parent(), parents(), parentsUntil()
• $(document).ready(function(){
$("span").parent();
});
• Потомки
– children(), find()
• $(document).ready(function(){
$("div").children();
});
• Ровесники
– siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() ,prevUntil()
• Фильтрация
– first(), last(), eq(), filter(), not()