Руководство по JQuery-селекторам
Признаки JQuery-селекторов
Вот некоторые признаки JQuery-селекторов :
Как использовать JQuery-селекторы
Чтобы выбрать или создать объект DOM « testdiv » ( JQuery селектор по атрибуту ):
Чтобы выбрать все теги span страницы:
Мы снова вызываем родную функцию JavaScript document.getElementsByName(‘span’) ;
Чтобы выбрать все элементы с классом “ red-div ”:
Чтобы выбрать все элементы страницы:
Чтобы выбрать все элементы div с классом “ red-div ” ( JQuery селектор по классу ):
Другой сложный пример : Выбрать все дочерние элементы span из div с идентификатором “ form ”, которые имеют класс “ button ”:
JQuery несколько селекторов через запятую:
Различные типы JQuery-селекторов
JQuery-селекторы можно разделить на следующие категории:
Основные селекторы CSS
Селекторы атрибута
Выбор элементов по указанному атрибуту.
Выбор элементов с определенным значением атрибута.
Чтобы выбрать все теги анкоров, которые содержат атрибут target со значением « _blank «:
Выбор элементов с атрибутом, содержащим определенное значение.
Селекторы формы
Чтобы выбрать все элементы формы, с установленными флажками:
Выбрать все отключенные элементы:
JQuery селектор input :
Выбрать все радио-кнопки:
Селекторы контента
Соответствующие JQuery селекторов примеры использования:
Выбрать все пустые теги span :
Селекторы иерархии
В jQuery селекторы также могут быть применены на основе иерархии. Например, можно выбрать элементы одного уровня, родительский элемент на уровень выше или дочерние элементы. Ниже приведено несколько примеров:
Получить все элементы div одного уровня с конкретным элементом ( JQuery селектор по id ):
Вывести все элементы div одного уровня с абзацами:
Получить все элементы li конкретного элемента ul :
Селекторы jQuery
Селекторы jQuery – это одна из важнейших частей библиотеки jQuery.
Селекторы jQuery позволяют делать выборки и манипулировать элементами HTML.
Селекторы jQuery используются, чтобы «найти» (или выбрать) элементы HTML, основываясь на их имени, идентификаторе, классах, типах, атрибутах, значениях атрибутов и т.д. В их основе лежат существующие селекторы CSS, плюс некоторые собственные селекторы библиотеки.
Все селекторы в jQuery начинаются с символа доллара и круглых скобок: $().
Селектор элемента
jQuery селектор элемента выбирает элемент по его имени.
Вы можете выбрать все элементы
на странице следующем образом:
В следующем примере, когда пользователь нажмет на кнопку, все элементы
Селектор по идентификатору
jQuery селектор по идентификатору использует идентификатор (атрибут id) тега HTML, чтобы найти заданный элемент.
Идентификатор должен быть уникальным на странице, поэтому селектор по идентификатору обычно используется тогда, когда необходимо найти один уникальный элемент.
Чтобы найти элемент с определенным идентификатором, напишите символ решетки (#), за которым следует имя идентификатора HTML элемента:
В следующем примере, когда пользователь нажимает на кнопку, элемент с атрибутом id=»test» скрывается:
Селектор по классу
jQuery селектор по классу ищет элементы с заданным классом (атрибут class).
Чтобы найти элементы с определенным классом, напишите точку (.), за которой следует имя класса:
В следующем примере, когда пользователь нажимает на кнопку, элементы с атрибутом class=»test» скрываются:
Еще примеры jQuery селекторов
| Синтаксис | Описание |
|---|---|
| $(«*») | Выбирает все элементы |
| $(this) | Выбирает текущий HTML элемент |
| $(«p.intro») | Выбирает все элементы |
с атрибутом
Функции в отдельном файле
Выбор элементов в jQuery
В этой статье рассмотрим одну из наиболее мощных и часто используемых возможностей функции jQuery: выбор элементов DOM посредством селектора.
Введение
Строительство полнофункциональных сайтов и веб-приложений невозможно без манипулирования элементами DOM из которых состоят страницы. Но, прежде чем ими манипулировать, их необходимо сначала получить.
К счастью, библиотека jQuery обеспечивает достаточно мощный способ выбора элементов, основанный на селекторах. Заключается он в том, что для получения набора элементов достаточно просто передать селектор в функцию jQuery:
Селектор – это шаблон для поиска элементов. Синтаксис селекторов в jQuery соответствует синтаксису CSS, который дополнен некоторыми нестандартными методами.
В качестве результата данная функция возвращает набор найденных элементов в формате объекта jQuery.
Узнать количество выбранных элементов можно с помощью свойства length :
Если length возвращает 0, то значит, что объект jQuery «пустой», т.е. он не содержит искомых элементов (они не были найдены).
Это означает, что вы не можете напрямую применить какие-либо «родные» свойства и методы JavaScript для работы с элементами к объекту jQuery. И наоборот, применить свойства и методы jQuery непосредственно к DOM-элементам.
Например, с помощью jQuery получим элемент и изменим ему цвет фона:
На чистом JavaScript эти действия записываются так:
Но, чтобы применить родные свойства и методы JavaScript к элементу, обёрнутому в объект jQuery, необходимо в этом случае обратиться непосредственно к этому элементу:
Также, если вы хотите использовать свойства и методы jQuery для DOM-элементов их следует обернуть в объект jQuery. Выполняется это следующим образом:
Базовые селекторы
Основные CSS селекторы, которые используются для выборки элементов в jQuery:
Примеры
1. Найдём все элементы с классом btn :
2. Выберем элемент с id=»carousel» :
3. Выполним поиск всех элементов с тегом :
4. Выберем все элементы на странице:
5. Выполним поиск элементов с классом nav или menu :
6. Найдём элементы с тегом и классом menu :
Селекторы атрибутов
CSS селекторы для идентификации элементов по их атрибутам::
Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:
Селектор [attr!=»value»] не является стандартным CSS селектором. Это расширение jQuery. При его использовании снижается производительность, поэтому в выборке не рекомендуется его использовать. Вместо него предпочтительнее использовать следующую конструкцию:
Примеры
1. Выберем изображения с атрибутом alt :
2. Найдём элементы с атрибутом type=»button» :
3. Выполним поиск с классом btn и атрибутом href начинающимся со строки « http: ».
4. Выполним поиск всех
Селекторы отношений
В документы каждый элемент связан определёнными отношениями с другими элементами.
В CSS имеется 4 селектора отношений ( A и B – это селекторы):
Примеры
Управление контекстом
По умолчанию поиск элементов осуществляется во всём документе. Но при необходимости вы можете его ограничить, определив контекст поиска.
Контекст представляет собой элемент, в рамках которого следует производить выборку элементов.
Контекст передаётся во второй аргумент функции jQuery. Задавать его можно с помощью селектора, DOM-элемента или набора jQuery.
Например, найдём элементы с классом active в контексте элемента с id=»#list» :
Задачи
jQuery in Action. Глава 2
Как я и обещал, вторая глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Как и из первой главы, выбрал все самое вкусное и интересное 😉
Напоминаю, что первую главу можно прочесть здесь.
Глава 2. Создание наборов вложенных элементов.
2.1 Выборка элементов.
2.1.1 Использование CSS селекторов.
В jQuery используются стандартные CSS-селекторы. Вы наверняка с ними знакомы. Вот несколько примеров, чтобы освежить знания:
2.1.2 Селекторы по атрибутам, детей и контейнеров.
Это более продвинутые селекторы, используемые для выбора дочерних элементов, элементов, следующих за другими элементами DOM и элементов с атрибутами, удовлетворяющими определенным условиям.
Если ссылка будет вложенной в какой-то промежуточный элемент, она выбрана не будет.
Разберем селекторы по атрибутам (attribute selectors).
Например, мы хотим выбрать все ссылки, указывающие на сторонние ресурсы нашего сайта. Делается это так:
Другой вариант селектора по атрибутам:
Для того, чтобы выбрать определенное значение атрибута, составляем следующее выражение:
Думаю, тут все понятно.
Следующий пример использует уже знакомый нам поиск в начале строки, только теперь применим его для поиска значения атрибута:
Таким образом мы выберем все
А как насчет поиска в конце строки? Смотрим:
C помощью этого селектора мы выберем все ссылки на PDF файлы.
Чтобы искать значение в любом месте строки делаем следующее:
Догадались? Это будут любые ссылки на сайт jquery.com.
Следующий вид селектора – это селектор контейнеров (container selector):
Следующий вариант работать уже не будет:
Ниже таблица основных CSS селекторов, поддерживаемых jQuery.
| Селектор | Описание |
|---|---|
| * | Все элементы |
| Е | Все элементы Е |
| E F | Все элементы F следующие за E |
| E>F | Все элементы F, непосредственно дочерние для E |
| E+F | Все элементы F, непосредственно предшествующие перед E, причем F и E братья. |
| E F | Все элементы F, предшествующие перед E, причем F и E братья. |
| E:has(F) | Все элементы E, имеющие хотя бы один дочерний элемент F |
| E.C | Все элементы E класса С. Для выбора всех элементов класса С используйте селектор *.С |
| E#I | Все элементы E с идентификатором I. Для выбора всех элементов с идентификатором I используйте селектор *#I |
| E[A] | Все элементы E с атрибутом A произвольного значения |
| E[A=V] | Все элементы E с атрибутом A равным V |
| E[A^=V] | Все элементы E с атрибутом A, значение которого начинается на V |
| E[A$=V] | Все элементы E с атрибутом A, значение которого оканчивается на V |
| E[A*=V] | Все элементы E с атрибутом A, значение которого содержит V |
2.1.3 Выбор по позиции.
Иногда необходимо выбрать элементы по их позиции относительно других элементов на странице. В jQuery это предусмотрено.
Так будут выбран первый элемент на странице.
Такой селектор выберет все нечетные элементы на странице. Другой вариант:
Пример:
| Номер элемента | n | 5n | 5n+2 |
|---|---|---|---|
| 0 | n/a | n/a | |
| 1 | + | ||
| 2 | + | + | |
| 3 | + | ||
| 4 | + | ||
| 5 | + | + | |
| 6 | + | ||
| 7 | + | + | |
| 8 | + | ||
| 9 | + | ||
| 10 | + | + | |
| 11 | + | ||
| 12 | + | + |
2.1.4 Использование специальных селекторов jQuery
Для инверсии фильтра используется указанный в таблице фильтр :not :
Обратите внимание, что
div p:not(:hidden) – правильно
div :not(p:hidden) – не правильно.
2.2 Создание HTML.
Если мы хотим создать пустой элемент
, это можно сделать короче:
При этом таким укороченным способом нельзя создавать полноценные элементы
jQuery для начинающих. Часть 4. Селекторы
Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM’е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…
Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)
Селекторы в jQuery базируются на CSS селекторах, а так же поддерживают XPath. Дабы не закапываться в документацию буду приводить примеры, много примеров. Но начнем с самых азов…
Для начала нам понадобиться макет HTML странички (вполне типичный макет):
div id = «header» >
h1 > a href = «/» title = «homepage» > Title / a > / h1 >
h2 > Sub-title span > small description / span > / h2 >
/ div >
div id = «wrapper» >
div id = «content» >
div class = «post» >
h3 > Post Title / h3 >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span > Image Title / span >
img src = «/image1.jpg» alt = «Image Alt Text» / >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span class = «inner-banner» > Banner Text / span >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
/ div >
span id = «banner» > img src = «/banner1.jpg» alt = «Big Banner» / > / span >
div class = «post» >
h3 > Post Title / h3 >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span > Image Title / span >
img src = «/image2.jpg» alt = «Image Alt Text» / >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span class = «inner-banner» > Banner Text / span >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
/ div >
/ div >
/ div >
div id = «sidebar» >
ul >
li > a href = «/item0.html» > Menu Item 0 / a > / li >
li > a href = «/item1.html» > Menu Item 1 / a > / li >
li > a href = «/item2.html» > Menu Item 2 / a > / li >
li > a href = «/item3.html» > Menu Item 3 / a > / li >
/ ul >
/ div >
div id = «footer» >
Copyright © 2008
/ div >
А теперь приступим к выборкам:
Выбор элементов по Id либо ClassName аналогично используемому в CSS
$ ( ‘#sidebar’ ) ; // выбор элемента с id = sidebar
$ ( ‘.post’ ) ; // выбор элементов с class = post
$ ( ‘div#sidebar’ ) ; // выбор элемента div с id = sidebar
$ ( ‘div.post’ ) ; // выбор элементов div с class = post
Примечание: используйте валидные имена классов и id
Бродим по иерархии объектов в DOM’е
Простой выбор потомков:
$ ( ‘div span’ ) ; // выбор всех span элементов в элементах div
Аналогичный результат так же можно получить используя следующую конструкцию:
Выбор только непосредственных потомков
$ ( ‘div > span’ ) ; // выбор всех span элементов в элементах div, где span является прямым потомком div’a
Как же лучше поступить, что работает быстрее? Надо бы протестировать…
Так же селекторы можно группировать:
$ ( ‘div, span’ ) ; // выбор всех div и span элементов
$ ( ‘span + img’ ) ; // выбор всех img элементов перед которыми идут span элементы
$ ( ‘span
Выбор всех элементов, всех предков, всех потомков
Фильтры
$ ( ‘div:first’ ) ; // выбираем первый div в доме
$ ( ‘div:last’ ) ; // выбираем последний div в доме
$ ( ‘div:not(.red)’ ) ; // выбираем div’ы у которых нету класса red
$ ( ‘div:even’ ) ; // выбираем четные div’ы
$ ( ‘div:odd’ ) ; // выбираем нечетные div’ы
$ ( ‘div:eq(N)’ ) ; // выбираем div идущим под номером N в DOMe
$ ( ‘div:gt(N)’ ) ; // выбираем div’ы, индекс которых больше чем N в DOMe
$ ( ‘div:lt(N)’ ) ; // выбираем div’ы, индекс которых меньше чем N в DOMe
$ ( ‘:header’ ) ; // выбо заголовоков h1, h2, h3 и т.д.
$ ( ‘div:animated’ ) ; // выбор элементов с активной анимацией
Фильтры по контенту и видимости:
Так же есть фильтры по атрибутам:
$ ( «div[id]» ) ; // выбор всех div с атрибутом id
$ ( «div[title=’my’]» ) ; // выбор всех div с атрибутом title=my
$ ( «div[title!=’my’]» ) ; // выбор всех div с атрибутом title не равного my
$ ( «div[title^=’my’]» ) ; // выбор всех div с атрибутом title начинающихся с my
//
так же стоит отдельно отметить следующий фильтр:
=’external’]» ) ; // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом
В результате его работы будут выбраны следующие теги:
a href = «» rel = «external» > link / a > — да
a href = «» rel = «nofollow external» > link / a > — да
a href = «» rel = «external nofollow» > link / a > — да
a href = «» rel = «friend external follow» > link / a > — да
a href = «» rel = «external-link» > link / a > — нет
Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров — enabled/disabled/selected/checked:
$ ( «:text» ) ; // выбор всех input элементов с типом =text
$ ( «:radio» ) ; // выбор всех input элементов с типом =radio
// и так далее
$ ( «input:enabled» ) ; // выбор всех включенных элементов input
$ ( «input:checked» ) ; // выбор всех отмеченных чекбоксов
Фильтры так же можно группировать:
$ ( «div[name=city]:visible:has(p)» ) ; // выбор видимого div’a с именем city, который содержит тег p
Приведу так же ряд полезных селекторов для работы с элементами форм:
Если Вам хочеться опробывать как это все работает — то для этого можете воспользоваться тестовой страничкой
Слайды
Как-то слишком много текста получилось, пожалуй пора показывать слайды 😉
