Лекция №9 - jQuery

Введение в jQuery
Подключение библиотеки
Работа с jQuery всегда начинается с подключения библиотеки.
<body>
<script src="js/jquery.js"></script>
</body>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
Запуск кода
Для выбора элемента на странице в jQuery мы можем использовать $("селектор")
или jQuery("селектор").
<script>
jQuery("h2").css("color", "red");
</script>
<body>
<h2>Заголовок</h2>
<p>Много текста в одну строку.</p>
</body>
Будет ли изменен цвет заголовка?

Ждем загрузку документа
Для того, чтобы код сработал верно, мы должны либо поместить код после искомого
<h2>, или в самый низ страницы, либо использовать метод .ready().
Полная запись Сокращенная запись
<script> <script>
jQuery(document).ready(function() { $(function() {
jQuery("h2").css("color", "red"); $("h2").css("color", "red");
}); });
</script> </script>
Сокращенную запись стоит причислить к «best practices», ведь в jQuery 3.0 метод
«.ready()» уже помечен как deprecated.
Решаем конфликт
Чтобы у вас не возникало конфликтов с другими библиотеками за использование «$»,
советую ваш код оборачивать в анонимную функцию следующего вида:
<script>
;(function($, undefined) {
$("h2").css("color", "red");
})(jQuery);
</script>
Выбор элементов на странице
Все простые выборки на странице можно сделать с помощью CSS селекторов.
$("#content") – выбираем элемент с «id="content"»
$("section#content") – выбираем <section> с «id="content"»
$(".intro") – выбираем элементы с «class="intro"»
$("p.intro") – выбираем всё «p» с «class="intro"»
$(".intro.pinned") – выбираем элементы с классами «intro» и «pinned»
$("h3") – выбираем все теги <h3>
$("h1, h2") – выбираем все теги <h1> и <h2>
$("a[class]") – выбираем все теги <a> с атрибутом class

Функции выборки элементов на странице
$("section").find("article").find("h3") – и ещё раз, но на другой лад
$("#post").next() – выбор следующего элемента после элемента с «id="post"»
$("article").children() – выбор дочерних элементов
$("p").parent() – выбор всех прямых предков элементов <p>
$("p").parents("section") – выбор всех предков <section> элемента <p>
$("p").closest("section") – выбор первого предка <section> элемента <p>

Работа с CSS стилями
Для работы со стилями предназначен метод .css()
css(property) — получение значения CSS-свойства
css(property, value) — установка значения CSS-свойства
css({property:value, property:value}) — установка нескольких значений
css(property, function(index, value) { return value }) — тут для установки значения

используется функция обратного вызова (в просторечии — callback-функция), index это
порядковый номер элемента в выборке, value — текущее значение свойства
Работа с CSS стилями
$("#my").css({
$("#my").css("color", "red"); color: "black",
fontSize: "12px",
$("#my").css("background-color", "yellow");
backgroundColor: "transparent"
});
$("#my").css("font-size", function(i, value){ $("#my").css({

return parseFloat(value) * 1.5; "color": "red",
}); "font-size": "18px",
"background-color": "white"
});
Работа с CSS классами
addClass(className) — добавление класса элементу
hasClass(className) — проверка на причастность к определённому классу
removeClass(className) — удаление класса
toggleClass(className) — переключение класса

Работа с атрибутами
attr(attrName) — получение значения атрибута
attr(attrName, attrValue) — установка значения атрибута (также можно использовать hash либо
функцию обратного вызова)
removeAttr(attrName) — удаление атрибута
// получение адреса ссылки // получение альтернативного текста картинки

$("a").attr("href"); $("img").attr("alt");
// изменение адреса и заголовка ссылки // изменение адреса картинки

$("a").attr({ $("img").attr("src", "/images/default.png");
"href": "http://anton.shevchuk.name",
"title": "My Personal Blog"
});
Работа с свойствами
Для работы со свойствами используем методы из семейства .prop():
prop(propName) — получение значения свойства;
prop(propName, propValue) — установка значения свойства;
removeProp(propName) — удаление свойства (скорей всего, никогда не понадобится);
$("#checkbox").prop("checked") - получаем значение состояния галочки
$("#checkbox").prop("checked", false) - удаляем галочку
$("#checkbox").prop("checked", true) - ставим галочку

События
jQuery работает практически со всеми событиями в JavaScript, ниже список самых востребованных с небольшими
пояснениями:
click — клик по элементу (порядок событий: «mousedown» → «mouseup» → «click»)
dblclick — двойной щелчок мышки
mousedown — нажатие клавиши мыши
mouseup — отжатие клавиши мыши
mousemove — движение курсора
mouseenter — наведение курсора на элемент; не срабатывает при переходе фокуса на дочерние элементы
mouseleave — вывод курсора из элемента; не срабатывает при переходе фокуса на дочерние элементы
mouseover — наведение курсора на элемент
mouseout — вывод курсора из элемента

События формы
focus — получение фокуса на элементе; актуально для input[type=text], но в современных браузерах работает и с
другими элементами
blur — фокус ушёл с элемента; срабатывает при клике по другому элементу на странице или по событию
клавиатуры.
focusin — фокус на элементе; данное событие аналогично focus, но при этом умеет «всплывать»
focusout — фокус ушёл с элемента; данное событие аналогично blur, «всплывает»
change — изменение значения элемента (значение при потере фокуса отличается от начального значения при
получении фокуса)
keydown — нажатие клавиши на клавиатуре
keypress — удержание клавиши на клавиатуре, последовательность «keydown → keypress → keyup» (только для
букв и цифр)
keyup — отжатие клавиши на клавиатуре
select — выбор текста для input[type=text] и textarea
submit — отправка формы
Работа с событиями
Для работы с событиями существует три основных метода:
on(event, handler) – добавление обработчика;
trigger(event) – инициация события из скрипта;
off(event) – отключение обработчика событий;
// вешаем обработчик
$("p").on("click", function() {
// что-то делаем
alert("Click!");
});
$("p").trigger("click");
$("p").off("click");
Работа с событиями
Внутри обработчика вы можете получить доступ к DOM-элементу используя ключевое слово this. Если же надо
будет воспользоваться jQuery-инструментами, то используйте конструкцию $(this)
$("p").on("click", function() {
$(this).css("color", "red");
});
Анимация
jQuery позволяет очень легко анимировать элементы на странице, для этого предусмотрено несколько функций.
При такой анимации происходит изменение атрибутов width, height, opacity и т.д.
$('img').hide(); // скроет все картинки
$('img').show(); // покажет все картинки
$('img').hide('slow'); // slow == 600 и fast == 200
$('img').show(400); // теперь вернем их на место, чуть быстрее
$('img').hide('slow', function() { // скрываем все картинки
alert("Images was hidden"); // после отображаем alert
});
$('img').toggle(); // hide → show или show → hide

Анимация
Поведение следующих методов схоже с предыдущими функциями, но анимация будет затрагивать
лишь высоту блоков.
$('img').slideUp(); - скроем все картинки
$('img').slideDown(); - теперь вернем их на место
$('img').slideToggle(); - поменяем значение

Анимация
Следующая функция fade — она манипулируют лишь свойством opacity:
$('img').fadeIn() – изменяет opacity от 0 до предыдущего значения
$('img').fadeOut() – изменяет opacity от текущего до 0
$('img').fadeToggle() – переключатель между In и Out
$('img').fadeTo("slow", 0.5) – изменяет значение opacity до требуемого значения

Анимация
Любой из предыдущих типов анимации можно реализовать с помощью метода animate. Данная
функция берёт один или несколько CSS-свойств элемента и изменяет их от исходного до
заданного.
$('img').animate({
'opacity': 0.5,
'height': '100px',
'width': '100px'
}, 4000);
Создание элементов
На примере рассмотрим создание элемента с атрибутами id и class.
var myDiv = $('<div>').attr({'id':'my', 'class':'some'}); // Самый быстрый способ
var myDiv = $('<div>', {'id':'my', 'class':'some'}); // Немного медленней
var myDiv = $('<div id="my" class="some"></div>'); // Самый медленный

Манипуляция с элементами
after(content) — вставляет контент после каждого элемента из выборки.
$("p").after("<hr/>"); // после каждого параграфа будет добавлена линия
insertAfter(element) — вставляет элементы из выборки после каждого элемента переданного в

качестве аргумента.
$("<hr/>").insertAfter("p") // линия будет добавлена после каждого параграфа
Если захотим переместить элемент, то надо будет его явно выбрать с помощью вызова jQuery.
$('p').after($('h1'));
before(content) — вставляет контент перед каждым выбранным элементом
$("p").before("<hr/>"); // перед каждым параграфом будет добавлена линия
insertBefore(element) — вставляет элементы перед каждым элементом, переданным в качестве

аргумента
$("<hr/>").insertBefore("p"); // перед каждым параграфом будет добавлена линия
append(content) — вставляет контент в конец каждого элемента из выборки.

$("p").append("<hr/>"); // в конец каждого параграфа будет добавлена линия
appendTo(element) — вставляет выбранный контент в конец каждого элемента, переданного в

$("<hr/>").appendTo("p") // линия будет добавлена в конец каждого параграфа
prepend(content) — вставляет контент в начало каждого элемента из выборки.
prependTo(element) — вставляет выбранный контент в начало каждого элемента, переданного в

replaceWith(content) – заменяет найденные элементы новым.
$("p").replaceWith("<hr/>");
replaceAll(target) – вставляет контент взамен найденному.
$("<hr/>").replaceAll("h3");
clone(withDataAndEvents) – клонирует выбранные элементы, для дальнейшей вставки копий

назад в DOM, позволяет также копировать и обработчики событий
empty() – удаляет текст и дочерние DOM-элементы
remove() – насовсем удаляет элемент из DOM
html() – возвращает HTML заданного элемента
html(newHtml) – заменяет HTML в заданном элементе
text() – возвращает текст заданного элемента; если внутри элемента будут другие HTML-теги, то
вернётся текст и элементы
text(newText) – заменяет текст внутри выбранных элементов, при попытке вставить таким образом
HTML, будет получен текст, где тэги будут приведены к HTML entities:
$("section").text("Some <strong>text</strong>");
// Some <strong>text</strong>
Размеры элементов
height() – возвращает высоту элемента за вычетом отступов и границ; если у нас несколько элементов в
выборке, то вернётся первый; значение, в отличие от метода «css('height')», возвращается без указания
единиц измерения
height(height) — устанавливает высоту всех элементов в выборке; если значение высоты передано без
указания единиц измерения, то это будут пиксели px.
width() и width(width) – работают с шириной элемента и ведут себя аналогично методу height().
innerHeight() и innerWidth() – возвращают, соответственно, высоту и ширину элемента, включая padding.
outerHeight() и outerWidth() – возвращают высоту и ширину элемента, включая padding и border.
outerHeight(true) и outerWidth(true) – возвращают высоту и ширину элемента, включая padding, border и

margin.
Размеры элементов

Лекция №9 - jQuery

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Лекция №9 - jQuery

Загружено:

Авторское право:

Доступные форматы

Введение в jQuery

Будет ли изменен цвет заголовка?

Полная запись Сокращенная запись

$("#content") – выбираем элемент с «id="content"»

$("section#content") – выбираем <section> с «id="content"»

$(".intro") – выбираем элементы с «class="intro"»

$("p.intro") – выбираем всё «p» с «class="intro"»

$(".intro.pinned") – выбираем элементы с классами «intro» и «pinned»

$("h3") – выбираем все теги <h3>

$("h1, h2") – выбираем все теги <h1> и <h2>

$("a[class]") – выбираем все теги <a> с атрибутом class

$("#post").next() – выбор следующего элемента после элемента с «id="post"»

$("article").children() – выбор дочерних элементов

$("p").parent() – выбор всех прямых предков элементов <p>

$("p").parents("section") – выбор всех предков <section> элемента <p>

$("p").closest("section") – выбор первого предка <section> элемента <p>

css(property) — получение значения CSS-свойства

css(property, value) — установка значения CSS-свойства

css({property:value, property:value}) — установка нескольких значений

css(property, function(index, value) { return value }) — тут для установки значения

$("#my").css("font-size", function(i, value){ $("#my").css({

hasClass(className) — проверка на причастность к определённому классу

removeClass(className) — удаление класса

toggleClass(className) — переключение класса

// получение адреса ссылки // получение альтернативного текста картинки

// изменение адреса и заголовка ссылки // изменение адреса картинки

prop(propName) — получение значения свойства;

prop(propName, propValue) — установка значения свойства;

removeProp(propName) — удаление свойства (скорей всего, никогда не понадобится);

$("#checkbox").prop("checked") - получаем значение состояния галочки

$("#checkbox").prop("checked", false) - удаляем галочку

$("#checkbox").prop("checked", true) - ставим галочку

click — клик по элементу (порядок событий: «mousedown» → «mouseup» → «click»)

dblclick — двойной щелчок мышки

mousedown — нажатие клавиши мыши

mouseup — отжатие клавиши мыши

mousemove — движение курсора

mouseover — наведение курсора на элемент

mouseout — вывод курсора из элемента

on(event, handler) – добавление обработчика;

trigger(event) – инициация события из скрипта;

off(event) – отключение обработчика событий;

$('img').hide(); // скроет все картинки

$('img').show(); // покажет все картинки

$('img').hide('slow'); // slow == 600 и fast == 200

$('img').show(400); // теперь вернем их на место, чуть быстрее

$('img').hide('slow', function() { // скрываем все картинки

alert("Images was hidden"); // после отображаем alert

$('img').toggle(); // hide → show или show → hide

$('img').slideUp(); - скроем все картинки

$('img').slideDown(); - теперь вернем их на место

$('img').slideToggle(); - поменяем значение

$('img').fadeIn() – изменяет opacity от 0 до предыдущего значения

$('img').fadeOut() – изменяет opacity от текущего до 0

$('img').fadeToggle() – переключатель между In и Out

$('img').fadeTo("slow", 0.5) – изменяет значение opacity до требуемого значения

var myDiv = $('<div>').attr({'id':'my', 'class':'some'}); // Самый быстрый способ

var myDiv = $('<div>', {'id':'my', 'class':'some'}); // Немного медленней

var myDiv = $('<div id="my" class="some"></div>'); // Самый медленный

$("p").after("<hr/>"); // после каждого параграфа будет добавлена линия

insertAfter(element) — вставляет элементы из выборки после каждого элемента переданного в

$("<hr/>").insertAfter("p") // линия будет добавлена после каждого параграфа

$("p").before("<hr/>"); // перед каждым параграфом будет добавлена линия

insertBefore(element) — вставляет элементы перед каждым элементом, переданным в качестве