Комбинированные селекторы
Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS
| «first, second, …» | элементы удовлетворяющие любому из селекторов first, second, … |
| «outer inner» | элементы из inner, которые являются потомками (т.е. лежат внутри) элементов из outer |
| «parent > child» | элементы из child, которые являются прямыми потомками элементов из parent |
| «prev + next» | элементы из next, которые следуют непосредственно за элементами из prev |
| «prev ~ next» | элементы из next, которые следуют за элементами из prev |
Селекторы по атрибутам
| «[name]» | элементы, содержащие атрибут name |
| «[name = value]» | элементы, у которых значение атрибута name совпадает с value |
| «[name != value]» | элементы, у которых значение атрибута name не совпадает с value |
| «[name ^= value]» | элементы, у которых значение атрибута name начинается с value |
| «[name $= value]» | элементы, у которых значение атрибута name заканчивается на value |
| «[name *= value]» | элементы, у которых значение атрибута name содержит подстроку value |
| «[name ~= value]» | элементы, у которых значение атрибута name содержит слово value |
| «[name |= value]» | элементы, у которых значение атрибута name имеют префикс value (равен value или имеет вид: «value-*») |
| «[first][second][…» | элементы, соответствующие всем заданным условиям на атрибуты одновременно |
Простые фильтры
Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в CSS
| «:focus» | элемент, находящийся в фокусе |
| «:first» | первый найденный элемент |
| «:last» | последний найденный элемент |
| «:eq( )» | элемент идущий под заданным номером среди выбранных |
| «:not(selector)» | все найденные элементы, кроме указанных в selector |
| «:even» | элементы с четными номерами позиций, в наборе выбранных элементов |
| «:odd» | элементы с нечетными номерами позиций, в наборе выбранных элементов |
| «:gt( )» | элементы с индексом превышающим n |
| «:lt( )» | элементы с индексом меньшим, чем n |
| «:header» | элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.) |
| «:animated» | элементы, которые в данный момент задействованы в анимации |
| «:hidden» | невидимые элементы страницы |
| «:visible» | видимые элементы страницы |
| «:lang(language)» | элементы, в которых указаны языки содержимого |
| «:root» | элемент, который является корневым в документе |
Фильтры по содержимому
| «:contains(text)» | элементы, содержащие заданный текст |
| «:empty» | элементы без содержимого (без текста и других элементов) |
| «:has(selector)» | элементы, которые содержат хотя бы один элемент из selector |
| «:parent» | непустые элементы |
Фильтры дочерних элементов
Данные селекторы отфильтровывают элементы по их расположению в родительских элементах
| «:first-child» | элементы, расположенные первыми в своих родительских элементах |
| «:last-child» | элементы, расположенные последними в своих родительских элементах |
| «:nth-child( )» | элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером) |
| «:nth-child-last( )» | |
| «:only-child» | элементы, являющиеся единственными потомками в своих родительских элементах |
| «:only-of-type» | элементы, являющиеся единственными, удовлетворяющими селектору, потомками в своих родительских элементах |
| «:first-of-type» | те из выбранных элементов, которые первыми встречаются в своих родительских элементах |
| «:last-of-type» | те из выбранных элементов, которые последними встречаются в своих родительских элементах |
| «:nth-first-of-type( )» | те из выбранных элементов, которые в определенную очередь встречаются в своих родительских элементах |
| «:nth-last-of-type( )» |
Фильтры элементов форм
| «:button» | элементы с тегом button или типом button |
| «:radio» | элементы, являющиеся переключателями |
| «:checkbox» | элементы, являющиеся флажками |
| «:text» | элементы, являющиеся текстовыми полями |
| «:password» | элементы, являющиеся полями ввода пароля |
| «:file» | элементы, являющиеся полями загрузки файлов |
| «:submit» | элементы, являющиеся кнопками отправки формы |
| «:reset» | элементы, являющиеся кнопками очистки формы |
| «:image» | элементы, являющиеся изображениями для отправки формы (input типа image) |
| «:input» | элементы, являющиеся элементами формы (с тегами input, textarea или button) |
| «:selected» | выбранные элементы (со статусом selected). Это могут быть элементы типа <option>. |
| «:focus» | элементы формы, находящиеся в фокусе. |
| «:checked» | выбранные элементы (со статусом checked). Это могут быть элементы типа <checkbox> или <radio>. |
| «:enabled» | активные элементы формы (со статусом enabled) |
| «:disabled» | неактивные элементы формы (со статусом disabled) |
Перемещение по дереву элементов
| .parent() | вернет родительские элементы всех выбранных элементов. |
| .parents() | Находит всех предков у выбранных элементов, т.е. не только прямых родителей, но и прародителей, прапрародителей и так далее, до начало дерева DOM. |
| .parentsUntil() | Находит предков, как и .parents(), но прекращает поиск перед элементом, удовлетворяющим заданному селектору. |
| .offsetParent() | Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию). |
| .children() | вернет дочерние элементы всех выбранных элементов. |
| .next() | вернет элемент, лежащий сразу после выбранных элементов. |
| .nextAll() | Находит элементы, которые лежат после каждого из выбранных элементов. |
| .nextUntil() | Находит элементы, которые лежат после каждого из выбранных, но не дальше элемента, удовлетворяющего заданному селектору. |
| .prev() | вернет элементы, лежащие перед выбранных элементов. |
| .prevAll() | Находит элементы, которые лежат перед каждым из выбранных элементов. |
| .prevUntil() | Находит элементы, которые лежат перед каждым из выбранных, но не дальше элемента, соответствующего заданному селектору. |
| .siblings() | Находит все соседние элементы (под соседними понимаются элементы с общим родителем). |
| .eq(i) | вернет элемент, с индексом i в наборе. Методы jQuery для него доступны. |
| .get(i) | вернет DOM-объект выбранных элементов, с индексом i. Методы jQuery для него не доступны. |
| .get() | вернет массив DOM-объеков всех выбранных элементов |
| .size() | вернет размер набора (количествово выбранных элементов). |
| .each(func) | выполнить func для каждого эллемента. |
| .map() | Вызывает заданную функцию для каждого элемента набора, и в итоге создает новый набор, составленный из значений, возвращенных этой функцией. |
| .closest() | Находит ближайший, соответствующий заданному селектору элемент, из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM. |
| .find() | Находит элементы по заданному селектору, внутри выбранных элементов. |
| .filter() | Фильтрует набор выбранных элементов с помощью заданного селектора или функции. |
| .first() | Возвращает первый элемент в наборе. |
| .has() | Фильтрует набор выбранных элементов, оставляя те, которые имеют потомков, соответствующих селектору. |
| .is() | Проверяет, содержится ли в наборе, хотя бы один элемент удовлетворяющий заданному селектору. |
| .last() | Возвращает последний элемент в наборе. |
| .not() | Возвращает элементы, не соответствующие заданным условиям. |
| .slice() | Возвращает элементы с индексами из определенной области (например от 0 до 5). |
| .add() | Добавляет заданные элементы в набор. |
| .andSelf() | Добавляет элементы из предыдущего набора, к текущему (речь идет об одной цепочке методов). |
| .contents() | Находит все дочерние элементы у выбранных элементов. В результат, помимо элементов, включается и текст. |
| .end() | Возвращает предыдущий набор элементов в текущей цепочке методов. |
Манипуляция с найденными элементами
| .hide() |
Скрыть элемент. .hide(«slow») — скрыть элемент медленно. «slow», «normal», «fast» или число миллисекунд. Вторым параметром может быть задана Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента. |
| .show() |
Отобразить элемент. .show(«slow») — скрыть элемент медленно. |
| .css(«height») | возвратит значение высоты у элемента с идентификатором bigIt. |
| .css(«width», «20px») | установит новое значение ширины |
| .attr(«class») | возвратит значение класса элемента |
| .attr(«class», «box») | установит новое значение атрибута class у элемента |
| .html(«Новое») | изменит все html-содержимое элемента на заданное в методе html |
| .text() | возвратит текст, находящийся внутри элемента |
| .empty() | очистить от содержимого элементы |
|
.offset() .position() | позволят узнать или изменить позицию выбранного элемента. |
|
.width() .height() | позволят узнать или изменить размеры выбранного элемента. |
| .animate(properties, |
[duration]
, [easing], [callback])
анимация.
properties — список CSS-свойств, участвующих в анимации и их конечных
значений. Задаются объектом, в формате {ключ:значение}, например:{opacity:
50, width: 100, height: 200}.
duration — продолжительность выполнения анимации. Может быть задана в
миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600
миллисекунд).
easing — изменение скорости анимации (будет ли она замедляется к концу
выполнения или наоборот ускорится). Задается строковым значением: «linear»
и «swing» (для равномерной анимации и анимации с ускорением).
callback — функция, которая будет вызвана после завершения анимации.
Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно
скрыть этот элемент, заменить текст, и плавно сделать элемент видимым: $(«#mydiv»).animate({height:
«hide»}, 300).text(«Новый текст»).animate({height:
«show»}, 300); значения
«hide», «show» означают исчезновение и появление
элемента, за счет параметра, к которому они применены.
События
Базовые
| .on(events, |
[selector]
, [data], handler)
Универсальный метод для установки обработчиков событий на выбранные элементы страницы.
events: blur, focus, focusin, focusout, load, resize, scroll, unload, click,
dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
mouseleave, change, select, submit, keydown, keypress, keyup, error selector
— селектор по которому будут фильтроваться элементы, лежащие внутри уже найденных. В итоге, обработчик будет срабатывать только в том
случае, если событие «поднялось» от одного из отфильтрованных элементов.
data — данные, передаваемые обработчику событий. В обработчике будут доступны
в переменной event.data.
handler — функция, которая будет установлена в качестве обработчика.
Например: (‘#foo’).on(‘click’, function(){alert(‘Вы нажали на
элемент «foo»‘);}); Обработчик для
всех элементов li: $(‘ul’).on(‘click’, ‘li’,
function(event){})
.off()
Удаляет обработчики, установленные с помощь .on().
.bind()
Устанавливает обработчик события на выбранные элементы страницы. начиная с jQuery-1.7, данный метод считается устаревшим
.live()
Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки.
.delegate()
Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки.
.one()
Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов.
.unbind()
Удаляет обработчик событий у выбранных элементов.
.die()
Удаляет обработчик событий, который был установлен с помощью live().
.undelegate()
Удаляет обработчик событий, который был установлен с помощью delegate().
.trigger()
Выполняет указанное событие и запускает его обработчик.
.triggerHandler()
Запускает обработчик указанного события, без его выполнения.
jQuery.proxy()
По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.
event
Объект, содержащий данные о текущем событии. Передается всем обработчикам событий.
События мыши
| .click() | Устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие. |
| .dblclick() | Устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие. |
| .hover() | Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом. |
| .mousedown() | Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие. |
| .mouseup() | Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие. |
| .mouseenter() | Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover. |
| .mouseleave() | Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout. |
| .mousemove() | Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие. |
| .mouseout() | Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. |
| .mouseover() | Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. |
| .toggle() | Поочередно выполняет одну из двух или более заданных функций, в ответ на «клик» по элементу. |
События клавиатуры
| .keydown() | Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие. |
| .keyup() | Устанавливает обработчик возвращение клавиши клавиатуры в ненажатое состояние, либо, запускает это событие. |
| .keypress() | Устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие. |
События формы
| .focus() | Устанавливает обработчик получения фокуса, либо, запускает это событие. |
| .blur() | Устанавливает обработчик потери фокуса, либо, запускает это событие. |
| .focusin() | Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних. |
| .focusout() | Устанавливает обработчик потери фокуса самим элементом или одним из его дочерних. |
| .select() | Устанавливает обработчик выделения текста, либо, запускает это событие. |
| .submit() | Устанавливает обработчик отправки формы, либо, запускает это событие. |
| .change() | Устанавливает обработчик изменения элемента формы, либо, запускает это событие. |
События загрузки страницы
| .ready() | Устанавливает обработчик готовности дерева DOM. |
| .load() | Устанавливает обработчик завершения загрузки элемента. |
| .unload() | Устанавливает обработчик ухода со страницы (при переходе по ссылке, закрытии браузера и.т.д.). |
События браузера
| .error() | Устанавливает обработчик ошибки при загрузке элементов (например отсутствие необходимой картинки на сервере). |
| .resize() | Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие. |
| .scroll() | Устанавливает обработчик «прокрутки» элементов документа, либо, запускает это событие. |
Ajax загрузка страниц
Оставить комментарий