Слайд 1 - BioRainbow

JavaScript: jQuery
Валеев Т. Ф.
jQuery: введение
• jQuery — Библиотека, фокусирующаяся на взаимодействии JavaScript
и DOM
http://jquery.com/
• Активно разрабатывается и получает всё больше популярности.
• Имеется большое количество плагинов.
• Первая версия: январь 2006, текущая стабильная — май 2014
(ver.1.11.1/2.1.1, ~30Kb в сжатом виде+GZip), лицензия GPL и MIT
• Ветка 2.x — то же самое, но без поддержки старых браузеров
• Автор: Джон Резиг (John Resig), работал в Mozilla
• Вся функциональность в объекте jQuery, который создаётся через $()
• Также есть класс для Ajax-запроса и несколько вспомогательных
функций.
• Подключение:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
http://code.jquery.com/jquery-1.11.1.min.js
jQuery: введение
•
•
•
•
•
•
•
Основной объект jQuery — коллекция DOM-элементов.
jQuery-объект создаётся с помощью селекторов, HTML-кода, DOM-элемента,
массива DOM-элементов.
Действие, совершаемое с коллекцией, применяется, как правило, ко всем её
элементам (кроме операций чтения состояния, которые применяются к
первому элементу).
Для явного доступа к функциям DOM Element надо воспользоваться методом
get() (вернёт массив DOM-элементов) или get(index) — один DOM-элемент.
Весь доступ через методы. Например:
$(‘#box’).css(‘color’, ‘red’)
Если объект представляет набор DOM-элементов, изменения коснутся
каждого.
Для совместного использования jQuery и других библиотек, использующих $
(prototype.js) в jQuery предусмотрен метод jQuery.noConflict().
$(function() {…}) — вызвать функцию после загрузки DOM-модели документа.
jQuery: селекторы (~CSS 1.3)
•
•
•
•
•
•
•
•
•
* — все элементы
h1, .class, #id — по тэгу, классу и id
“h1 h2”, “h1 > h2”, “h1 ~ h2”, “h1 + h2” — потомок, непосредственный потомок,
собрат, непосредственный собрат
[name], [name=“value”], [name!=“value”], , [name^=“start”], [name$=“end”],
[name*=“substring”], [name|=“startToDash”], [name~=“word”] — фильтры по
атрибуту.
:button, :checkbox, :file, :image, :input, :password, :radio, :reset, :submit, :text,
:header – сахар (= “button, [type=button]” и т. д.)
:checked, :disabled, :enabled, :focus, :hidden, :visible, :selected, :animated —
состояние элемента
:empty, :parent, :only-child, :even, :odd, :first, :last, :first-child, :last-child, :only-oftype, :last-of-type, :first-of-type, :eq, :lt, :gt, :nth-child(1/even/odd/4n+1) и т. д.
:contains(Text), :not(selector), :has(selector) – условия
Имейте в виду: document/element.querySelectorAll()
jQuery: создание объекта
• Селектор ( => jqbasic.html )
• Селектор с контекстом $(‘div’, ajax.responseXML)
• Создание DOM-элементов на лету из HTML:
$(‘<div><p>Hello!</p></div>’) (пока в документ не вставлен!)
• Конструирование из DOM-элемента:
$(document.getElementById(“id”))
• Конструирование из массива DOM-элементов:
$(document.getElementsByName(“name”))
Манипулирование элементами
• Простые операции: each(function), size(), eq(num), filter(selector),
get([num]), index(element), slice(start[, end]), add(content)
• Ассоциировать данные с элементом:
data(name,value), data(name), removeData(name)
• Доступ к аттрибутам:
attr(key[, value]), attr(key,function), attr({attrhash}), removeAttr(key),
css(name[, value]), css({csshash}), val([value]), addClass(className),
removeClass(className), toggleClass(className), hasClass(className)
• Содержимое: html([newhtml]), text([newtext])
• Координаты и размеры: offset(), offsetParent(), position(),
scrollTop([val]), scrollLeft([val]), height([val]), width([val]), innerWidth,
innerHeight, outerWidth, outerHeight и т. д.
Манипуляция деревом DOM
• Добавление новых элементов: append(content),
prepend(content), after(content), before(content) ( content =
String, Element, jQuery )
• Добавление текущего элемента: appendTo(selector),
prependTo(selector), insertAfter(selector),
insertBefore(selector)
• Обернуть: wrap(content) “<div></div>”, wrapAll(),
wrapInner()
• Заменить: replaceWith(content), replaceAll(selector)
• Удалить из дерева: remove(), empty()
• Копировать: clone()
Обход дерева
• Любой метод выполняется для каждого элемента из набора и
возвращает набор уникальных элементов
• На текущем уровне:
next([selector]), prev([selector]), nextAll([selector]), prevAll([selector]),
siblings([selector])
• Вверх по дереву: parent([selector]), parents([selector]), closest(selector)
• Вниз по дереву: children([selector]), find(selector), contents()
• Модификация списка элементов: add([selector/elements/html]),
addBack(), first(), last(), not([selector]), filter([selector]), has([selector]),
eq(n), slice(from, to), end():
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
События
• Можно регистрировать много для одного объекта
• От устройств: click, dblclick, mousedown, mouseup, mousemove,
mouseenter, mouseleave, mouseover, mouseout, keydown, keyup,
keypress
• Логические: focus, blur, select, scroll, submit, change, resize, load, unload
• on(“eventName[.namespace]”, fn) (off) — ассоциировать произвольное
событие с элементом (можно создавать и свои!)
• trigger(eventName) — сгенерировать событие
• on(“eventName[.namespace]”, selector, fn) — «живое» событие, будет
добавляться для всех элементов селектора
• off(“[eventName][.namespace]”[, selector]) – убрать живое событие ( =>
live.html )
• toggle(f1, f2, …) — вызывать при кликах поочерёдно разные функции
• hover(fover, fout) — shortcut для mouseover/mouseout
События
• Пришедшее событие (например, click на элементе) поступает на
обработчики самого внутреннего элемента, а затем по очереди
передаётся вышестоящим (event bubbling), после чего выполняется
действие по умолчанию, определяемое браузером (например, для
dblclick — выделение слова).
• Чтобы запретить действие по умолчанию, в обработчике события
надо вызвать event.preventDefault()
• Чтобы запретить bubbling, надо вызвать event.stopPropagation()
• Чтобы запретить и bubbling, и обработку события другими
обработчиками текущего элемента, надо вызвать
event.stopImmediatePropagation()
• Будьте аккуратнее с событиями, так как количество обработчиков
может непредсказуемо расти, а также возможно зацикливание.
Эффекты
• Эффекты могут длиться некоторое время. Их можно
объединять в цепочку, формируя очередь
• Показать/скрыть show([speed]), hide([speed]),
toggle([speed]), fadeIn(speed), fadeOut(speed)
• Свернуть: slideUp(speed), slideDown(speed)
• CSS-анимация: animate({csshash}, speed)
csshash:
{width: “70%”, top: “+=100px”, left: “-=50px”}
• stop() — остановить выполнение эффектов (или всех, или
текущего)
=> jqanimate.html
Другие полезные библиотеки
•
•
•
•
•
•
•
•
jQueryUI — элементы пользовательского интерфейса на базе jQuery
http://jqueryui.com/
Bootstrap.js — ещё UI-компоненты
http://getbootstrap.com/javascript/
Ext JS (Project Sencha) — платформа для веб-разработки
http://www.sencha.com/products/extjs/
Dojo toolkit — UI-компоненты, графики
http://dojotoolkit.org/
MooTools — альтернатива jQuery
http://mootools.net/
AngularJS — MVW framework
https://angularjs.org/
ReactJS / JSX — компонентный подход к интерфейсам
http://facebook.github.io/react/
RequireJS — менеджер зависимостей
http://requirejs.org/