• Страница 1 из 1
  • 1
Форум » II. jQuery » Базовое знакомство с jQuery » Выбор элементов страницы: подход jQuery (jQuery и CSS-селекторы)
Выбор элементов страницы: подход jQuery
1 С помощью jQuery можно выбирать один или более элементов с помощью специальной команды объект jQuery.
Основной синтаксис такой:

Код
$('селектор')


Селекторы идентификаторов

Можно выбрать любой элемент страницы, имеющий идентификатор, используя jQuery и CSS-селектор идентификатора.

К примеру, нужно выбрать элемент с id = 'banner':

Код
$('#banner')


или, допустим, есть такой HTML-код:

Код
<p id = "message">Специальное сообщение</p>


выбираем элемент по его идентификатору и, к примеру, сохраняем его в переменную:

Код
var messagePara = $('#message');


Селекторы элементов

Полный список селекторов, поддерживаемых библиотекой jQuery можно посмотреть здесь.

Например, чтобы выбрать все элементы 'a' на странице:

Код
var linkList = $('a');


Селекторы классов

Например, чтобы выбрать все элементы с определённым именем класса, например, все элементы с классом 'button':

Код
$('.button')

Изменить / Удалить

2 Специальные селекторы

Селекторы потомков - позволяют указывать на элемент, который находится внутри другого элемента

Как работает? Например, у вас есть неупорядоченный список с идентификатором 'menu' на странице:

Код
<ul id = "menu">
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>


Вам нужно выбрать все элементы 'a' только этого списка.
Команда:

Код
$('a')


в данном случае не годится, поскольку выберет абсолютно все элементы 'a' страницы. А поможет нам в этом как раз селектор вложенности:

Код
$('#menu a')


Дочерние селекторы - указывают на элемент, являющийся прямым потомком другого элемента.

Например, в коде страницы:

Код
<body class = "home">
<h1 id="header">Заголовок</h1>
<р>Какой-нибудь <strong>вaжный</strong> текст</р>
</body>
</html>


элементы h1 и p являются дочерними элементами по отношению к элементу body, а вот элемент strong нет.

Чтобы создать дочерний селектор, указываем родительский элемент, а потом через угловую скобку дочерний, например:

Код
$('body > p')


Cоседние родственные селекторы - позволяют выбрать элемент, идущий сразу после другого элемента
Например, в коде страницы есть заголовок и сразу после него блок:

Код
<h1>Заголовок статьи</h1>
<div>Здесь какой-то текст</div>


чтобы создать родственный селектор, добавляем знак '+' между селекторами:

Код
$('h1 + div')


будет выбран селектор справа(div), но только если в коде он идёт после селектора, указанного слева(h1).

Изменить / Удалить

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

Селекторы атрибута позволяют выбирать элементы в зависимости от того, есть ли у селектора определённый атрибут, или даже определённое значение атрибута.

Селектор атрибута добавляется после имени элемента, чей атрибут вы проверяете. Например:

Код
$('img[alt]')


найдёт все элементы img, имеющие атрибут alt.

Рассмотрим различные селекторы атрибута:

[attribute] - выбирает элементы, имеющие указанные в HTML-коде атрибуты.
Например:

Код
$('a[href]')


найдёт все элементы a, имеющие набор атрибутов href.

[attribute ="value"] - выбирает элементы с определённым атрибутом и конкретным значением.
Например:

Код
$('input[type = "text"]')


найдёт все текстовые поля в форме

[attribute^ ="value"] - находит все элементы, у которых атрибут начинается с определённого значения, например:

Код
$('a[href^ = "http://"]')


или еще пример:

Код
$('a[href^ = "mailto:"]')


[attribute$ ="value"] - находит все элементы, у которых атрибут заканчивается определённым значением, например:

Код
$('a[href$ = ".pdf"]')


выберет все ссылки на pdf-файлы.

[attribute* ="value"] - выберет все элементы с атрибутом, в любом месте которого содержится определённое значение.
Например, можно найти любые ссылки, ведущие на сайт yandex.ru:

Код
$('a[href* = "yandex.ru"]')


найдёт все ссылки вида: http://yandex.ru, http://www.yandex.ru, www.yandex.ru/news.html и т.д.

Изменить / Удалить

Форум » II. jQuery » Базовое знакомство с jQuery » Выбор элементов страницы: подход jQuery (jQuery и CSS-селекторы)
  • Страница 1 из 1
  • 1
Поиск: