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


jQuery позволяет легко получать доступ к любым элементам на странице (ссылкам, изображениями, блочным элементам, текстовым полям и т.п.). При этом нам не требуется писать длинные конструкции, как это делается, например, в JavaScript. Ниже — небольшое справочное руководство.

Основная конструкция для выбора того или иного элемента на странице — $(селектор).

Допустим мы имеем следующий html-код:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <span id="top">Текст 1</span>
    <a href="1.html" class="main">1</a>
    <a href="2.html">2</a>
    <a href="3.pdf">3</a>
    <span rel="bottom">Текст 2</span>
    <h2><a href="other.php">Разное</a></h2>
  </body>
</html>

Вот несколько примеров, как мы можем обратиться к некоторым элементам этого кода:

1
2
3
4
5
$('.main') - получаем доступ к ссылке с классом main
$('#top') - получаем доступ к элементу span c идентификатором "top"
$("a[href$='.pdf']") - получаем доступ к ссылкам, ведущим на pdf документ
$("span[rel='bottom']") - получаем доступ к элементу span, имеющему атрибут rel, равный значению bottom
$("h2 > a") - получаем доступ к ссылкам, являющимся прямыми потомками элемента h2

Очень просто, не правда ли?
Другие примеры выбора элементов страницы, не связанные с вышеприведенным кодом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("a[href^='http://']") - все ссылки на странице, начинающиеся с http://
$("a[href*='poleshuk.ru']") - все ссылки на странице, содержащие в адресе poleshuk.ru
$("input[type=text]") - все текстовые поля (с типом text)
$("a.my") - ссылки, имеющие класс my
$("div#cat") - элемент div с идентификатором (id) cat
$("p:first") - первый элемент p на странице
$("p:last")  - последний элемент p на странице
$("li:odd") - нечетный элементы li в списке
$("li:even") - четные элементы li в списке
$("li:first-child") - первый элемент li в списке
$("li:last-child") - последний элемент li в списке
$("li:nth-child(2)") - второй li в списке (отсчет с 1)
$("p:eq(5)") - шестой элемент p на странице
$("a:gt(3)") - все ссылки после 4-й (отсчет с 0)
$("a:lt(3)") - все ссылки до 4-й (отсчет с 0)




Другие посты

Категория: jQuery