• Страница 1 из 1
  • 1
Модератор форума: webik  
Форум » JavaScript и jQuery » jQuery » Знакомство с jQuery » Выборки элементов (Выбор элементов страницы с помощью jQuery)
Выборки элементов
webikДата: Пт, 29.03.2019, 11:38 | Сообщение # 1
Offline
Ранее мы познакомились с методами выбора элементов страницы с помощью языка JavaScript. Настал черёд jQuery.
Библиотека jQuery предлагает выбор и работу с элементами страницы на основе CSS-селекторов - инструкций, которые сообщают браузеру к какому элементу применяется конкретный стиль.

Например, h1 - это селектор, определяющий стиль для каждого элемента h1
.main - это селектор класса, определяющий стиль любого элемента с классом main

Библиотека jQuery даёт возможность выбора одного или нескольких элементов используя команду объект jQuery. Её основной синтаксис:
Код
$('селектор')


Например, чтобы выбрать элемент с идентификатором id="main":

Код
$('#main');


здесь #main - это селектор CSS, который используется для оформления элемента с идентификатором main

Ну и, после того, как вы выбрали какой-то элемент, после этого с ним можно что-то делать.
 
профиль цитата изменить удалить
webikДата: Пт, 29.03.2019, 11:52 | Сообщение # 2
Offline
Селекторы идентификаторов

Вы можете выбрать любой элемент страницы, имеющий идентификатор. Например, есть блок с id = 'message':

Код
<div id="message">Здесь какое-то содержимое</div>


Выбрать этот элемент можно так:

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


В отличие от метода DOM, в скобках мы должны указывать символ решётки для идентификатора!
 
профиль цитата изменить удалить
webikДата: Пт, 29.03.2019, 12:05 | Сообщение # 3
Offline
Селекторы элементов

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

Для сравнения рассмотрим выборку всех элементов a на странице сайта с помощью метода DOM и с помощью библиотеки jQuery.

Метод DOM:

Код
var linksList = document.getElementsByTagName('a');


Тоже на jQuery:

Код
var linksList = $('a');
 
профиль цитата изменить удалить
webikДата: Пт, 29.03.2019, 13:17 | Сообщение # 4
Offline
Селекторы классов

IE 8 и более ранние версии не поддерживают метод DOM выборки элементов по классу, поэтому в данном случае выборка по jQuery спасёт ситуацию, например:

Код
$('.submenu');


выберет все элементы с классом submenu. Опять же обращаю внимание, что необходимо перед именем класса ставить точку, в то время как по методу DOM перед именем класса точка не ставится:

Код
document.getElementsByClassName('submenu');
 
профиль цитата изменить удалить
webikДата: Пт, 29.03.2019, 14:37 | Сообщение # 5
Offline
Специальные селекторы

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

Например, есть список с id = "navBar":

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


если выборка производится таким образом:

Код
$('a');


то выберутся все элементы a на странице, нам же нужно выбрать только элементы a списка с id="navBar", тогда это делается так:

Код
$('#navBar a');


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



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

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

Например, для элемента p, являющегося дочерним к body:

Код
$('body > p');
Прикрепления: 6590987.jpg(139.4 Kb)
 
профиль цитата изменить удалить
webikДата: Пт, 29.03.2019, 22:33 | Сообщение # 6
Offline
- Соседние родственные селекторы - позволяют выбрать элемент, который идёт сразу за другим элементом.

Допустим,в коде страницы есть заголовок h2, а сразу за ним в коде присутствует блок div. Тогда этот блок можно выбрать так:

Код
$('h2 + div');


Селектор справа будет выбран, но только если он идёт в кода сразу после селектора, указанного слева.
 
профиль цитата изменить удалить
webikДата: Пт, 29.03.2019, 22:57 | Сообщение # 7
Offline
- Селекторы атрибута - позволяют выбирать элементы у селектора которых есть определённый атрибут, и даже атрибут с определённым значением.

Например, можно найти все элементы, у которых есть атрибут alt, или элементы, атрибут alt которых имеет определённое текстовое значение.

Чтобы найти элементы, имеющие атрибут alt, делаем следующее:

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


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

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


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

[attribute = "value"] выбирает элементы, атрибуты которых имеют конкретное значение, например:

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


данный код найдёт все окна с текстом в формах.

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

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


этот код найдёт все элементы типа http://www.google.com, http://www.yahoo.com и т.д.

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


выберет все ссылки mailto.

[attribute$ = "value"] найдёт все ссылки, атрибут которых заканчивается определённым значением. Например, очень удобно использовать для файловых расширений:

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


[attribute* = "value"] выберет все элементы, в атрибуте которых в любом место содержится конкретное значение. К примеру, можно найти любые ссылки на конкретный домен:

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


данный код найдёт ссылки не только типа http://www.eksmo.ru, но и http://eksmo.ru, www.eksmo.ru/library.html
 
профиль цитата изменить удалить
Форум » JavaScript и jQuery » jQuery » Знакомство с jQuery » Выборки элементов (Выбор элементов страницы с помощью jQuery)
  • Страница 1 из 1
  • 1
Поиск: