ИП. JavaScript. Библиотеки |
МИЭТ, 2017 |
Наиболее известные библиотеки
Prototype |
- |
http://prototypejs.org/ |
MooTools |
- |
http://mootools.net/ |
JQuery |
- https://jquery.com/ |
|
(jQuery UI, jQuery Mobile)
ИП. JavaScript. Библиотеки. jQuery |
МИЭТ, 2017 |
Подключение в код страницы
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
После этого на уровне window становится доступна переменная $, Содержащая свойства и методы jQuery
Пример использования $
$(".navbar-nav li")
возвращает список всех li находящихся в элементе с атрибутом class='navbar-nav'
ИП. JavaScript. Библиотеки. JQuery. Перебор элементов |
МИЭТ, 2017 |
Выводим содержимое всех li находящихся в элементе с атрибутом class='navbar-nav'
Результат
ИП. JavaScript. Библиотеки. JQuery. Селекторы |
МИЭТ, 2017 |
Поддерживаются все селекторы CSS и их комбинации:
#ID, .ClassName, Parent > Child, [name=value], a:hover, first-child и т. д.
Множество дополнительных возможностей
Фильтры псевдоселекторов
:gt( ) / :lt( ) |
|
- |
элементы с индексом превышающим/меньшим n |
:header |
|
- |
элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.) |
:animated |
|
- |
элементы, которые в данный момент задействованы в анимации |
:hidden / :visible |
- |
невидимые/видимые элементы страницы |
|
:root |
|
- |
элемент, который является корневым в документе. |
и т.д. |
|
|
|
Фильтры содержимого |
|||
:contains(text) |
|
- |
элементы, содержащие заданный текст |
:empty" |
|
- |
элементы без содержимого (без текста и других элементов) |
:has(selector) |
|
- |
элементы, которые содержат хотя бы один элемент из selector |
:parent" |
|
- |
непустые элементы |
Фильтры форм |
|
|
|
:button |
- |
элементы с тегом button или типом button |
|
:radio |
- |
элементы, являющиеся переключателями |
|
и т.д. |
|
|
|
:focus |
- |
элементы формы, находящиеся в фокусе. |
|
:checked |
- |
выбранные элементы (со статусом checked). |
|
и т.д. |
|
|
|
Примеры вызовов: $('.vuz :button')
$( '.vuz' ).filter( ':button' ) - аналогичен предыдущему, но работает быстрее
ИП. JavaScript. JQuery. Манипуляции с наборами |
МИЭТ, 2017 |
Изменение содержимого
Изменение оформления
Изменение описания
Изменение геометрии и позиционирования
Обработка событий
ИП. JavaScript. JQuery. Изменение содержимого |
МИЭТ, 2017 |
|
.html() |
- возвращает/изменяет html-содержимое элементов |
|
.text() |
- возвращает/изменяет текст, находящийся в элементах |
|
.append() / .appendTo() |
- добавляет содержимое в конец элементов |
|
.prepend() / .prependTo() |
- добавляет содержимое в начало элементов |
|
.after() / .insertAfter() |
- добавляет содержимое после элементов |
|
.before() / .insertBefore() |
- добавляет содержимое перед элементами |
|
.wrap() / .wrapAll() |
- окружает элементы заданными html-элементами |
|
.wrapInner() |
- окружает содержимое элементов html-элементами |
|
.remove() |
- удаляет элементы |
|
.empty() |
- удаляет содержимое элементов |
|
.unwrap() |
- удаляет родительские элементы (содержимое сохраняется) |
|
.clone( ) |
- возвращает копию выбранных элементов |
|
.replaceWith() / .replaceAll() |
- заменяет одни элементы на другие |
ИП. JavaScript. JQuery. Изменение содержимого |
МИЭТ, 2017 |
Примеры:
$( '#Vuz' ).filter( ':button' ).wrap("<div class='super'></div>"); // каждую кнопку внтри #Vuz помещаем в div
$( '#Vuz' ).filter( ':button' ).wrapAll("<div class='super'></div>"); // все кнопку внтри #Vuz помещаем в один div
$( '#Vuz fieldset').wrapInner("<div class='super'></div>");
// содержимое внутри каждого fieldset внтри #Vuz помещаем в div
//Использование функции
$( '#Vuz' ).filter( ':button' ).wrap(function() { if($(this).attr('value') == "МИЭТ" )
return "<div class='super'></div>"; else
return "";
});
$("#Vuz .button_1").replaceWith($("#Vuz .button_2"));
// заменяем кнопку со стилем .button_1, перемещаемой кнопкой со стилем .button_2
ИП. JavaScript. JQuery. Изменение оформления |
МИЭТ, 2017 |
Изменение оформления это присваивание значений стилей и классов CSS
|
.css() |
- возвращает/изменяет CSS параметры элемента |
|
.addClass() |
- добавляет класс элементам выборки |
|
.removeClass() |
- удаляет класс(ы) у элементов выборки |
|
.toggleClass() |
- изменяет класс на противоположный (добавляет/удаляет) |
|
.hasClass() |
- проверяет наличие заданного класса у выбранных элементов |
ИП. JavaScript. JQuery. Изменение оформления |
МИЭТ, 2017 |
Примеры:
$("#Vuz").css("color");
// вернет значение цвета текста у элемента #Vuz
$("#Vuz").css({"color":"#ccc", "font-weight":"bold"});
// установит значение цвета и начертания у элемента #Vuz
.css — возвращает значение только для первого элемента из набора
// вывод значения цвета текста для всех элементов из выборки $("#Vuz fieldset").each(function(index) {
console.log($(this).css("color"));
});
Переключение классов: если есть — удалит, если нет - добавит
$("#Vuz").toggleClass("clSuper clUnSuper");
// Если у #Vuz был установлен clSuper он заменится на clUnSuper и наоборот
ИП. JavaScript. JQuery. Изменение описания |
МИЭТ, 2017 |
Под описанием понимаем конструкции, которые характеризуют элемент, но не имеют влияния на визуальное представление и идентификацию. По сути это атрибуты.
|
attr() |
- возвращает/изменяет значение атрибута у элементов |
|
.removeAttr() |
- удаляет атрибут у элементов |
|
.val() |
- возвращает/изменяет значение атрибута value у элементов |
Примеры:
$('.Vuz').attr("best", "");
//Добавить всем «ВУЗам» атрибут best
//Будет добавлено так: <div class='Vuz' best>...</div>
$('.Vuz').attr("best", "500");
//Добавить всем «ВУЗам» атрибут best со значением 500
//Будет добавлено так: <div class='Vuz' best=500>...</div>
$("input[name='VuzName']").val() // эквивалентно $("input[name='VuzName']").attr('value') // Получить значение поля с именем VuzName
$("input[name='VuzName']").val(500)
// Установить значение поля с именем VuzName в 500