С помощью
селекторов jQuery Вы можете выбрать любой элемент на странице.
Все
возможные варианты использования селекторов перечислены в таблице ниже:
Пример
Описание
$('*')
Будут
выбраны все элементы присутствующие на странице.
$("#el1")
Будет
выбран элемент с id=el1.
$(".el1")
Будут
выбраны все элементы на странице с class=el1.
$("div")
Будут
выбраны все элементы div на странице.
$("div,
#el1, .el1")
Будут
выбраны все элементы div, элемент с id="el1" и все элементы с
class="el1" на странице.
$("div.el1")
Будут
выбраны все элементы div на странице атрибут class которых равен el1.
$("p
> div")
Будут
выбраны все элементы потомки div родительского элемента p.
$("[src]")
Будут
выбраны все элементы на странице имеющие атрибут src.
$("[src='wisdomweb.gif']")
Будут
выбраны все элементы на странице со значениями атрибута
src="/wisdomweb.gif".
$("[src!='wisdomweb.gif']")
Будут
выбраны все элементы на странице со значениями атрибута src не равными
"wisdomweb.gif".
$("[src^='wisdomweb']")
Будут
выбраны все элементы на странице со значениями атрибута src начинающимися на
wisdomweb (например wisdomweb.ru, wisdomweb.gif и т.д.).
$("[src$='.gif']")
Будут
выбраны все элементы на странице со значениями атрибута src заканчивающимися
на .gif.
$("[src*='wisdomweb']")
Будут
выбраны все элементы на странице со значениями атрибута src содержащими
wisdomweb.
$(":input")
Будут
выбраны все элементы input на странице.
$(":button")
Будут
выбраны все элементы input на странице с атрибутом type=button.
$(":text")
Будут
выбраны все элементы input на странице с атрибутом type=text.
$(":password")
Будут
выбраны все элементы input на странице с атрибутом type=password.
$(":radio")
Будут
выбраны все элементы input на странице с атрибутом type=radio.
$(":checkbox")
Будут
выбраны все элементы input на странице с атрибутом type=checkbox.
$(":reset")
Будут
выбраны все элементы input на странице с атрибутом type=reset.
$(":image")
Будут
выбраны все элементы input на странице с атрибутом type=image.
$(":file")
Будут
выбраны все элементы input на странице с атрибутом type=file.
$("div:first")
Будет
выбран первый div элемент на странице.
$("div:last")
Будет
выбран последний div элемент на странице.
$("li:even")
Будут
выбраны все элементы списка с четными индексами. Так как нумерация индексов
элементов начинается с 0, то по сути будут выбраны нечетные элементы т.е. 1й,
3й, 5й элементы списка и т.д.
$("li:odd")
Будет
выбраны все элементы с нечетными индексами. Так как нумерация индексов
элементов начинается с 0, то по сути будут выбраны четные элементы т.е. 2й,
4й, 6й элементы списка и т.д.
$("li:eq(3)")
Будет
выбран 4 элемент списка (нумерация элементов в списке начинается с нуля).
$("li:gt(1)")
Будет
выбраны все элементы списка индекс которых больше 1 (т.е. все элементы списка
начиная с 3 элемента).
$("li:lt(2)")
Будет
выбраны все элементы списка индекс которых меньше 2 (т.е. первые 2 элемента
списка).
$(":header")
Будет
выбраны все элементы на странице являющиеся заголовками (т.е. элементы h1,
h2, h5 и т.д.).
$(":animated")
Будет
выбраны все анимированные элементы, которые находятся на странице.
$(":contains('wisdomweb')")
Будет
выбраны все элементы содержащие строку wisdomweb.
$(":empty")
Будет
выбраны все элементы не имеющие узлов потомков.
$(":hidden")
Будет
выбраны все скрытые элементы на странице.
$(":visible")
Будет
выбраны все видимые элементы находящиеся на странице.
Пример:
$(document).ready(function(){
//Установим размер шрифта всех абзацев равным 20
пикселям
$("p").css("fontSize","20px");
//Изменим на зеленый цвет шрифта элемента с id=el2
$("#el2").css("color","green");
//Изменим на красный цвет шрифта элемента с class=el3
$(".el3").css("color","red");
//Сделаем жирным шрифт элементов с id=el2 и class=el3
$("#el2,.el3").css("fontWeight","bold");
//Изменим на синий цвет текста кнопки
$(":input").css("color","blue");
//Установим размер шрифта всех элементов имеющих
атрибут href равным 20 пикселям
$("[href]").css("fontSize","20px");
//Изменим на зеленый цвет ссылки на www.wisdomweb.ru
Существует еще один альтернативный способ также помогающий избежать
преждевременное выполнение JavaScript и jQuery кода и позволяющий также
ускорить загрузку страниц (благодарим за напоминание о нем пользователя
Ghringo Americano).
Необходимо помещать код в самый конец тела документа (т.е. перед
) в данном случае интерпретатор JavaScript встроенный в браузер
начнет разбирать код только после загрузки документа. В предыдущем же
способе загрузка скриптов происходит одновременно с загрузкой документа,
а выполняется этот код после загрузки документа.
Содержимое тела документа
Содержимое тела документа
Цепочки команд в jQuery
Для того, чтобы сократить размер кода Вы можете соединять команды jQuery в
цепочки.
Команды в цепочке будут выполняться поочередно слева направо.
Привязывает
одну или две функции к выбранному элементу. Код первой привязанной функции
выполнится, когда на выбранный элемент будет наведен курсор мыши а второй,
когда курсор мыши покинет пределы этого элемента.
Удаляет у
выбранных элементов обработчики событий, которые были привязаны с помощью
метода delegate().
Объект event
Объект event
хранит информации о произошедшем событии.
Объект event
создается для каждого произошедшего события, но для того чтобы иметь
возможность обратится к его свойствам и методам, его необходимо явно передать в
обработчик события.
Синтаксис:
$(селектор).событие(function(event){
//Затем в
коде обработчика Вы можете обращаться к его свойствам и методам следующим
образом:
event.data;
event.preventDefault();
});
Обратите
внимание: при
передаче объекта event в обработчик Вы можете использовать любое имя.
стили задает CSS стили для анимации (к
элементу одновременно может быть применено несколько стилей).
скорость задает скорость анимации. Вы можете
указать скорость используя предопределенные свойства: "slow",
"fast", "normal" (медленно, быстро, нормально) или указать
скорость в миллисекундах (1000 миллисекунд = 1 секунда).
функция_смягчения задает функцию, которая будет
отвечать за плавность выполнения анимации.
функция указывает имя функции, код которой
будет выполнен после завершения анимации.
Обратите
внимание: для того,
чтобы воспользоваться свойствами позиционирования элемента необходимо вначале
установить свойству position значение отличное от static.
Обратите
внимание: полный
список всех существующих эффектов jQuery с примерами их использования Вы
найдете в нашем jQuery
справочнике.
Работа с DOM
jQuery
содержит набор методов значительно упрощающих взаимодействие с DOM.
Методы,
которые будут рассмотрены в данной главе могут применяться и для HTML и для XML
документов.
Изменение содержимого
элементов с помощью jQuery
С помощью
метода html() Вы можете изменить или узнать внутреннее содержимое
выбранного элемента.
Синтаксис:
//Узнаем содержимое выбранного элемента
$("селектор").html();
//Изменим содержимое выбранного элемента
$("селектор").html("новое
содержимое");
Пример
$(document).ready(function(){
$("#but1").click(function(){
$("#par1").html("jQuery
- этоJavaScript библиотека, значительно
упрощающая написание кода.");
});
$("#but2").click(function(){
$("#par2").html("jQuery
значительно облегчает взаимодействие с DOM.");
Позволяет
узнать текущую или установить новую ширину выбранному элементу.
Методы создания AJAX запросов
AJAX запросы
- это асинхронные запросы к серверу позволяющие обновлять только ту часть
страницы, которая содержит новую информацию, без необходимости обновлять
страницу целиком.
Использование
AJAX запросов ускоряет загрузку страниц и снимает нагрузку с сервера.
Все
существующие в jQuery методы для создания AJAX запросов перечислены в таблице
ниже:
Позволяет
сделать выбранные элементы сортируемыми.
Виджеты jQuery UI
JQuery UI
предоставляет набор готовых виджетов предназначенных для создания
пользовательского интерфейса.
Внешний вид
каждого виджета может быть настроен либо с помощью выбора одной из стандартных
тем доступных при скачивании библиотеки, либо с помощью настройщика тем, либо вручную путем
редактирования файла jquery-ui-1.8.12.custom.css.
Поведение
каждого виджета может настраиваться с помощью передаваемых ему свойств и
методов.
Привязывает
одну или две функции к выбранному элементу. Код первой привязанной функции
выполнится, когда на выбранный элемент будет наведен курсор мыши а второй,
когда курсор мыши покинет пределы этого элемента.
Удаляет у
выбранных элементов обработчики событий, которые были привязаны с помощью
метода delegate().
Объект event
Объект event
хранит информации о произошедшем событии.
Объект event
создается для каждого произошедшего события, но для того чтобы иметь
возможность обратится к его свойствам и методам, его необходимо явно передать в
обработчик события.
Синтаксис:
$(селектор).событие(function(event){
//Затем в
коде обработчика Вы можете обращаться к его свойствам и методам следующим
образом:
event.data;
event.preventDefault();
});
Обратите
внимание: при
передаче объекта event в обработчик Вы можете использовать любое имя.
Останавливает
"всплытие" вызова события к родительским элементам.
Плагины jQuery
Реализация
одних и тех же функций в различных приложениях побуждает разработчиков заново
писать один и тот же код несколько раз лишь незначительно изменяя его под
конкретное приложение.
Плагины
jQuery позволяют забыть разработчикам о данной проблеме. Разработчик может один
раз написать плагин, который позволяет реализовать определенную функцию и затем
использовать его в необходимых приложениях написав только одну строчку кода.
В интернете
можно найти огромное количество бесплатных jQuery плагинов написанных другими
разработчиками и использовать их для создания своих приложений. Можете начать
поиски интересных jQuery плагинов на сайте PluginDetector.com.
Создание плагина
Для того,
чтобы создать плагин необходимо добавить к объекту jQuery.fn свойство, имя
которого будет является именем плагина:
Синтаксис:
//Определяем код плагина
(function($){
$.fn.имяПлагина
= function() {
// Код
плагина
};
})(jQuery);
//Вызываем плагин
$(селектор).имяПлагина();
Обратите
внимание: обертка (function($){
}) (jQuery) используется здесь для того, чтобы внутри кода плагина можно
было использовать знак $ не боясь при этом, что он будет конфликтовать с
другими библиотеками JavaScript.
Ключевое слово this в плагинах
При
написании плагинов следует обратить внимание на то, что в коде плагина ключевое
слово this будет относиться к jQuery объекту, который вызвал этот плагин, а не
к DOM объекту как в функциях обратного вызова.
Это значит,
что в коде плагина для того, чтобы обратится к jQuery объекту необходимо
использовать this, а в коде функций обратного вызова использовать $(this).
Пример
(function($){
/* Создаем плагин с именем plugin, который будет
находить сумму содержимого всех
выбранных
абзацев на странице */
$.fn.plugin=function(){
var sum=0;
/* Для того,
чтобы сослаться на выбранный элемент в коде плагина мы
используем this, но в функции обратного вызова мы уже должны
использовать
Плагин в
предыдущем примере возвращал целое значение, но часто плагины используются для
модификации группы элементов и передачи их следующему методу в цепочке.
Заключительным
шагом в создании плагинов должно стать вынесение кода плагина в отдельный файл.
И написания инструкций, которые должны разъяснить потенциальным пользователям
как и зачем можно использовать Ваш плагин.
Для того, чтобы воспользоваться возможностями плагинов jQuery UI их
необходимо вначале подключить к странице, на которой они будут использоваться.
Существуют два варианта подключения jQuery UI:
Локальное подключение.
Данный способ требует скачивание специального файла с официального сайта;
Удаленное подключение.
Данный способ не требует скачивание файла, а вместо этого использует его
удаленно (данная услуга предоставляется компанией Google).
Локальное подключение jQuery UI
На официальном сайте Вы можете или скачать стандартную комплектацию jQuery
UI или собрать свою собственную.
Стандартная комплектация jQuery UI включает в себя все существующие плагины
и имеет стандартную тему оформления. Для того, чтобы скачать стандартную
комплектацию просто перейдите на сайт
jQuery UI и нажмите кнопку Download.
Если Вы хотите собрать собственную комплектацию jQuery UI Вам необходимо
перейти на сайт jQuery UI и
выполнить шаги перечисленные ниже (пропустите эти шаги если Вы скачали
стандартную комплектацию):
Шаг 1: Выбрать необходимые компоненты
По умолчанию в файл для скачивания включены все существующие плагины. Если
какие-то из них не нужны Вы можете убрать галочку напротив их названия и
сократить тем самым размер итогового файла (стандартная комплектация jQuery
UI имеет размер ~1мб).
Обратите внимание: размер файла библиотеки влияет на скорость
загрузки страницы, поэтому меньший размер всегда предпочтителен.
Шаг 2: Выбрать оформление
Выберите одну из стандартных тем оформления плагинов jQuery UI в поле Theme
или создайте свою тему с помощью themeroller'а.
Шаг 3: Выбрать версию
Выберите версию jQuery UI в поле Version.
Обратите внимание: рекомендуем всегда выбирать последнюю доступную
версию т.к. как более новые версии всегда содержат интересные нововведения.
Шаг 4: Скачать jQuery UI
Нажмите кнопку Download и сохраните файл в удобное для Вас место на жестком
диске.
Теперь (вне зависимости скачали ли Вы стандартную комплектацию или
собрали свою собственную) необходимо подключить jQuery UI к скрипту. Для
этого необходимо распаковать скаченный файл и указать пути к файлам jquery-ui-версия.custom.css
и jquery-ui-версия.custom.min.js в секции head скрипта.
С помощью
методов взаимодействия Вы можете создавать элементы, которые можно
перетаскивать мышкой, которые могут изменять размер, которые можно сортировать
и которые можно выделять мышкой.
Перетаскиваемые элементы
С помощью
метода draggable Вы можете сделать выбранный элемент перетаскиваемым.
С помощью
опции helper Вы можете определить вид элемента-помощника.
Элемент-помощник отображается во время перетаскивания элемента. По умолчанию во
время перетаскивания отображается сам перетаскиваемый элемент.
Обратите
внимание: с помощью
опций, передающихся методу, Вы можете настраивать дополнительные аспекты
поведения виджетов. Виджетам может быть передано сразу несколько опций.
Виджет
autocomplete позволяет
ускорить ввод данных в поле, отображая по мере введения определенные
предположения. Выбрав одно из предположений пользователь может автоматически
завершить ввод.
Предположения
выводится в случае, если данные введенные пользователем совпадают со значением
одного из элементов из списка данных.
Вы можете
подключать к виджету как локальные (т.е. определенные в скрипте на этой же
странице) так и удаленные списки (т.е. находящиеся на удаленном сервере).
Локальные
списки удобны для хранения небольших наборов данных (например список улиц
города), а удаленные списки подходят для хранения больших наборов данных (например
база данных всех городов мира).
Синтаксис:
/* 1. Определяем элемент input, в который будет
производиться ввод информации */
Подключить к
виджету список данных можно с помощью опции source.
С помощью
опции minLength Вы можете указать минимальное количество символов,
которое должно содержать поле ввода прежде, чем поиск совпадений начнет
выполнятся.
В следующей
главе будут рассмотрены оставшиеся виджеты имеющиеся в jQuery UI.
Обратите
внимание: узнать
больше о виджетах разобранных в данной главе Вы можете в нашем jQuery UI справочнике.
Эффекты jQuery UI
Возможность
применения различных эффектов к элементам была и в jQuery. С помощью эффектов
jQuery Вы, например, могли заставить абзац постепенно пропадать или появляться,
применять к элементам анимацию и многое другое.
Эффекты
jQuery UI значительно расширяют эти возможности. Теперь можно заставить
элементы пропадать или появляться пятнадцатью разными способами.
В анимации
Вы можете использовать свойства изменения цвета фона, текста и границ
элементов.
jQuery UI
также расширяет базовую функциональность jQuery для манипулирования классами
оформления.
Скрытие и отображение
элементов с помощью эффектов jQuery UI
В jQuery UI
можно использовать 15 различных эффектов для скрытия и отображения элементов на
страницах.
Эффекты в
jQuery UI могут использоваться со следующими методами:
effect - позволяет применяет
указанный эффект к элементу
hide - позволяет скрыть элемент с
указанным эффектом
show - позволяет отобразить элемент
с указанным эффектом
Синтаксис:
effect(эффект,опции,скорость,функция)
hide(эффект,опции,скорость,функция)
show(эффект,опции,скорость,функция)
эффект указывает название эффекта, который
будет применен. Некоторые эффекты (такие как scale, transfer и size) для своего
вызова требуют задания дополнительных опций.
скорость указывает скорость применения
эффекта в миллисекундах (1000 миллисекунд = 1 секунда).
функция задает функцию, код которой будет
выполнен после завершения применения эффекта.
Эффекты
jQuery UI приведены в таблице ниже:
Название эффекта
Описание
Blind
Эффект
"Ослепление".
Bounce
Эффект
"Отскок".
Clip
Эффект
"Отсекание".
Drop
Эффект
"Падение".
Explode
Эффект
"Взрыв".
Fade
Эффект
"Выцветание".
Fold
Эффект
"Складка".
Highlight
Эффект
"Освещение".
Puff
Эффект
"Рассеивание".
Pulsate
Эффект
"Пульсирование".
Scale
Эффект
"Масштабирование". С помощью опции percent:проценты Вы
можете задать на сколько процентов от текущего размера необходимо уменьшить
или увеличить элемент.
Shake
Эффект
"Тряска".
Slide
Эффект
"Скольжение".
Size
Эффект
"Калибровка". С помощью опции to: и включенных в нее опций width:ширина_в_пикселях
и height:высота_в_пикселях Вы можете задать размеры, до которых
необходимо "откалибровать" текущий элемент.
Transfer
Эффект
"Переход". С помощью опции to:id_или_class_элемента Вы
можете указать элемент, в который перейдет текущий элемент. С помощью опции className:имя_класса
Вы можете оформить эффект перехода с помощью CSS.
Увидеть все
эффекты не требующие дополнительных опций для вызова в действии можно в
следующем примере:
jQuery UI
содержит набор предопределенных классов для создания оформления сайтов.
Используя
готовые классы Вы можете сэкономить время при создании оформления веб-страниц.
Использование готовых классов также поможет стандартизировать оформление Вашего
сайта.
С помощью настройщика тем Вы можете настроить
оформление предопределенных классов на Ваш вкус.
Виджет themeswitcher
Виджет
themeswitcher позволяет
переключатся между различными темами оформления не покидая страницы.
Это бывает
особенно полезно при подборе подходящего класса оформления.
Синтаксис:
// Добавляем ссылку на плагин (данный код должен
располагаться в секции body)
С помощью
класса .ui-widget Вы можете оформить внешний вид виджетов. Данный класс
устанавливает одинаковый шрифт всем вложенным элементам тем самым
стандартизируя вид содержимого виджета.
С помощью
класса .ui-widget-header Вы можете оформить заголовок, а с помощью .ui-widget-content
содержимое виджетов.
Иконки
помогают создать интуитивно понятный пользовательский интерфейс. К примеру Вы
можете добавить иконку в форме знака вопроса на кнопку, которая вызывает окно
со справочной информацией, или добавить иконку в форме конверта на кнопку
отправляющую письмо по электронной почте.
jQuery UI
предлагает для использования более 170 "встроенных" иконок.
Для того,
чтобы вставить иконку необходимо:
Создать элемент, в котором
будет отображена иконка;
Добавить этому элементу класс ui-icon;
Добавить элементу класс соответствующий
желаемой иконке.
Названия
классов иконок в jQuery UI имеют следующий стандартный вид: .ui-icon-[название]-[дополнительное
описание]-[направление].
К примеру,
иконка жирной стрелки направленной направо, имеет следующий класс: .ui-icon-arrowthick-1-e
(arrowthick - "жирная стрелка", e = east - "восток").