Работаем с селекторами

Библиотека jQuery стала неотъемлемым атрибутом создания сайтов. И, хотя количество документации растет, в большинстве своем постоянно актуальным остается вопрос селекторов, благодаря которым мы находим тот или иной элемент на странице.

Работа с селекторами jQuery

Библиотека jQuery стала неотъемлемым атрибутом создания сайтов. И, хотя количество документации растет, в большинстве своем постоянно актуальным остается вопрос селекторов, благодаря которым мы находим тот или иной элемент на странице. Рассмотрим некоторые из них. Для более простого понимания используем следующий HTML-код в качестве основы для примеров:

<div id='formelements'>
<p>Имя:</p>
<p><input type='text' name='name' id='name' value='Покажи меня'></p>

<p class='about graytext'>О себе:</p>
<p><textarea name='n' class='textareaclass'>Покажи меня</textarea></p>

<p>Пол</p>
<p><select id='select_id' id='select_id'>
<option value='1'>Тут значение ОДИН</option>
<option value='2'>Тут значение ДВА</option>
</select>
</p>

<p>Имя:</p>
<p><input type='text' name='phone' value='02'></p>

</div>

Поиск по HTML элементу

Пример:

alert($("textarea").val());

Поиск по идентификатору # (уникальное имя. id)

Является аналогом document.getElementById
Пример:

alert($("#name").val());

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

Поиск по CSS-классу (. - точка)

Чтобы искать по классу, достаточно к селектору класса дописать ".название_css_класса_без_пробела":

$(".about")

Если у нужного объекта указано несколько классов то они все перечисляются через точку:

$("p.about.graytext");

Поиск вложенного (дочернего) элемента

Чтобы совмещать селекторы класса элементов надо их просто написать через пробел в порядке увеличения глубины внутри страницы:

$("'#formelements p.about").html("НОВЫЙ ТЕКСТ");

При таком поиске будут найдены все дочерние элементы, даже те которые находятся на более глубоком уровне вложенности.

Поиск по атрибутам ([attr=value])

Селектор элемента с фильтрацией по аттрибуту. Методов фильтрации много:

[attr] - поиск объекта, имеющего аттрибут attr
[attr='value'] - поиск объекта, attr которого равен value
[attr!='value'] - поиск объекта, attr которого не равен value
[attr^='value'] - поиск объекта, attr которого начинается с value
[attr$='value'] - поиск объекта, attr которого заканчивается на value
[attr*='value'] - поиск объекта, аттрибут attr которого содержит value в любом его месте
[attr='val'][attr2!='val2'] - поиск объекта где attr равен val а attr2 не равен val2

Примеры:

Выборка всех input у которых type указан как text. Т.е. checkbox, submit, reset под это не попадут.

$("input[type='text']")

Выборка всех input у которых type указан отличный от text. Т.е. checkbox, submit, reset попадает - очень аккуратно нужно использовать такой селектор:

$("input[type!='text']")

Показывает все элементы у которых name начинается с 'phone':

$("input[name^='phone']")

Полный аналог предыдущего. Разница лишь в том что искомая строка должна быть в конце аттрибута name:

$("input[name$='phone']")

Тоже частый механизм поиска. Ищет все элементы где в value есть слово звезда:

$("input[value*='звезда']")

Вывод элемента input ааттрибут name которого равен phone значение value любое кроме '02':

$("input[type=text][name='phone'][value!='02']")

Обратите внимание при поиске по HTML-типу надо использовать нижний регистр, а при поиске по указываемым значениям - надо точно указывать регистр.
Т.е. эти структуры содержат ошибки:

$("input[type='TEXT']") 
$("input[TYPE='TEXT']")

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

Работа с формами один из важных моментов работы сайта. Jquery позволяет нам облегчить эту работу Работа с формами — это то, где чаще всего Вам нужен jQuery
:disabled - поиск заблокированного видимого элемента формы input,textarea
:enabled - поиска доступного для редактирования
:checked - Поиск checkbox (radio) который отмечен (checked)
:selected - Поиск option которое выбрано (selected)

$("#select_id option:selected").text();

first, last, qe, lt, gt — поиск по соседей

Пример:

:first - первый дочерний элемент

$("div:first");

:last - последний дочерний элемент

$("div:last");

:eq(номер) - поиск то точному номеру. Обратите внимание, нумерация начинается с нуля.
$("table td:eq(2)") - третий начала таблицы
$("table tr:eq(3) td:eq(4)") - пятый в четвертом ряду
:gt(номер) - поиск всех элементов чей номер не ниже указанного (gt - сокращение от greater than(больше чем))
$("table td:gt(5)") - все от 6
:lt(номер) - аналогично предыдущему, только не больше указанного (less than - менее чем)
$("table td:lt(3)");

Итак, мы разобрали основные виды селекторов. Надеемся, это поможет вам успешно преодолевать HTML-разметку. 

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Работаем с селекторами» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут