Прежде чем так или иначе манипулировать элементом, его необходимо выбрать. Библиотека jQuery предлагает нам очень простую и знакомую систему выборки элементов, основанную на старых-добрых css-селекторах.
Как выбрать нужный элемент с помощью jQuery? Очень просто — следуя этой универсальной формуле:

$(‘selector’)

$ — псевдоним глобальной функции библиотеки jQuery (может быть свободно заменен на jQuery, но $, как мне кажется, все же удобнее). Данная функция возвращает объект, выбранный по селектору. Селектор передается функции $ в качестве первого параметра как строковое значение (в кавычках).

Базовые селекторы

*‘ — выбирает абсолютно все элементы на странице
.className‘ — выбирает элементы со значением атрибута class=’className’
#idName‘ — выбирает элементы с id = ‘idName’
tagname‘ — выбирает элементы по имени html-тега, например h1 или span
‘selector1, selector2, selector3…’ — можно одновременно выбирать по нескольким селекторам, перечисляя их через запятую

Селекторы иерархии

parent > child‘ — выбирает элементы child, являющиеся непосредственными потомками элементов parent.

Пример:


Мы хотим выбрать элемент span, находящийся внутри div с классом контейнер. В первой разметке искомый span является непосредственным потомком div.container, во втором же — нет, так как он располагается внутри абзаца, который и будет считаться его родителем. В первом случае мы можем воспользоваться для выборки селектором >:

$(‘.container > span’)

prev + next‘ — выбирает элемент next(!!!), который в разметке следует непосредственно за элементом prev.

Пример:


В первом случае мы вполне можем для выборки элемента span с классом .next воспользоваться следующим селектором

$(img.prev + span.next)

prev ~ next‘ — а вот этот селектор не столь привередлив и вполне способен выбрать соседей, идущих в некотором отдалении друг от друга, лишь бы они были на одном уровне. Этот селектор вполне сработает во втором случае из предыдущего примера, выбирая нужный нам span, следующий за img.prev, даже несмотря на то, что их разделяет еще один блок.

$(img.prev ~ span.next)

Селекторы по атрибутам

jQuery так же позволяет нам отбирать элементы по атрибутам и их значению.

‘[attr]’ — выберет все элементы, у которых есть атрибут attr, например, $(‘[src]’) выберет все изображения, так как они точно имеют атрибут src.

Следующие селекторы работают со значение атрибутов. Некоторые из них используют синтаксис регулярных выражений, для поиска нужной подстроки в этом значении.
[attr= value]‘ — выберет все элементы, у которых значение атрибута attr равно ‘value’
[attr!= value]‘ — выберет все элементы, у которых значение атрибута attr не равно ‘value’
[attr^= value]‘ — выберет все элементы, у которых значение атрибута attr начинается с подстроки ‘value’
‘[attr$= value]’ — выберет все элементы, у которых значение атрибута attr заканчивается подстрокой ‘value’, часто используется для поиска файлов по расширению (.jpg, .gif)
‘[attr*= value]‘ — ищет подстроку ‘value’ в любом месте значения атрибута
[attr~= value]‘ — ищет слово ‘value’ в любом месте значения атрибута (слово — это подстрока, окруженная пробелами)
[attr|= value]‘ — ищет префикс ‘value’ в значении атрибута attr. Выберет все элементы, у которых этот атрибут равен либо ‘value’, либо начинается с подстроки ‘value-‘ (префикс).
‘[first][second]’ — можно одновременно выбирать по нескольким селекторам атрибутов

Базовые фильтры

Фильтры призваны помочь нам проредить выборку, отобрав только необходимые элементы. Название большинства фильтров говорит само за себя.

«:focus» — элемент выборки, находящийся в фокусе
«:first» — первый элемент выборки
«:last» — последний элемент выборки
«:eq(n)» — элемент выборки под заданным номером (индексом) n
«:not(selector)» — все элементы выборки кроме указанного
«:even» — четные элементы выборки
«:odd» — нечетные элементы выборки
«:gt(n)» — элементы с индексом больше n
«:lt(n)» — элементы с индексом меньше n
«:header» — заголовки
«:hidden» — скрытые элементы
«:visible» — видимые элементы
«:lang(language)» — элементы, для которых определен атрибут lang
«:root» — корневой элемент

Фильтры дочерних элементов

Следующие селекторы анализируют всех потомков родительского элемента, вычисляя элемент, занимающий указанное место. Учитывают потомков всех типов (img, p и span будут считаться наравне).


:first-child‘ — первый потомок у родителя
‘:last-child‘ — последний потомок у родителя
:nth-child()‘ — номер потомка в очереди у родителя указывается в скобках (может быть как простым числом, так и формулой типа 3n+2)
:nth-child-last()‘ — то же самое, но счет идет с конца
‘:only-child‘ — единственный потомок у родителя

Группа селекторов of-type работает аналогично, но учитывает только потомков такого же типа, как искомый. Например, для селектора p:first-of-type в выше приведенном примере создастся своя собственная очередь потомков, включающая только элементы типа p (абзац).


:only-of-type
:first-of-type
:last-of-type
:nth-first-of-type()
‘:nth-last-of-type()

Фильтры по содержимому

:contains(text)
‘:empty
:has(selector)
‘:parent‘ — выберет непустые элементы

Фильтры элементов форм

‘:button
‘:radio
‘:checkbox
‘:text
‘:password
‘:file
‘:submit
‘:reset
‘:image
‘:input
‘:selected
‘:focus
‘:checked
‘:enabled
‘:disabled

Вам будет интересно:

События и их обработка в jQuery
Эффекты в jQuery
Манипуляции с элементами в jQuery
AJAX в jQuery

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован