Библиотека 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 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.