Главная · Карта сайта · Поиск · Статьи · Компьютерные курсы · Обучающие программы · Открытые проекты · Веб-программирование · Создание интернет-сайта · Полезные ссылки · Глоссарий · Контакты · Декабрь 09 2016 20:21:51
Последнее опубликованное

Что такое Model-View-Controller
Pattern Model-View-Controller

Как создать свой веб-сайт
Как создать свой сайт в интернете

Разное
Статистика

Библиотека jQuery


jQuery

Что такое jQuery

jQuery – это библиотека различных полезных программных сервисов для манипуляции элементами html разметки загруженной страницы. Написана она на JavaScript. Прелесть ее не только в том, что она обладает достаточно серьезными возможностями, но и в том, что ее программный интерфейс прост до безобразия.

Перед тем, как перейти к описанию jQuery, еще раз напомню, что такое объектная модель документа или DOM (Document Object Model). DOM – это иерархическая структура объектов в оперативной памяти, соответствующая структуре загруженной интернет страницы. DOM формируется браузером и предоставляет программный интерфейс для работы с элементами разметки, например, с использованием того же JavaScript. Средствами DOM вы можете искать, добавлять и удалять элементы документа, редактировать их атрибуты, менять стили и т.д. Другими словами, с помощью DOM и JavaScript создаются динамические интернет страницы, которые еще называют DHTML страницам (Dynamic HTML pages). Вернемся к библиотеке jQuery. С помощью программного интерфейса jQuery вы легко можете выбрать нужные вам элементы DOM и выполнить с ними любые действия из нижеприведенного списка:

  • Изменить CSS стиль;
  • Отредактировать атрибутный состав;
  • Удалить;
  • Добавить потомков;
  • Переместить или обернуть другим элементом;
  • Выполнить копирование;
  • Привязать обработчик события;
  • Настроить визуальный эффект или анимацию;
Безусловно, все это можно сделать средствами “голого” DOM и JavaScript, но зачем, если есть уже готовый и бесплатный набор инструментов. Не стоит забывать и про кроссбраузерность. Если вам необходимо, чтобы ваша страница работала одинаково под управлением всех популярных браузеров, то для этого необходимо приложить немало усилий, поскольку существует довольно большой список того, что различные браузеры реализуют по-разному. Если вы работаете через интерфейс jQuery, то об этой проблеме вы можете забыть. Естественно, что программы пишут люди, и в jQuery могут быть ошибки, но в этом случае вы можете рассчитывать на то, что проблему устранят в ближайшее время. Если вы знакомы с базовыми шаблонами веб-дизайна, имеете представление о том, что такое HTML, CSS и JavaScript, то самое время освоить работу с jQuery. С появлением этой замечательной библиотеки возможности профессионалов и начинающих веб-дизайнеров несколько выровнялись, что, возможно, огорчает первых, но воодушевляет вторых. Может быть, я несколько и преувеличиваю, но то, что теперь каждый, не особо искушенный в тонкостях программирования на JavaScript имеет довольно серьезный арсенал для создания эффектных, быстрых и надежных DHTML страниц - неоспоримая заслуга jQuery.

Подключение jQuery

Для начала нужно скачать библиотеку. Сделать это можно на сайте авторов jQuery: http://jquery.com. Далее, необходимо ее просто подключить с помощью тега <script> примерно так:

<script type="text/javascript" src=" jquery-1.7.2.js"></script>
Все, можно начинать с ней работать. Если желания скачивать нет, то можно указать ссылку прямо на последнюю версию библиотеки, расположенную на сервере разработчика:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Ссылаться на последнюю версию с одной стороны хорошо, поскольку в ней постоянно устраняют какие-то ошибки и оптимизируют работу отдельных ее функций, но, с другой стороны, в новой версии могут появиться изменения, которых вы не ожидаете, и которые приведут к изменениям в работе вашего проекта.

Программный интерфейс или синтаксис jQuery

Я уже сказал, что синтаксис запросов jQuery достаточно прост. Именно запросов, поскольку программирование на JavaScript с использованием jQuery можно отнести к декларативному программированию, которое отличается от классического процедурного программирование тем, что вы описывает “что нужно сделать”, а не “как сделать”. В названии библиотеки отражена ее суть – язык запросов в контексте JavaScript. Все запросы на jQuery начинаются вызовом функции $, аргументом которой является сам запрос. Итак, обобщенный синтаксис jQuery запроса выглядит примерно так:

$(запрос)[{.фильтр(критерий)}].действие(аргументы){ .действие(аргументы)}
Запрос – это селектор или список селекторов, разделенных запятой. Синтаксис запроса совпадает с синтаксисом селекторов CSS стилей. Таким образом, запрос jQuery может начинаться примерно так:
$(“div”) - выбор всех элементов div;
$(“div, p”) – выбор всех элементов div и элементов p;
$(“.class_name”) – выбор всех элементов класса class_name;
$(“#element_id”) – выбор элемента с идентификатором element_id;
$(*) – выбор вообще всех элементов;
$(“.class_name span”) – выбор всех элементов span в рамках всех элементов класса class_name;
$(“#element_id > div”) – выбор всех элементов div, являющихся прямыми потомками (дочерними элементами) элемента с идентификатором element_id.
$(“#element_id .class_name + div”) – выбор всех элементов, которые следуют сразу за элементами класса class_name в рамках элемента element_id.
$(“#ul_id > li:first”) – выбор первого элемента li списка ul_id. Также, можно выбрать последний last элемент либо все четные even или нечетные odd элементы. Есть и другие варианты.
$(“a[href^=’http://ru.wikipedia.org’]”) – выбор всех ссылок со значением атрибута href, начинающегося на “http://ru.wikipedia.org”. Без символа “^” получим условие на полное совпадение значений, если вместо символа “^” поставим символ “$”, то получим ограничение на совпадение с конца, а символ * будет означать, что значение атрибута должно просто содержать указанный фрагмент.

Фильтр – способ отфильтровать набор выбранных элементов по дополнительным критериям. Критерии – это те же селекторы. Есть две противоположные друг другу операции: filter и not. Если использовать операцию filter(критерий), то выбранными останутся только те элементы, которые удовлетворяют аргументу - критерию, а если not, то останутся только те, что не удовлетворяют. Обычно, смысл имеет использовать операцию not, поскольку критерий операции filter обычно легко объединить с основным селектором функции $(). Вот пара примеров использования этих операций:
$(“div”).not(“.class_name”) – исключаем все div класса class_name;
$(“td, th, div”).filter(“.class_name”) – отбираем элементы td, th, div класса class_name.

Есть еще операция slice(from, to), которая позволяет выделить последовательность элементов с индексами из промежутка [from - to].

Действие – это, собственно, само действие – некоторая операция над множеством выбранных элементов. Каждая операция возвращает некий результат: либо то же самое множество, если операция не связана с созданием новых или удалением выбранных элементов, либо уже отредактированное множество, либо набор вновь созданных элементов. Благодаря этому вы можете указать сразу несколько операций, разделенных точками. Приведенный ниже пример выполнит отбор всех элементов span, не относящихся к классу class_name и скопирует их в элемент с идентификатором target:
$("span").not(".class_name").clone().appendTo("#target");

Результат каждой операции – это массив элементов HTMLElement. Размер массива можно узнать с использованием свойства length или функции size(). Аргументами операций могут быть не только строковые параметры, но и результаты других запросов. Вот пример того, как результат одного запроса можно поместить внутрь элемента, который, в свою очередь, являются результатом другого запроса:
$("span").not(".class_name").clone().appendTo($("span.class_name"))

В качестве аргумента можно использовать не весь результат запроса, а отдельный его элемент:
$("span.class_name").append($("span").not(".class_name")[0]);

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

Операции jQuery

Ниже представлены сводные таблицы с операциями jQuery, их кратким описанием и ссылками на те примеры, которые демонстрируют их применение на практике.

Свойства

Возвращают или устанавливают значения различных свойств выбранных элементов. Если необходимо определить новое значение свойства, то его следует передать в качестве аргумента, например, $(“#element”).text(text_value) или $(#element”).html(html_value):

НаименованиеОписаниеПример
text()Текст.-
offset()Смещение {left, top}.Игра 'Арканоид', функция перемещения шарика ball.move():
$("#ball").offset({left:$("#ball").offset().left + this.dx,
top:$("#ball").offset().top + this.dy});
Данная функция вызывается по таймеру каждые 10 миллисекунд.
width(), height()Ширина и высота.-
html()html разметка внутри выбранных элементов.

Игра 'Арканоид', функция вывода информации об очках и количестве попыток pa.showInfo():

$('#info').html("$" + this.score + "
" + _try_count_balls);

Альтернативная главная страница, функция обработки AJAX запросов OnComplete(html):

function OnComplete(html)
{$('#content').html(html);} 
чтение: attr(name)
запись: attr(name, value)
Значение указанного атрибута.-

Индикаторы

Возвращают true или false. Их можно использовать в логических выражениях условных операторов и циклов:

НаименованиеОписаниеПример
hasClass(class)Имеют ли выбранные элементы указанный класс.-
is(expression)Проверяет истинность выражения для выбранных элементов, например: is(“:first-child”).-

Методы

Выполняют определенные действия с выбранными элементами:

НаименованиеОписаниеПример
css(parameter, value)Определяет значение параметра CSS стиля, например:
$(“#div_id”).css(“box-shadow”, “inset 0px 0px 20px #fff;”)
-
addClass(class),
removeClass(class),
toggleClass(class)
Добавляет, удаляет и переключает (если нет, то добавляет, если есть, то удаляет) для выбранных элементов указанный класс, например:
$(“div”).addClass(“divClass”);
-
append(source),
prepend(source)
Добавляет во все выбранные элементы (в конец - append, в начало - prepend) указанную разметку или результат другого запроса, например:
$("#target").append($("span:last"));
Игра 'Арканоид', формирование массива 'кирпичей', функция pa.initBricks():
for (var i = 0; i < _bricks_lines; i++)
     for (var j = 0; j < _bricks_line; j++)
            $("#playing-area").prepend("<div id='brick_"+i+"_"+j+...
               + "</div>");
appendTo(target),
prependTo(target)
Добавляет выбранные элементы в указанный в качестве аргумента элемент, например:
$("span:first").appendTo($("span:last"));
-
after(source),
before(source)
Добавление указанного в качестве аргумента содержимого перед или до выбранных элементов.-
insertAfter(target),
insertBefore(target)
Добавление выбранных элементов до или после указанного в качестве аргумента содержимого.-
wrap(wrapper),
wrapAll(wrapper),
wrapInner(wrapper)
Обертывание каждого, всех или только внутреннего содержания выбранных элементов указанной оберткой, например:
$("span").wrapAll("");
-
replaceWith(new),
replaceAll(old)
Операции замещения: замещение выбранных элементов новой разметкой или замещение указанной в качестве аргумента разметки выбранными элементами.-
empty()Удаляет у выбранных элементов все содержимое.-
remove()Удаляет выбранные элементы.Игра 'Арканоид', удаление всех оставшихся 'кирпичей':
$('.brick').remove();
clone()Копирует выбранные элементы (в память). Далее, созданные копии можно использовать в качестве аргументов других операций, например:
$("span").not(".class_name").clone().appendTo("#target");
-
removeAttr(attribute)Удаляет указанный атрибут у всех выбранных элементов.-
ready(handler), mousemove(handler),
mousedown(handler), click(handler),…
Добавляют обработчики соответствующих наименованию метода событий (onload, onmousemove, onmousedown, onclick), например:
$(document).mousemove(function(event){…})
Игра 'Арканоид', инициализация страницы:
$(document).ready(function() 
 {
  //Создание объектов
    ...

  $(document).mousemove(function(event) 
              {
                //Перемещение платформы 
                  ...
              })

  $(document).mousedown(function(event) 
              {
                //Запуск шарика 
                  ...
              })
})
bind(event, handler)Добавляет обработчик события по идентификатору события, например:
$(“#button”).bind(“click”, function(){…})
-
hover(over, out)Добавляет обработчики событий mouseover и mouseout.-
hide(delay, callback),
show(delay, callback),
toggle(delay, callback)
Управляют видимостью элементов с возможностью указать скорость изменения видимости и обработчик завершения переключения.Игра 'Арканоид', удаление 'кирпича' после попадания шарика, функция ball.move():
$("#"+_brick.id).hide(200,
function(){$("#"+this.id).remove()});
slideUp(delay, callback),
slideDown(delay, callback),
slideToggle(delay, callback)
Позволяют сворачивать и разворачивать выбранные элементы с возможностью указать скорость сворачивания и обработчик завершения сворачивания.-
fadeIn(delay, callback),
fadeout(delay, callback),
fadeTo(delay, target_opacity, callback)
Позволяют плавно управлять прозрачностью элементов от 0 до 1. Метод fadeTo позволяет плавно установить прозрачность до определенного target_opacity значения.Игра 'Арканоид', визуальный эффект при отскоке шарика от платформы, функция ball.move():
$("#platform").fadeTo(200, 0.5,
function() {$("#platform").fadeTo(200, 1)});
animate(target_style, delay)Позволяет плавно изменить текущие параметры стиля выбранных элементов до установленных target_style значений, например, переместить элемент: $(“#object”).animate({left: new_left, top: new_top}, 1000);-

Читать дальше: jQuery и AJAX

Компьютерные курсы и курсы программирования
Основы программирования

Курс для начинающих программистов на C# и VB.NET.

SQL 25™

Построение SQL запросов и работа с базой данных.

C# Quick Guide™

Программирование на C#. Краткое руководство.

RegEx

Применение регулярных выражений.

Plug-in архитектура

Примеры программной Plug-in архитектуры.

XML и его расширения

Язык разметки XML и его расширения с примерами.

HTML и разметка гипертекста

Языки HTML, XHTML и CSS с примерами разметки.

Основы веб-дизайна

Основы веб-дизайна: решения типовых задач верстки.

Программирование на PHP

Руководство по программированию на PHP для начинающих.

Справочные материалы

Шаблоны проектирования
Каталог шаблонов проектирования программных компонентов.

Рефакторинг кода
Каталог приемов рефакторинга программного кода.

Гость
Имя

Пароль



Забыли пароль?
Запросите новый здесь
.
Coding Craft. Все права защищены © 2011. Проект Инициативного Народного Фронта Образования - ИНФО-проект.