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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Выбор элементов страницы

Выбор элементов страницы

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

Например:

<p clacc = "copyright">Copyright 2016</p>

C помощью библиотеки jQuery вы выбираете один или более элементов, используя специальную команду объект jQuery.

Основной синтаксис будет такой:

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

Практически использовать можно все селлекторы CSS 2.1 и многие селлекторы CSS 3.

Рассмотрим небольшой пример использования jQuery. Добавим одному из элементов страницы селектор CSS #banner и посмотрим, что из этого получится.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#banner").html("<h1>JavaScript тут был!</h1>");
});
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Выбор элементов страницы</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').html('<h1>JavaScript тут был!</h1>');
});
</script>
</head>

<body>
<div id="banner"></div>
</body>
</html>
Выбор элементов по идентификатору

Основные селлекторы CSS, такие как индефикаторы классов и элементов образуют ядро CSS.

Вы должны были заметить, что строка, передаваемая функции jQuery, имеет тот же формат, что и CSS-селектор id. Поскольку идентификаторы id должны быть уникальными, мы ожидаем, что в результате будет возвращен только один элемент. Отныне jQuery будет располагать ссылкой на этот элемент.

Для выбора элемента по типу идентификатора, атрибуту id в синтаксисе CSS, необходимо указать в качестве селектора значение id, предварив его символом "решетки" (#):

#id

Для тестирования и изучения основных операция jQuery, создадим файл с приведенным ниже исходным кодом.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Тестирование jQuery</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>

Откроем созданный документ в веб-браузере Google. Щелкним правой кнопкой мыши по полю документа и открывшемся меню выберем пункт "Просмотреть код".

Перед нами откроется вот такой вид страницы.

Консоль Google

Выберем в горизонтальном меню пункт "Console".

C помощью команды $("#bar"); найдем все элементы с идентификатором #bar.

Консоль Google

После того, как введен код, нажмите клавишу Enter и увидите вот такой результат:

Консоль Google - результат

Полученный результат говорит о том, что в нашем документе имеется только один элемент с идентификатором #bar, а именно p.

Выбор дескрипторов по имени класса

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

.class

Выбор всех элементов с классом .foo осуществляется с помощью следующей команды:

$(".foo");

В консоли отобразится следующий результат:

Консоль Google - результат выбора class foo

Выбор элементов по типу дескриптора

Для выбора элементов по типу дескриптора достаточно указать в качестве селектора имя этого дескриптора, например p, div, span:

элемент

Чтобы выбрать все абзацы <p> введем следующую команду:

#("p");

В консоли отобразится следующий результат:

Консоль Google - результат выбора дескриптора

Уточненный выбор элементов с помощью комбинированных селекторов

Бываю ситуации, когда требуется выделить лишь дескрипторы определенного типа с заданным классом. Это можно сделать, использовав в селекторе сочетание типа дескриптора и класса.

Введем в консоль следующую команду, отбирающую образцы только с классом foo.

$("p.foo");

Между дескриптором и классом в коде не должно быть пробела.

Как видим из приведенного ниже результата элемент span не был отобран, хотя и имеет класс foo.

Уточненный выбор элементов с помощью комбинированных селекторов

Групповые селекторы

В тех случаях, когда необходимо получить доступ к нескольким наборам элементов, используются групповые селекторы. Например, чтобы отобрать образцы класса foo и все элементы, которые имеют идентификатор #bar, будем использовать следующую команду:

$("p.foo,#bar");

Эта команда возвратит элементы, соответствующие хотя бы одному из указанных в ней селекторов.

Групповые селекторы

Иерархические селекторы

Иногда возможностей выбора объектов DOM на основании типа элемента, класса или идентификатора, является недостаточным. В частности нам может потребоваться доступ к элементам, которые находятся внутри заданного элемента, соседствуют с ним или располагаются после него в другом месте документа. Например, такая задача возникает, если необходимо удалить определенный активный класс из всех пунктов меню, кроме одного, на котором был выполнен щелчек, извлечь все списочные элементы из выбранного неупорядочного списка или изменить атрибуты элемента-оболочки при выборе элемента формы.

Выбор элементов-потомков

Выбор потомков, т.е. элементов, которые содержатся внутри других элементов, называемых предками, осуществляется с помощью конструкции, включающей в себя селектор предка (ancestor), пробел и селектор потомка(descendant):

предок потомок

Чтобы выбрать все элементы span, являющиеся потомками элемента body, выполним в консоли следующую команду:

$("body span");

Эта команда возвратит все элементы span, содержащиеся в теле документа, хотя при этом они находятся еще и внутри дескрипторов абзацев.

Выбор элементов-потомков

Выбор дочерних элементов

Селектор дочерних элементов осуществляет более специфический отбор элементов по сравнению с селектором потомков. Он отбирает лишь элементы, являющиеся непосредственными потомками элементов-предков (родитетелей). Для выбора дочернего элемента используется конструкция, включающая в себя селектор родительского элемента (parent), символ "больше" (>) и селектор дочернего элемента (child):

родительский>дочерний

Попробуем выбрать в текстовом файле все элементы span, являющиеся непосредственными потомками элемента body:

$("body>span");

Поскольку не существует ни одного элемента spsn? который содержался бы непосредственно в элементе body, вывод окажется пустым.

Выбор дочерних элементов

Отберем все элементы span, являющиеся непосредственными потомками элементов p:

$("p>span");

Соответствующий вывод будет следующий:

Выбор дочерних элементов

Выбор следующего элемента

Иногда в сценарии может потребоваться выбрать следующий элемент в DOM структуре. Конструкция такогоселектора включает в себя указание элемента, определенного как начальный (здесь можно использовать любой селектор шаблонов), знак "плюс"(+) и селектор, выбирающий элемент, определенный как следующий:

начальный+следующий

Проверим, как это работает, введя следующую команду:

$(".foo+p");

Так как в нашем документе есть только один элемент с классом foo, будет возвращен лишь один элемент абзаца.

Выбор следующего элемента

Далее создадим более общий запрос и выбирем абзацы, каждый из которых следует непосредственно за каким либо абзацем:

$("p+p");

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

Выбор следующего элемента

Выбор сестринских элементов

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

Для выбора сестренских элементов необходимо указать селектор начального элемента, символ "тильды" (~) и селектор сестринских элементов:

начальный~сестринский

Чтобы найти все элементы, являющиеся сестринскими по отношению к абзацу с классом foo, выполним следующую команду:

$(".foo~p");

Результат будет таким.

Выбор сестринских элементов

Селекторы jQuery
Таблица. Все возможные варианты использования селекторов перечислены в таблице ниже:
Пример Описание
$('*') Будут выбраны все элементы присутствующие на странице.
$("#el1") Будет выбран элемент с id=el1.
$(".el1") Будут выбраны все элементы на странице с class=el1.
$("div") Будут выбраны все элементы div на странице.
$("div, #el1, .el1") Будут выбраны все элементы div, элемент с id="el1" и все элементы с class="el1" на странице.
$("div.el1") Будут выбраны все элементы div на странице атрибут class которых равен el1.
$("p > div") Будут выбраны все элементы потомки div родительского элемента p.
$("[src]") Будут выбраны все элементы на странице имеющие атрибут src.
$("[src='wisdomweb.gif']") Будут выбраны все элементы на странице со значениями атрибута src="wisdomweb.gif".
$("[src!='wisdomweb.gif']") Будут выбраны все элементы на странице со значениями атрибута src не равными "wisdomweb.gif".
$("[src^='wisdomweb']") Будут выбраны все элементы на странице со значениями атрибута src начинающимися на wisdomweb (например wisdomweb.ru, wisdomweb.gif и т.д.).
$("[src$='.gif']") Будут выбраны все элементы на странице со значениями атрибута src заканчивающимися на .gif.
$("[src*='wisdomweb']") Будут выбраны все элементы на странице со значениями атрибута src содержащими wisdomweb.
$(":input") Будут выбраны все элементы input на странице.
$(":button") Будут выбраны все элементы input на странице с атрибутом type=button.
$(":text") Будут выбраны все элементы input на странице с атрибутом type=text.
$(":password") Будут выбраны все элементы input на странице с атрибутом type=password.
$(":radio") Будут выбраны все элементы input на странице с атрибутом type=radio.
$(":checkbox") Будут выбраны все элементы input на странице с атрибутом type=checkbox.
$(":reset") Будут выбраны все элементы input на странице с атрибутом type=reset.
$(":image") Будут выбраны все элементы input на странице с атрибутом type=image.
$(":file") Будут выбраны все элементы input на странице с атрибутом type=file.
$("div:first") Будет выбран первый div элемент на странице.
$("div:last") Будет выбран последний div элемент на странице.
$("li:even") Будут выбраны все элементы списка с четными индексами. Так как нумерация индексов элементов начинается с 0, то по сути будут выбраны нечетные элементы т.е. 1й, 3й, 5й элементы списка и т.д.
$("li:odd") Будет выбраны все элементы с нечетными индексами. Так как нумерация индексов элементов начинается с 0, то по сути будут выбраны четные элементы т.е. 2й, 4й, 6й элементы списка и т.д.
$("li:eq(3)") Будет выбран 4 элемент списка (нумерация элементов в списке начинается с нуля).
$("li:gt(1)") Будет выбраны все элементы списка индекс которых больше 1 (т.е. все элементы списка начиная с 3 элемента).
$("li:lt(2)") Будет выбраны все элементы списка индекс которых меньше 2 (т.е. первые 2 элемента списка).
$(":header") Будет выбраны все элементы на странице являющиеся заголовками (т.е. элементы h1, h2, h5 и т.д.).
$(":animated") Будет выбраны все анимированные элементы, которые находятся на странице.
$(":contains('wisdomweb')") Будет выбраны все элементы содержащие строку wisdomweb.
$(":empty") Будет выбраны все элементы не имеющие узлов потомков.
$(":hidden") Будет выбраны все скрытые элементы на странице.
$(":visible") Будет выбраны все видимые элементы находящиеся на странице.