Чаще всего запуск сценария должен осуществляться после того, как будет загружено дерево DOM. Дождаться полной загрузки DOM позволяет следующая техника:
jQuery(document).ready(function(){
// Your jQuery script go here
});
Или, что равнозначно:
jQuery(function(){
// Your jQuery script go here
});
Все, что находится в обертке jQuery, представляет собой массив, для обработки которого отлично подойдут дочерние фильтры. Их удобство максимально раскрывается при работе с элементами списков определений и пунктами обычных списков. По умолчанию WordPress распределяет весь ссылочный контент по элементам li и галереям, которые создаются путем обертывания изображений и их описаний в списки определений (элементы dt dd).
| :nth-child(number/even/odd) | jQuery(“.linkcat li:nth-child(1)”).css(“background”, “#f60”); | Заносит в выборку элементы, являющиеся n-ным дочерним элементом заданного селектора. Примечание: нумерация начинается с единицы. |
| :first-child | jQuery(“.linkcat li:first-child”).css(“background”, “#f60”); | Заносит в выборку элемент, являющийся первым дочерним элементом заданного родителя. |
| :last-child | jQuery(“.linkcat li:last-child”).css(“background”, “#f60”); | Заносит в выборку элемент, являющийся последним дочерним элементом заданного родителя. |
| :only-child | jQuery(“.pagenav li:only-child”).css(“background”, “#f60”); | Заносит в выборку элементы, являющиеся единственными дочерними элементами заданного родителя. Если родитель обладает несколькими дочерними элементами, выборка останется пустой. |
Посмотрим на фильтр :only-child в действии:
...
jQuery("li:only-child").css("background", "#f60");
...
Теперь посмотрим, как работает фильтр .nth-child (на примере списка Meta в сайдбаре):
...
jQuery(".widget_meta li:nth-child(odd)").css("background", "#f60");
...
Мы приступаем к изучению одного из самых интересных и увлекательных разделов. Библиотека jQuery включает в себя функции, ответственные за добавление различных визуальных эффектов: плавного появления и исчезновения, скольжения и перемещения элементов. Большинству из вас будет достаточно стандартных шорткатов jQuery, отвечающих за анимацию, однако мы также рассмотрим и функцию animate, позволяющую добиться индивидуальной визуализации сайта.
Основная масса представленных функций позволяет задать в качестве своего аргумента функцию обратного вызова (callback), которая дает возможность легко и быстро инициировать некоторую функциональность после выполнения анимации.
Скрытие и отображение элементов
| .show(speed-optional, functionName) | jQuery(“.post”) .css(“background”, “#f60”).show(“slow”); | Отвечает за отображение выбранных элементов. Если установлена скорость (первый параметр), объект увеличивается слева направо, изменяя свою альфа-прозрачность с 0 до 1. После полного появления может быть вызвана функция. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). |
| .hide(speed-optional, functionName) | jQuery(“.post”) .css(“background”, “#f60”).hide(200); | Отвечает за скрытие выбранных элементов. Если установлена скорость (первый параметр), объект убывает справа налево, изменяя свою альфа-прозрачность с 1 до 0. После полного исчезновения может быть вызвана функция. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). |
“Скольжение” элементов
| .slideUp(speed, functionName) | jQuery(“.post”) .slideUp(‘slow’, function() { // code }); |
Изменяет высоту выбранных элементов до тех пор, пока они не будут скрыты. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). Как только анимация закончит свою работу, будет вызвана функция обратного вызова. |
| .slideDown(speed, functionName) | jQuery(“.post”) .slideDown(‘slow’, function() { // code }); |
Изменяет высоту выбранных элементов до тех пор, пока они не будут раскрыты до полного размера. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). Как только анимация закончит свою работу, будет вызвана функция обратного вызова. |
| .slideToggle() | jQuery(“.post”) .slideToggle(‘slow’, function() { // code }); |
Переключает видимость выбранного элемента, используя эффект “скольжения”. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). Как только анимация закончит свою работу, будет вызвана функция обратного вызова. |
Постепенное появление и исчезновение
| .fadeOut(speed, functionName) | jQuery(“.post”) .fadeOut(“slow”, function(){//code}); | Постепенное исчезновение выбранных элементов путем изменения их альфа-прозрачности от 1 до 0. Изменяет значение CSS свойства display на “none”. |
| .fadeIn(speed, functionName) | jQuery(“.post”) .fadeIn(“slow”, function(){//code}); | Постепенное появление выбранных элементов путем изменения их альфа-прозрачности от 0 до 1. |
| .fadeTo(speed, alpha, functionName) | jQuery(“.post”) .fadeTo(“slow”, .3, function(){//code}); | Постепенное изменение прозрачности выбранных элементов до указанной величины альфа-прозрачности alpha. |
Работа с функцией animate
Три функции, которые приведены в предыдущей таблице, идеально подойдут для реализации наиболее распространенных действий. Несмотря на это, иногда можно столкнуться с такой ситуацией, когда вам понадобится создать уникальный эффект. Для этих целей в jQuery существует функция animate.
| .animate(css properties, duration, easing, functionName) | jQuery(“.post”) .animate({width: 200, opacity: .25}, 1000, function(){//code}); | Задает произвольное изменение CSS свойств для выбранных элементов с целью создания уникальной анимации. |
| .stop() | jQuery(“.post”).stop(); | Останавливает анимацию для выбранных элементов. |
Ниже приведен пример задания произвольной анимации для изображений img, расположенных в записях:
...
jQuery(".post img").animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'}, 1000, function() {
//alert("animate function finished");
});
...
Мы получили достаточно информации для того, чтобы начать свою работу с jQuery. Большинство примеров, представленных далее, будут базироваться на версии WordPress 3.0 и теме “Twenty Ten” (которая, к слову говоря, используется и в моем блоге). Twenty Ten является полностью HTML5 валидной, чистой темой. Все скрипты, приведенные в данном разделе, были изначально записаны и протестированы на версиях WordPress 2.8.6 и 2.9.2, и затем уже портированы в WordPress 3.0.
Регистрация библиотеки jQuery
Поскольку версия библиотеки jQuery, которая поставляется вместе с WordPress 3.0, является актуальной на момент написания статьи (1.4.2), я перейду в папку wp-content/themes/twentyten, открою файл header.php и использую функцию wp_enqueue_script для вызова jQuery, как показано на примере:
//placed right above the wp_head function wp_enqueue_script( 'jquery' ); wp_head();
Регистрация произвольного сценария
Теперь мы должны подключить к нашей теме файл скрипта, который будет содержать в себе написанные нами jQuery сценарии. Для большего удобства можно создать отдельную папку js в каталоге с темой. В этой папке будут храниться наши Javascript файлы. Создадим в ней отдельный файл и назовем его custom-jquery.js.
Вы можете использовать wp_enqueue_script для подключения любых созданных скриптов. Вызов функции для подключения дополнительных скриптов должен находиться между инициализацией библиотеки jQuery и вызовом wp_head():
...
wp_enqueue_script( 'jquery' );
wp_enqueue_script('custom-jquery', get_bloginfo('stylesheet_
directory') . '/js/custom-jquery.js', array('jquery'), '20100510' );
wp_head();
В функции wp_enqueue_script, отвечающей за вызов произвольных скриптов, я первоначально зарегистрировал название своего скрипта (custom-jquery). В качестве второго параметра функции задан путь к сценарию, описанный с помощью тега шаблона get_bloginfo. Третий параметр указывает на тот факт, что скрипт зависит от jQuery. Наконец, четвертый параметр отвечает за номер версии. В качестве последнего параметра я обычно задаю текущую дату. Когда я выполняю обновление своего скрипта, я изменяю установленную в функции дату, в результате чего тема “генерирует” код, подобный следующему:
<script type='text/javascript' src='https://localhost/wp-content/ themes/twentyten/js/custom-jquery.js?ver=20100510'></script>
Если я когда-либо обновлю свой скрипт, браузер загрузит его новую версию вместо устаревшей, хранящейся в кэше.
Добавление файла custom-jquery
Наконец, давайте откроем файл custom-jquery.js и при помощи изученной техники установим ожидание загрузки DOM:
jQuery(function(){ /*<- shortcut for document ready*/
/*any code we write will go here*/
});//end docReady
Заготовку мы сделали. В дальнейших разделах мы изучим разнообразные секреты jQuery, которые позволят нам выполнять разнообразные действия со страницей. Вы можете экспериментировать с кодом, размещая его в файле custom-jquery.js.
Возвратимся назад в те далекие времена, когда jQuery еще не появился на мировой сцене. Датой возникновения jQuery считается 2006 год. До этого момента разработчикам приходилось тратить много времени на то, чтобы создать динамическую страницу, опираясь лишь на средства Javascript. Куча циклов while и foreach, хоровод инструкций ifelse – все это никак не отвечало требованиям оптимизации кода.
В те времена из-за плохой совместимости браузеров нередко приходилось создавать отдельные скрипты для Firefox и IE. Существовало множество способов “обмануть” браузеры, заставить их одинаково реагировать на события. Целью такого подхода являлось сглаживание различий в представлении одной и той же веб-страницы разными браузерами.
Вместо того, чтобы активно изучать Javascript, многие разработчики решили попросту отказаться от его применения, тем самым избежав различных проблем. Однако некоторые энтузиасты не стали безрассудно исключать этот перспективный вариант. Так на горизонте возник jQuery.
WordPress, представляющий собой ответвление от исходного b2/cafelog программного обеспечения, был совместно разработан Matt Mullenweg и Mike Little. Впервые WordPress появился в 2003 году. Первоначально он представлял собой обычную платформу для блогов. Со временем WordPress развивался и постепенно перерос в платформу, которую используют миллионы издалетей и организаций по всему миру для решения различных задач, связанных с размещением контента.
Как и jQuery, WordPress является гибкой и расширяемой средой. Matt, а также разработчики из Automattic позаботились о том, чтобы WordPress соответствовал всем текущим стандартам W3C. Простое управление дизайном, а также быстрое и легкое добавление дополнительной функциональности в WordPress осуществляется при помощи развитого API, оптимизированного под разработку тем и плагинов.
WordPress использует базу данных MySQL, а также набор шаблонов, позволяющих добиться динамичности сайта. XHTML разметка страниц строится словно конструктор, прибывая из различных мест – из файлов шаблона темы, из записей и страниц, из плагинов и виджетов.
Чем больше информации вы знаете об установке и использовании WordPress, тем быстрее вы сможете применить jQuery для реализации различных возможостей на собственном сайте.
jQuery не несет в себе ничего кардинально нового – это не отдельный язык, а простая Javascript библиотека. Ее разработка ставила перед собой одну цель: добиться упрощения языка и расширить границы его применения. Синтаксис Javascript, представленный в jQuery, стал гораздо проще и понятнее: уродливые и громоздкие вещи были заменены на современные, удобные конструкции, открыв дорогу новым тенденциям в веб-разработке.
Одной из первых особенностей, приглянувшихся мне в jQuery (помимо превосходной, четкой документации), был фантастический “механизм циклов”. Сейчас я называю его “циклическим выполнением”, что для людей, обладающих более формальными навыками программирования или предыдущим опытом работы с jQuery, может показаться слишком “поверхностным” и “околонаучным”. В таком случае введем более подходящий термин: “неявная итерация”. По существу, jQuery выполняет итерации, т.е. повторения (иначе: циклы) по выбранным элементам контейнерного объекта без введения явного итератора (отсюда слово “неявная” в понятии “неявная итерация”). Отбросив сложные определения, можно сказать, что вы можете осуществить различные действия с рядом элементов без использования циклов foreach или while.
Еще одна удивительная особенность jQuery – это возможность создания операторных цепочек. Операторные цепочки позволяют применить к выбранному ряду элементов сразу несколько различных действий, без необходимости многократного вызова требуемых функций и сценариев. Создание цепочек преобразований является удивительной и полезной практикой, которую мы подробно рассмотрим в дальнейшем при работе с jQuery.
Наконец, jQuery является очень гибкой и расширяемой средой. За годы, прошедшие с появления указанной библиотеки, разработчиками было создано несколько тысяч различных плагинов, ориентированных на выполнение широкого круга действий. Как мы обнаружим в дальнейшем, написать собственный плагин для jQuery не составляет особого труда. Однако, как и в случае с WordPress плагинами, большинство задач можно будет решить, опираясь на уже существующие разработки.
Мы начнем с изучения основ данной библиотеки и закончим рассмотрением различных способов применения jQuery в WordPress.
Опыт и мастерство программирования напрямую связаны с применением удобного инструментария, позволяющего значительно упростить работу по написанию кода. Любой квалифицированный разработчик со временем выбирает такие программные решения, которые отражают его представления об удобстве работы и позволяют выполнять большее число действий при меньшей затрате собственных сил. Для того чтобы оптимизировать процесс написания кода, нам понадобятся разнообразные программные средства, обладающие удобным и продуманным функционалом.
Текстовый редактор
Для того, чтобы работа с PHP, Javascript и HTML не превращалась в утомительный труд, нам понадобится удобный текстовый редактор. В качестве последнего идеально подойдет Dreamweaver, включающий в себя все необходимые функциональные средства для ведения полноценной работы с кодом. Если же вам требуется более “легкий” вариант, то можно воспользоваться полезной программой Coda для Mac. Среди других, не менее удобных альтернатив можно отметить редакторы TextWrangler и HTML-kit.
В общей сложности, существуют тысячи различных текстовых редакторов, как свободно распространяемых, так и платных, обладающих различными преимуществами и возможностями. Ваш выбор должен быть основан на наличии в программе средующих важных функций:
– нумерация строк. Эта возможность оказывается очень удобной при отладке исходного кода. Она позволяет быстро перейти на нужную строку и исправить ошибочную инструкцию.
– подсветка синтаксиса. Каждый текстовый редактор использует собственный набор цветов, которые позволяют выделить различные синтаксические типы.
– отображение непечатных символов. Указанная возможность позволяет видеть все переносы строк, пробелы, табуляции, и иные специальные символы, которые вы можете использовать в разметке кода.
– перенос текста. Длинные строки, которые выходят за пределы окна редактора, будут автоматически переноситься на новую строку, позволяя вам выполнять удобное редактирование участков кода. Горячие клавиши, используемые в редакторах, дают возможность быстро включать и выключать перенос текста.
– загрузка файлов через FTP. Удобная возможность, позволяющая загружать через FTP созданные файлы, содержащие необходимую разметку.
После того как библиотека jQuery будет загружена с сайта jquery.com, нам потребуется привязать ее к проекту. Разметка, приведенная ниже, иллюстрирует подключение библиотеки jQuery к HTML-документу (за основу была взята production-версия jQuery).
<!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" xml:lang="en">
<head>
<title>First jQuery Test</title>
<script type="text/javascript"
src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery("document").ready(function(){
jQuery("p").css("background-color", "#ff6600");
});
</script>
</head>
<body>
<h1>Sample Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
</body>
</html>
Скрипт, который приведен выше, устанавливает CSS правило background для всех тегов p, встречающихся в документе. Этот пример иллюстрирует богатые возможности jQuery по быстрому изменению представления и структуры документа. Для того чтобы увидеть результат работы скрипта, достаточно открыть документ в любом браузере.
В следующей статье мы рассмотрим различные способы подключения библиотеки jQuery к собственной WordPress теме.
Умение работать с каким-либо из клиентских или серверных языков (JavaScript, VBScript.NET, ASP, PHP, Python, Java, Ruby) пригодится вам для полноценного усвоения представленного курса. Если опыт взаимодействия с любым из указанных языков имеется – замечательно! Если же такого опыта нет – не страшно, со временем он появится.
Javascript и технология AJAX
Чтобы понять технологию AJAX, вы должны обладать некоторыми начальными навыками по работе с Javascript. В частности, вам должен быть знаком синтаксис языка и структура используемых операторов. Однако, непосредственный опыт работы с Javascript от разработчика не требуется. Достаточно всего лишь разбираться в коде и уметь его верно интерпретировать. Рассмотрим следующий фрагмент, снабженный подробными комментариями:
<script type="text/javascript">
/*XHTML-тэг, задающий скрипт. Включает в себя атрибут type, необходимый для определения языка (в данном случае Javascript)*/
/*
Многострочный комментарий.
Вы можете размещать в нем любую необходимую информацию.*/
//Однострочный комментарий для кратких заметок
function writeHelloWorld(){ //задаем функцию writeHelloWorld()
var text1 = "Hello"; //определяем переменную с именем text1
document.write(text1); /*вывод текста "Hello". Текст хранится в переменной "text1"*/
document.write(" World!"); /*вывод строки "World!". Примечание: точка с запятой ";" должна обязательно завершать каждый оператор*/
}// закрывающая фигурная скобка завершает блок функции
writeHelloWorld(); //вызов функции
//закрываем тег script
</script>
Если указанный фрагмент не вызывает у вас никаких вопросов и вы в состоянии внести в него некоторые собственные правки (к примеру, изменить название функции, имя переменной и т.д.), значит, вы без проблем освоите данный курс.
Естественно, не лишним будет знать о том, как работать с различными типами информации – строками, целыми числами; уметь задавать массивы, циклы, операторы if/else и т.д. Для того чтобы научиться работать с jQuery, вам, строго говоря, достаточно знать лишь общий синтаксис Javascript.
AJAX не является отдельным языком. Как мы узнаем в дальнейшем, AJAX представляет собой набор методов, предназначенных для работы с асинхронным Javascript и XML. Технология AJAX предполагает тесную связь языка Javascript и HTPP-запросов для разработки высокодинамичных страниц. Указанный подход позволяет создавать веб-проекты, похожие скорее на прикладные программы, нежели на привычные веб-страницы.
