RSS

JQuery, или как просто делать сложные вещи

Авторы: Бер Бибо, Иегуда Кац

Рецензировал: Иван Никитин

Дата публикации: 03/03/2009

Вышла отличная книга «jQuery. Подробное руководство по продвинутому JavaScript». В книге с самого начала объясняется применение библиотеки jQuery, которая позволяет вы-полнять типовые и часто требуемые операции над объектами DHTML.

Что такое JQuery

Библиотека jQuery — это мощное дополнение к «привычному» JavaScript, которое расширяет набор методов и функций у стандартных объектов, и делает большинство типовых операций с объектами страницы в JavaScript выполнимыми буквально в одну строку. По сути, библиотека jQuery представляет собой надстройку над стандартными объектами JavaScript и DOM, добавляющая новые возможности работы с элементами страницы.

Согласитесь, написать буквально две строчки кода и получить возможность перетаскивать мышкой любой объект вашей страницы (в данном примере, с идентификатором myObj) — это впечатляет!

<script type="text/javascript">
$(document).ready(function() {
	$("#myObj").draggable();
});
</script>

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

Огромное количество плагинов и расширений jQuery делает работу с ней не просто удобной, а невероятно эффективной — вместо того, чтобы писать и отлаживать свой собственный код, достаточно просто найти и подключить подходящий плагин из списка:http://plugins.jquery.com/

Найти и сказать всю библиотеку для своих проектов можно с официального сайта проекта JQuery

Сегодня jQuery — это, пожалуй, самое распространенное расширение объектов функций JavaScript, которое применяется в сотнях и тысячах проектов.

Кому и зачем нужна библиотека JQUERY

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

jQuery — это, прежде всего, набор готовых инструментов для манипуляции объектами HTML страницы и связи с серверами (AJAX). Основная идея этой библиотеки сделать работу с объ-ектами страницы невероятно простой, короткой и понятной. Например, давайте попробуем сделать так, чтобы все ссылки на странице стали красными и перестали бы работать ? Сколько строк кода понадобится Вам для реализации этого? В jQuery мы обойдемся ОДНОЙ СТРОЧКОЙ:

$("a").click(function(){return false}).css({color:"red"});

И действительно ВСЁ!

Здесь мы выполнили сразу несколько типовых операций, с которыми приходится сталки-ваться разработчику, а именно:

  1. Выбрали все нужные для нас объекты страницы, в данном случае все элементы A
  2. Добавили ко всем выбранным элементам обработчик onclick, который возвращает false, что запрещает выполнение перехода по ссылке
  3. Добавили ко всем выбранным элементам inline-сввойство CSS для установки цвета шрифта

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

Небольшой пример кода

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

Итак, код тестового примера можно посмотреть тут.

Как видно, сам пример состоит из двух частей: определение нового метода и «навешивание» этого метода на нужные нам элементы. Новый метод, собственно, определяется здесь:

$.fn.termifier = …

Он определяет обработчик onclick для некоторого элемента, по которому создается новый div с абсолютным позиционированием и нужными координатами, а также текстом, взятым из объекта terms.

Пожалуй, это — самая сложная часть нашего примера, ведь определив новый метод, вы можете использовать его в любых выражениях jQuery, то есть само «навешивание» вашего ме-тода на элементы acronym выглядит очень даже в стиле jQuery:

$("acronym").termifier();

И теперь ваш метод применим к ЛЮБЫМ ЭЛЕМЕНТАМ вашей страницы.

Где бы поподробнее об этом узнать?

Конечно же, в Интернете! Но если вы хотите разобраться с библиотекой jQuery не по обры-вочным примерам и описаниям, а с комфортом и достаточно полно, рекомендуем недавно вышедшую книгу:

Купить на Books.ru

Бер Бибо, Иегуда Кац
jQuery. Подробное руководство по продвинутому JavaScript
Издательство: Символ-Плюс, 2009 г.
Мягкая обложка, 384 стр.
ISBN 978-5-93286-135-6, 5-93286-135-5, 1-933988-35-5
Тираж: 2000 экз. (!!!)

Книга рассказывает о применении и программировании jQuery буквально с самых азов, что делает ее очень полезной для начинающих разработчиков, но, с другой стороны, книга рас-сматривает саму библиотеку jQuery и её расширения на довольно глубоком уровне, что де-лает эту книгу очень хорошим пособием и справочником и для опытных разработчиков. Как говорится, рекомендовано всем на уровне «must read».

Приобрести книгу, можно , как обычно, в Интернет-магазине Books.ru по адресу: http://www.books.ru/shop/books/619339

Комментарии:

Обзор очень качественный.
Поставила в закладки, чтобы поискать эту книгу. До нас этот интернет-магазин "не дотягивается"(я из Казахстана), а в книжном надеюсь найти.

Светлана

Просто и понятно.

jQuerry действительно мощный инструмент для веб-мастера, имеющего опыт общения с javascript и dhtml.

Тема раскрыта.

Сергеевич Алексей

А если я не имею опыта общения с JS и dhtml, стоит ли мне купить эту книгу и прочитать?

Александр

Статья неплохая спасибо. Но следовало бы вам ее самому почитать, чтобы исправить ошибки.

venicum

Оставьте свой комментарий:

Подписаться на комментарии
Capcha