Должен признаться, что я являюсь очень инертным человеком. Этот недостаток часто мешает сесть и заняться изучением чего-то нового. Зато, если вдруг все-таки сяду, то не встану ;-). Так было и с jQuery. Это было время, когда я только начинал работать веб-разработчиком. Тогда мне мало приходилось писать client-side кода, и если передо мной вставала задача сделать ajax-скрипт, то я решал вопрос варварски. Эх, как же я ошибался тогда, считая, что использование низкоуровневых средств и передача готового xml будет работать быстрее, чем какой-то там фреймворк (хотя, если передавать json, то может и будет… надо как-нибудь поэкспериментировать).
Довольно вступления. Думаю, что jQuery не нуждается в представлении. Наверняка каждый, кого хоть краем касается веб-разработка, слышал об этой замечательной вещи. С ее помощью можно без особого труда “вдохнуть жизнь” в страницы вашего проекта. API jQuery достаточно для удовлетворения большинства потребностей современного веб-разработчика и верстальщика. Что уж говорить о комьюнити, которое постоянно подогревает популярность фреймворка новыми плагинами.
API jQuery
Разработчики jQuery разделяют его API на функциональные группы:
- Core – ядро
- Selectors - селекторы
- Attributes – методы для работы с атрибутами dom-элементов
- Traversing – методы для работы с наборами элементов (поиск, изменение набора)
- Manipulation – манипуляция элементами
- CSS – работа со стилями
- Events – работа с событиями
- Effects – реализация эффектов
- Ajax – думаю, что тут название говорит само за себя
- Utilities – методы-утилиты, упрощающие жизнь
- jQuery UI – методы для создания интерфейса пользователя
Естественно, рассмотреть весь набор методов фреймворка в одной статье не удастся, но я буду возвращаться к этой теме еще не раз. Если же вам не терпится узнать что-либо, пожалуйста, оставьте комментарий или задайте мне вопрос, используя специальную форму.
Функция $()
Эта функция является лишь сокращением функции jQuery(). Через нее, а также через класс jQuery, реализована вся работа фреймворка. Используется она для селектирования наборов элементов, создания jQuery-объекта из dom-элемента.
Совет: для больших проектов и объемных скриптов используйте именно jQuery(), а не $(). Это позволит избежать возможных проблем портирования кода или добавления функционала другой javascript-библиотеки.
$(document).ready()
Практически все, что делается с помощью фреймворка, происходит с использованием объектной модели документа (DOM). Следовательно, только после полной загрузки документа может выполняться какой-либо код.
Событие $(document).ready() является как бы отправной точкой для большинства скриптов. В callback-функции этого события ставятся нужные event-handler’ы, запускаются эффекты, ajax-запросы и т.д.
Селекторы
Под селекторами подразумеваются выражения, которые соответствуют определенному набору элементов. В jQuery в качестве языка селекторов используется комбинация соответствующих языков CSS и xPath.
Например
$('a.menulink') // Вернет набор элементов тегов класса menulink $('a.menulink > span') // Вернет набор элементов тегов, дочерних тегам класса menulink $('a.menulink:hidden > span') // Вернет набор элементов тегов, дочерних всем скрытым тегам класса menulink $('div#menu') // Вернет элемент тегас id="menu" $('#form1 > input[name=title]') // Вернет элемент тега с аттрибутом, дочернего форме с id="form1"Список примеров можно продолжать бесконечно. Языка селекторов более чем достаточно для получения любого нужного набора элементов в документе. Использование селекторов не ограничивается лишь использованием функции $(). Их можно применять и к наборам элементов, для фильтрации (filter(), not()), расширения (add()) или для последующего поиска (find()). Понимать и уметь пользоваться этими инструментами очень важно. Советую, досконально изучить всю информацию по этому вопросу в официальной документации.
Манипуляция
В jQuery есть полный набор средств для изменения структуры документа.
Основные методы:
- append() – добавление дочернего элемента в конец содержимого элементов набора
- prepend() – добавление дочернего элемента в начало содержимого элементов набора
- insertAfter() – вставка перед элементами набора
- insertBefore() – вставка после элементов набора
- html() – получение и установка содержимого текущего элемента
- text() – возвращает суммарный контент всех элементов набора или устанавливает контент каждого из них
- empty() – очистить содержимое элемента
- remove() – удалить элементы набора
- wrap() – обрамление элементов набора
Одних только этих инструментов вполне достаточно для решения большинства задач.
Ajax
Простейший пример использования ajax-средств jQuery:
// загрузить в контейнер тег класса .content с его содержимым с главной страницы сайта yoursite.ru $('#ajaxcontaner').load('http://yoursite.ru .content');Правда, данный код будет работать только для скриптов на страницах этого домена. Если надо получить данные с другого домена, нужно использовать json с указанной jsonp callback-функцией. Но об этом как-нибудь в другой раз. Вообще гораздо правильнее, с точки зрения производительности, использовать именно json для ajax'а.
Например
$.getJSON("/jsontest.php", function(res){ // Обращаемся к скрипту на сервере, который вернет нам валидный json if(res.success) { // Проверяем, было ли выполнение скрипта на сервере удачным alert('Все впорядке'); } else { alert('Ошибка!'); } });В данном примере сервер сформировал нам json вроде этого
{ "success" : true }
Для более кастомизированных запросов можно использовать низкоуровневый метод $.ajax(). Подробно описывать его сейчас я не стану.
Удобство
Работать с jQuery одно удовольствие. Код пишется налегке, и образует собой интуитивно понятную конструкцию. Почти все методы, работающие с набором элементов, возвращают эти же наборы. Таким образом, можно выстраивать "цепочки" кода.
Например
$('.leftcolum > a').css({color : 'red'}).fadeOut(1500); $('div#maincontent div.header').css({opacity : 0.65}).show(400);Работает библиотека быстро. При использовании firebug'а, отладка не составляет труда.
Эффекты
Для реализации эффектов в jQuery есть набор специальных функций.
Вот их список:
- show()/hide()/toggle() – показать элементы/скрыть элементы/переключение этих режимов
- slideDown()/slideUp()/slideToggle() – выдвинуть элементы/задвинуть элементы/переключение
- fadeIn()/fadeOut() – проявить/скрыть используя прозрачность
- fadeTo() – изменить значение прозрачности (opacity) до указанного значения
- animate() – наиболее удобная функция для создания собственных эффектов на основе css
- stop() – остановить любую анимацию для элемента
Пример
$(document).ready(function(){ $('.header').animate({background-color: 'white'},{ duration: 1500, complete: function(){ $('.header').animate({background-color: '#1515FF'},{ duration: 1500 } } }); };В данном примере мы меняем цвет бекграунда шапки сначала на белый, а потом на синий, с длительностью в 1500 миллисекунд на каждую операцию.
На сегодня это все. Удачи ;-)
rvnikita
03:36