Элементы

Я начала пользоваться jQuery сравнительно недавно, поэтому в памяти свежи ее основы. Здесь я буду выкладывать небольшие наводки для новичков на максимально упрощенном языке. Я еще сама являюсь в этом новичком, поэтому буду учиться вместе с вами.

Для изучения jQuery вам необходимо знать HTML и хотя бы немного ориентироваться в JavaScript, поскольку jQuery сама по себе является библиотекой JavaScript. Также будет полезно знание CSS, поскольку оттуда позаимствованы многие обозначения.

Итак, чтобы получить доступ к функциям из библиотеки, сперва нужно подключить ее к HTML документу. Для этого в HTML коде странице прописываем путь к библиотеке, например:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

Последнюю версию библиотеки всегда можно скачать на сайте jQuery.com и загрузить себе на сайт. На сайтах юкоза библиотека уже подключена по умолчанию, поэтому эту строчку писать необязательно.

Для работы с элементами HTML страницы нужно знать, как к ним обращаться. Существует три основных способа обращения к элементу:

1. по его названию, например <div>, <p>, <span>, <h1>, <a>, <b>, <input> и т.п.;
2. по его идентификатору, например <div id="moiDiv">, <a id="ssilka15">;
3. по его классу, например <p class="moiTekst">, <b class="zhirnyiTekst">;

А теперь рассмотрим на практике три способа обращения к элементу <div class="moiKlass" id="MoiId"> и сравним с обращением к тому же элементу в JavaScript.

1) по названию (воздействуем на все элементы DIV в документе)

jQuery: $('div'); JavaScript: document.getElementsByTagName('div');

2) по идентификатору (воздействуем на все элементы с id="moiId")

jQuery: $('#moiId') JavaScript: document.getElementById('moiId');

3) по классу (воздействуем на все элементы с class="moiKlass")

jQuery: $('.moiKlass'); JavaScript: document.getElementByClassName('moiKlass');

Чтобы обратиться ко всем элементам страницы сразу, можно использовать просто звездочку *.

Кроме прямых обращений, можно воздействовать на элементы через соседние элементы (такое редко пригождается, однако иногда может быть полезным).

<div id="mydiv" class="moidiv">
<p id="block1" class="block">
<a href=http://j1.com>ссылка 1</a>
<a href=http://j2.com>ссылка 2</a>
<a href=http://j3.com>ссылка 3</a>
</p>
<p id="block2" class="block">
<a href=http://j4.com>ссылка 4</a>
<a href=http://j5.com>ссылка 5</a>
</p>
</div>

1) Воздействие на внутренний элемент через внешний.

$('div p'); $('*.moidiv p'); $('*#mydiv p'); $('div *.block'); — обращение ко всем параграфам внутри div
$('div p#block1'); $('div.moidiv p#block1'); — обращение к первому параграфу внутри div
$('div p#block2'); $('div.moidiv p#block2'); — обращение ко второму параграфу внутри div
$('div p a'); $('p a'); — обращение ко всем ссылкам внутри div и p
$('div p#block1 a'); $('p#block1 a'); — обращение ко всем ссылкам внутри первого параграфа
$('div p#block2 a'); $('p#block2 a'); — обращение ко всем ссылкам внутри второго параграфа

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

$('div > p'); - воздействует на все параграфы внутри div, на элементы a это уже не распространяется, поскольку они уже не в первом слое div
$('p#block1 > a'); — воздействует на все ссылки внутри первого параграфа

3) Воздействие на соседний элемент (идущий сразу за данным).

$('#block1 + p'); — возвратит второй параграф

4) Воздействует на соседние элементы из того же слоя.

$('#block1 ~ *'); — возвратит второй параграф