Jquery выбор элементов с неполным названием. JavaScript селекторы. Несколько очень важных моментов

JQuery селекторы являются одним из наиболее важных частей библиотеки JQuery.

JQuery селекторы

JQuery селекторы позволяют выбирать и манипулировать HTML-элемент (ы).

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

Все селекторы в JQuery начинаются с знака доллара и скобки: $ ().

Элемент выбора

Селектор JQuery элемент выбирает элементы на основе имени элемента.

Вы можете выбрать все элементы

На странице, как это:

пример

Когда пользователь нажимает на кнопку, все

Элементы будут скрыты:

#id Selector

Селектор #id JQuery использует атрибут идентификатор HTML-тега, чтобы найти определенный элемент.

Идентификатор должен быть уникальным в пределах страницы, так что вы должны использовать селектор #ID, если вы хотите, чтобы найти единственный, уникальный элемент.

Чтобы найти элемент с определенным идентификатором, написать хэш-символ, за которым следует идентификатор HTML-элемента:

пример

Когда пользователь нажимает на кнопку, элемент с идентификатором = "тест" будут скрыты:

.class Selector

Селектор класса Jquery находит элементы с определенным классом.

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

пример

Когда пользователь нажимает на кнопку, элементы с классом = "тест" будут скрыты:

Другие примеры JQuery селекторыSyntax Description Example elements elements

$("*")	Selects all elements	Try it
$(this)	Selects the current HTML element	Try it
$("p.intro")	Selects all Elements with class="intro"	Try it
$("p:first")	Selects the first Element	Try it
$("ul li:first")	Selects the first element of the first	Try it
$("ul li:first-child")	Selects the first element of every	Try it
$("")	Selects all elements with an href attribute	Try it
$("a")	Selects all elements with a target attribute value equal to "_blank"	Try it
$("a")	Selects all elements with a target attribute value NOT equal to "_blank"	Try it
$(":button")	Selects all elements and elements of type="button"	Try it
$("tr:even")	Selects all even
Try it
$("tr:odd")	Selects all odd
Try it

Функции в отдельном файле

Если ваш сайт содержит много страниц, и вы хотите, чтобы ваши функции Jquery будет легко поддерживать, вы можете поместить свои функции JQuery в отдельный файл.js.

В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.

Структура кода jQuery Знак доллара $ - обозначает использование jQuery , selector - элемент DOM с которым работаем и специальная функция jQuery с её параметрами (например, анимация, развёртывание, перемещение и тд).

Пример jQuery кода

$(selector).function(parameters);

Селекторы в jQuery В данном уроке мы остановимся подробно на вопросе селекторов. Что же это такое?

Селектор (от англ. select - выбирать) - это элементы DOM (объектной модели документа, например, теги или специально размеченные блоки), к которым мы обращаемся с запросом. Данное понятие существует и в JavaScript, и в CSS, и других языках, где нужно выбрать конкретный элемент и поработать с его свойствами.

Идентификаторы (id).

Если Вы хотите поработать с конкретным элементом, и только один раз (в теории, так как на практике некоторые браузеры не побрезгуют повторным использованием идентификатора), то присваиваем ему уникальный id.

Код HTML

#id - выбирает единственный элемент с переданным идентификатором (id). В данном случае special

Код jQuery

$("#special").css("border", "1px solid black");

В дальнейшем буду писать без тегов , надеюсь понятно, что JavaScript надо заключать именно в них. В примере мы выбираем элемент с id special , в данном случае это div. В нём мы используем функцию css и создаём чёрную непрерывную (solid) границу (border) в 1 пиксель.

Классы (class).

.class - выбираем все элементы с указанным классом. Всё правильно, их может быть несколько. Главное, чтобы название класса было одинаковым.

Код HTML

Первый блок
Второй блок
Как видите, элемента (div) два и классы у них одинаковые.

Код jQuery

$(".spec_class").css("border", "1px solid red");
У всех элементов, где значение класса spec_class также создаются такие же границы, как и в прошлом примере, но уже красные.

Элементы (elements).

Выбираются все элемента определённого типа. Это либо body , либо все div , либо все table и так далее.

Код jQuery

$("div").css("border", "1px solid green");
У всех div появится зелёная рамка.

* (все элементы) - выбираем абсолютно все элементы. Даже head и body .

Код jQuery

$("*").css("border", "1px solid blue");
У всех элементов Вашего документа появится синяя рамка.

$("*", document.body).css("border", "2px solid black");
Выбираем все элементы в body и делаем им чёрную границу в 2 пикселя.

По типу: selector1, selector2, ..., selectorN - перечисляем все элементы. Ниже интересный пример совместного использования селекторов.

Код jQuery

$("div, span, p.spec_class").css("border", "1px solid red");
Выбирает все элементы div, span и p, у которых указан класс spec_class. Все селекторы просто указывается через запятую.

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

Выбирается главный элемент (родительский элемент) и элементы включённые в него (потомки). Рассмотрим на примере ниже родителя form и потомков select .

Код jQuery

$("form select").css("border", "1px dashed black");
У всех элементов select, потомков form будет установлена чёрная пунктирная граница.

parent - child

Теперь выберем всех потомков родителького элемента.

Код jQuery

$("#id > *").css("border", "1px double black");
В начале выбираем всех наследников элемента с идентификатором id , а потом создаём им двойную границу чёрного цвета.

prev и next (предыдущий и следующий)

Указываем элементы, идущие следующими (next) за элементом, обозначенным в качестве предыдущего (prev).

Код jQuery

$("label + input").css("color", "blue").val("Готово!");
Выбираем элементы input, идущие за label. Устанавливаем им свойства CSS - цвет в форме чёрного цвета, а значение (.val) установлено Готово!

prev ~ siblings

Теперь работаем с сестринскими элементами. Выюираем всех сестёр, следующих за предыдущим элементом (prev).

Код jQuery

$("#prev ~ div").css("border", "3px groove blue");
Ищем все элементы div, которые являются сестринскими по отношению друг к другу и следуют сразу за элементом с идентификатором #prev. Обратите внимание, что в примере не будут отобраны элементы span, поскольку отбор идет только для элементов div.

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

Будет выбран первый элемент с указанным селектором.

Код jQuery

$("tr:first").css("font-style", "bold");
В первой строке (tr) в таблице текст будет выделен полужирным (bold).

Теперь будем выбирать последний элемент с указанным селектором.

Код jQuery

$("tr:last").css({backgroundColor: "yellow",fontWeight: "bolder"});
Находим последнюю строчку (tr) в таблице и красим фон в жёлтый цвет и также устанавливаем жирный шрифт (bolder).

:not(selector)

Используя отрицание отфильтровывает элементы. Выбираем все input, в которых не стоит флажка (checkbox), а также span, следующие за ними

Код jQuery

$("input:not(:checked) + span").css("background-color", "yellow");
Значение чекбоксов при этом не меняется.

Внимание! Интересный пример , который применяет каждый второй в своей практике. Как выбрать чётный или нечётный элементы? Нужно затем, чтобы строки в тексте или даже коде делать читаемыми. Стартовое значение 0.

Код jQuery

$("tr:even").css("background-color", "#с1с1с1");
Отбираем чётные строки в таблице. Выделена будет первая, третья и тд строки. Внимание! Отсчёт идёт по индексам, а в них первая строка имеет значение 0. Далее отбираются строки с индексами 0, 2, 4 и т.д.).

Теперь выбираем нечётные элементы. Считается значение индекса, начиная с 0. Соответственно будут выбраны значения 1,3,5,7 и тд. Это соответствует 2,4,6 и тд строчкам, так как их отсчёт идёт по факту, с первой.

Код jQuery

$("tr:odd").css("background-color", "#с1с1с1");
Фон нечётных строк окрашиваем в серый.

:eq(index)

Выбираем конкретный индекс элемента. В примере покрасим только одну строку таблицы.

Код jQuery

$("td:eq(2)").css("color", "blue");
Выбираем по индексу элемент 2. Напоминаю, это будет 3-я строка, так как тэо будет третий по счёт индекс (0,1,2).

:gt(index)

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

Код jQuery

$("td:gt(4)").css("text-decoration", "line-through");
Выбираем строки в таблице, индекс элемента которых больше 4, то есть их индекс равен 5,6 и тд. Это соответствует 6, 7 и тд встречающимся элементам, в нашем случае строкам таблицы.

:lt(index)

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

Код jQuery

$("td:lt(3)").css("color", "red");
Выбираются все элементы td с индексом мНапример ищем все элементы TD, с индексом меньше 3. Поскольку отсчёт, ещё раз напоминаю, ведётся с нуля, то это строки таблицы (td) 1,2,3.

Будут выбраны все элементы, которые являются заголовками (h1,h2,h3 и тд)

Код jQuery

$(":header").css({ background:"#c1c1c1", color:"#0085cc" });
Для всех заголовков (элементов h) мы установим синий шрифт и светло-сервый фон.

:animated

Будут отобраны все элементы, являющиеся в тот момент анимированными.

Код HTML

Сделать первый div красным
Код jQuery

$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
Здесь пример немного посложнее. После клика по кнопке меняем цвет анимированного элемента (div). С не анимированными элементами изменений не происходит.

Рассмотрим простой пример работы селекторов в jQuery. Файл полностью готов к работе, достаточно просто скопировать код целиком в созданный html-файл. Бибилотека в примере подключается с сервера Google, поэтому для корректной работы файла потребуется подключение к интернету. Под кодом есть Демо-версия для просмотра.

jQuery

#polosa1{ position: relative; background:white; width: 200px; height: 50px; border-top: solid 1px #000; }
#polosa2{ position: relative; background:blue; width: 200px; height: 50px; }
#polosa3{ position: relative; background:red; width: 200px; height: 50px; border-bottom: solid 1px #000; }

Пример работы селекторов jQuery

Флаг Болгарии
Флаг Австрии
Флаг СССР

Демонстрация Скачать исходники
Спасибо за внимание! Удачи в начинаниях!

jQuery - это Javascript библиотека, которая упрощает работу с DOM, событиями, CSS и AJAX, а также позволяет легко создавать анимации. Главная особенность jQuery - это кроссбраузерность (да, и Internet Explorer 6 тоже:).Слоган jQuery звучит так: "Write less, do more", что в переводе на русский означает "Пиши меньше, делай больше" (или "Тише едешь - дальше будешь" :). Эти слова идеально подходят к описанию этой библиотеки и полностью себя оправдывают.

Первые шаги с jQuery

Для начала Вам понадобится скачать одноименную библиотеку. Сделать это можно на официальном сайте jQuery . После этого следует подключить jQuery к Вашей HTML страничке. Сделать это можно с помощью добавления тега script в head документа:

Подключаем jQuery

После этого Вы уже можете начинать использовать jQuery.

Селекторы в jQuery

Пришло время рассказать о селекторах. Селекторы в jQuery - это те же самые селекторы CSS, только модифицированные. Модифицированные они потому, что программисты jQuery добавили много полезных селекторов для удобного поиска нужных элементов.

Рассмотрим пример кода:

Пример 1

Параграф 1

Параграф 2

Параграф 3

// здесь будет ваш javascript код

Примеры получения каждого элемента документа:

$(document.body) - элемент body
$("div") - селектор возвращает все элементы div
$("p") или $("div p") - все параграфы p (3 штуки)
$("div > p") - возвращает параграфы, которые являются непосредственными дочерними нодами элемента div
$("p:first") - параграф №1
$("#pEl") или $("p#pEl") - возвратит параграф с идентификатором (id) "pEl"
$("p.second") - возратит параграф с классом "second"
$("p:eq(1)") - возвратит параграф с индексом 1 (индексы начинаются с 0, возвратится параграф №2)
$("p:last") - возвратит последний параграф
$("p.third#third") - возвратит параграф №3

Обратите внимание как легко найти нужный нам элемент. Забудьте про document.getElementById("id") и document.getElementsByTagName("p"), они нам больше не понадобятся.

Пример 2

Рассмотрим более сильные возможности jQuery. Для этого нарисуем таблицу

Хедер 1 Хедер 2

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4
Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8

Нажми меня

В этом примере я использовал селектор ":odd", который выбирает все нечетные элементы и применил его к рядкам таблицы (тегам tr). ":even" в свою очередь выбирает четные (0, 2, 4, ...).
И так нам надо выбрать все нечетные рядки таблицы, но мы не хотим чтобы первый рядок, который является хедером (элементы th) менял свой цвет и полосы начинались с третьего рядка. В этом случае нам пригодится селектор ":not(selector)". Используется он так:

$("table tr:not(:first):odd") - выбираем все четные элементы tr кроме первого

Вот исходный javascript:

$("button").toggle(function() {
$("table tr:not(:first):odd").css("background", "#eee");
// 1-е нажатие, проставляем серый фон
},function() {
$("table tr:not(:first)").css("background", "none");
// 2-е нажатие, убираем фон со всех tr
});

Пример 3 - работа с формами

На сайте jQuery в разделе селекторов есть отдельный подраздел, посвященный работе с формами. Селекторы предоставляют удобную работату с чекбоксами, кнопками, полями ввода и так далее. Нарисуем форму.