jQuery позволяет легко получать доступ к любым элементам на странице (ссылкам, изображениями, блочным элементам, текстовым полям и т.п.). При этом нам не требуется писать длинные конструкции, как это делается, например, в JavaScript. Ниже – небольшое справочное руководство.
Основная конструкция для выбора того или иного элемента на странице – $(селектор).
Допустим мы имеем следующий html-код:
<!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>
Вот несколько примеров, как мы можем обратиться к некоторым элементам этого кода:
$('.main') - получаем доступ к ссылке с классом main
$('#top') - получаем доступ к элементу span c идентификатором "top"
$("a[href$='.pdf']") - получаем доступ к ссылкам, ведущим на pdf документ
$("span[rel='bottom']") - получаем доступ к элементу span, имеющему атрибут rel, равный значению bottom
$("h2 > a") - получаем доступ к ссылкам, являющимся прямыми потомками элемента h2
Очень просто, не правда ли?
Другие примеры выбора элементов страницы, не связанные с вышеприведенным кодом:
$("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)