SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Выборка элементов в jQuery

jQuery предоставляет широчайшие возможности по выбору DOM-элементов. Как уже упоминалось ранее, прежде, чем что то сделать с элементом (будь то блок, список или картинка) сначала нужно к нему обратиться. Выбор элементов в jQuery организован практически так же, как и css. Нагляднее всего это увидеть на примерах. Давайте создадим небольшую html страничку и поучимся с помощью скрипта обращаться к ее элементам:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Работа с jQuery</title>
		<script type='text/javascript' src='js/jquery-1.8.2.min.js'></script>
	</head>
	<body>
		<h1>Отбор элементов в jQuery</h1>
		<div class="wrap">
			<p>Этот текст является первым абзацем на странице и первым дочерним элементом блока wrap.</p>
			<p>Этот текст является вторым абзацем на странице и вторым дочерним элементом блока wrap.</p>
		</div>
	</body>
</html>

Предположим, нам понадобилось отобрать абсолютно все элементы на странице. Для этого в файле myscript.js (как создать и подключить файл для пользовательских скриптов, описывалось в прошлой статье) нам понадобится написать следующее:

$(function () {
	$('*')
});

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

Что бы сделать пример более наглядным, давайте покрасим текст в абзацах в красный цвет. Для этого сначала выберем все абзацы, а затем применим к ним метод jQuery, который добавляет стиль к отобранным элементам:

$(function () {
	$('p').css('color', 'red');
});

О методах jQuery мы не раз еще будем говорить в последующих статьях, а пока просто откройте страницу с кодом выше в браузере и убедитесь, что текст в абзацах стал красным. Обратите внимание, заголовок по прежнему остался черным. Это произошло потому, что мы обратились только к абзацам на странице документа. Что бы исправить ситуацию, нам понадобится обратиться к заголовку. Исправим ситуацию и добавим в код еще одну строчку:

$(function () {
	$('p').css('color', 'red');
        $('h1').css('color', 'red');
});

Теперь и заголовок стал красным, но... Код выглядит немного избыточным. jQuery позволяет сократить запись и применить один и тот же метод к нескольким элементам. Все, что для этого нужно, указать требуемые объекты, разделив их запятой. Следующая запись выполнит то же самое, что и код выше - изменит цвет у заголовка и текста в абзацах:

$(function () {
	$('p, h1').css('color', 'red');
});

Таким же нехитрым способом мы можем обратиться как к группе элементов, так и к любому из них по отдельности. Ознакомиться подробнее со всеми возможными способами выборки можно здесь.

Для отбора элементов jQuery использует синтаксис css и если вы с каскадными таблицами стилей "на ты", то уже значительно облегчили себе жизнь. Но что бы начать практиковаться в написании скриптов, не хватает еще одной маленькой детали. Мы уже немного познакомились в этой статье с одним из методов jQuery. Но их в библиотеке присутствует огромное количество. Именно благодаря методам мы сможем вытворять с элементами на странице все, что душа пожелает. В следующей статье - События и методы в jQuery, мы попробуем копнуть глубже и узнать что же еще может библиотека, кроме как изменить цвет текста.