Что может jquery. Что такое jQuery и зачем он нужен? Приложение – важные факты об jQuery
jQuery — библиотека JavaScript, содержащая в себе готовые функции языка JavaScript, все операции jQuery выполняются из кода JavaScript.
Библиотека jQuery производит манипуляции с html-элементами, управляя их поведением и используя DOM для изменения структуры веб-страницы. При этом исходные файлы HTML и CSS не меняются, изменения вносятся лишь в отображение страницы для пользователя.
Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $() . При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.
Выполнение различных сценариев возможно только после окончания загрузки структуры документа document , когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция
JQuery(document).ready(function() { ... });
Сначала производится обертывание экземпляра document в функцию jQuery() , после применяется метод ready() , которому передается функция function() {...} , исполняемая после загрузки документа.
На практике обычно используется сокращенная форма такой записи jQuery(function() {...}); , или $(function() {...}); .
Для хранения информации при работе с библиотекой jQuery используются переменные JavaScript. В переменных могут храниться элементы. Имена переменных, предназначенных для хранения возвращаемых элементов, начинаются со знака $ , например:
$h = $(".list").parent().parent().detach();
Для хранения нескольких элементов используются массивы JavaScript:
$k = 15;
Правила работы с библиотекой jQuery 1. Как добавить jQuery на веб-страницуДобавить библиотеку jQuery на свою веб-страницу можно двумя способами:
Использовать
версию файла jQuery, размещенную на ресурсах Google
, Microsoft
или jQuery.com
.
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network),
т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.
Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:
После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами .... В результате у вас должно получиться, например,
Загрузить
последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.
Для загрузки нужно перейти по ссылке, и в открывшемся окне щелкнуть правой кнопкой мыши и выбрать «Сохранить как …». После этого поместить файл в нужную папку (обычно для этого используется папка «scripts») и добавить его на вашу страницу:
2. Правила добавления jQuery на страницу
Размещайте
ссылки на jQuery-файл внутри тега .
Размещайте
ссылки на jQuery-файл после ссылок на стили CSS, так как зачастую библиотека jQuery производит манипуляции со стилями элементов веб-страницы.
Размещайте
другие теги ... только после ссылки на файл jQuery, если данный скрипт использует библиотеку jQuery.
Создать пустой html-элемент, например, блок, можно несколькими способами:
1) с помощью краткой формы записи $("")
2) с помощью инструкции $("")
3) с помощью инструкции $("")
Все три способа рабочие, но, тем не менее, рекомендуется включать открывающие и закрывающие теги, чтобы показать, что данный элемент может содержать другие элементы.
При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:
$("",
{src: "images/flower.jpg",
title: "Rose_in_garden",
click: function() {...}
}).appendTo("body");
Таким образом создается элемент с заданными атрибутами и включается в дерево DOM.
Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:
Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания
Поскольку давно не утихают разговоры о ненужности jQuery, я буквально не могу избавиться от мысли, что мы забыли основную ценность jQuery. Время о ней напомнить.
В этой статье хотелось бы всем еще раз рассказать, что же такое jQuery, поскольку сегодня она не менее актуальна, чем на момент появления. Вопрос о ее важности нужно соотнести с исходным назначением всего этого решения (то есть, самого API jQuery), а не с браузерными багами или недостающими возможностями. Если исходить из чего-то другого, то мы рискуем встать на позиции, с которых бракуется любая абстракция, которая может быть не абсолютно необходимой , но, все-таки, мощной и полезной.
Прежде чем я начну пылко отстаивать честь jQuery, давайте вернемся к ее истокам, чтобы всем стало понятно, «что» такое jQuery, и «зачем» она нужна.
- Абстрагируется интерфейс объектной модели документа (он же DOM API).
- Выравниваются все различия реализаций DOM, существующие между браузерами.
- Исправляются известные браузерные баги , связанные с CSS и DOM.
Теперь позвольте объяснить, что я понимаю под “скриптингом HTML-элементов”. При помощи jQuery совершенно тривиально решаются задачи вроде «визуально скрыть второй элемент h2 в документе.html. Код jQuery для такой задачи выглядел бы так:
JQuery("h2:eq(1)").hide();
Давайте немного разберем эту строку с кодом jQuery. Сначала вызывается функция jQuery() , ей мы передаем специальный CSS-селектор библиотеки jQuery, выбирающий второй элемент h2 в HTML-документе. Затем вызывается метод jQuery .hide() , скрывающий элемент h2 . Вот как прост и семантически выразителен код jQuery.
Теперь сравним его с нативным DOM-кодом, который потребовалось бы написать, если бы мы не работали с jQuery.
Document.querySelectorAll("h2").style.setProperty("display","none");
Какой вариант было бы удобнее написать? А читать, а отлаживать? Также учтите, что вышеприведенный нативный DOM-код предполагает, что все браузеры поддерживают использованные здесь методы DOM. Однако оказывается, что некоторые старые браузеры не поддерживают querySelectorAll() или setProperty() . Поэтому вышеприведенный код jQuery вполне нормально работал бы в IE8, а нативный код DOM вызвал бы ошибку JavaScript. Но, все-таки, даже если бы обе строки кода работали повсюду, какую из них было бы проще читать и писать?
Имея дело с jQuery, можно не беспокоиться о том, какой браузер что поддерживает, либо какой DOM API в каком браузере может забарахлить. Работая с jQuery, вы сможете работать быстрее решать задачи на более простом коде, и при этом не беспокоиться, так как jQuery абстрагирует за вас многие проблемы.
jQuery = JavaScript? Поскольку jQuery повсеместно распространена, то вы, возможно, не вполне представляете, где заканчивается JavaScript и начинается jQuery. Для многих веб-дизайнеров и начинающих разработчиков HTML/CSS, библиотека jQuery - это первый контакт с языком программирования JavaScript. Поэтому jQuery иногда путают с JavaScript.Первым делом давайте оговоримся, что JavaScript – это не jQuery и даже не сам DOM API. jQuery – это сторонняя свободная библиотека, написанная на JavaScript и поддерживаемая целым сообществом разработчиков. Кроме того, jQuery не относится к числу стандартов тех организаций (напр., W3C), которые пишут спецификации HTML, CSS или DOM.
Не забывайте, что jQuery служит прежде всего как «сахар» и используется поверх DOM API. Этот сахар помогает работать с интерфейсом DOM, который печально известен своей сложностью и обилием багов.
JQuery – это просто полезная библиотека, которой можно пользоваться при написании сценариев для HTML-элементов. На практике большинство разработчиков прибегают к ней при DOM-скриптинге, поскольку ее API позволяет решить больше задач меньшим количеством кода.
Библиотека jQuery и ее плагины используются разработчиками так широко, что такой код часто нахваливают как самые востребованные сценарии во всем Вебе.
Два краеугольных камня jQuery Две базовые концепции, на которых основана jQuery, таковы: “найди и сделай” и “пиши меньше, делай больше.”Две этих концепции можно развернуть и переформулировать в виде следующего утверждения: первоочередная задача jQuery заключается в организации выбора (то есть, нахождении) или в создании HTML-элементов для решения практических задач. Без jQuery для этого потребовалось бы больше кода и больше сноровки в обращении с DOM. Достаточно вспомнить рассмотренный выше пример с сокрытием элемента h2 .
Следует отметить, что круг возможностей jQuery этим не ограничивается. Она не просто абстрагирует нативные DOM-взаимодействия, но и абстрагирует асинхронные HTTP-запросы (т.н. AJAX) при помощи объекта XMLHttpRequest . Кроме того, в ней есть еще ряд вспомогательных решений на JavaScript и мелких инструментов . Но основная польза jQuery заключается именно в упрощении HTML-скриптинга и просто в том, что с ней приятно работать.
Еще добавлю, что польза jQuery – не в успешном устранении браузерных багов. «Краеугольные камни» нисколько не связаны с этими аспектами jQuery. В долгосрочном отношении самая сильная сторона jQuery заключается в том, что ее API абстрагирует DOM. И эта ценность никуда не денется.
Как jQuery сочетается с современной веб-разработкой Библиотеке jQuery уже десять лет. Она создавалась для той эпохи веб-разработки, которую мы уже безусловно миновали. jQuery не является незаменимой технологией для работы с DOM или выполнения асинхронных HTTP-запросов. Практически все, что можно сделать с jQuery, можно сделать и без нее . А если вас интересует всего лишь пара мелких простых взаимодействий с DOM в одном-двух современных браузерах, то возможно, лучше будет воспользоваться нативными DOM-методами, а не jQuery .Однако, при любых разработках, связанных с BOM (браузерной моделью документа) или DOM, а не только с косметическими взаимодействиями, следует пользоваться jQuery. В противном случае вы станете изобретать велосипед (т.e. элементы абстракций jQuery), а потом испытывать его на всевозможных дорожках (т.e в мобильных браузерах и браузерах для ПК).
Опытные разработчики знают, что такое «стоять на плечах гигантов», и когда следует избегать излишней сложности. В большинстве случаев нам все равно не обойтись без jQuery, когда нужно в сжатые сроки выполнить нетривиальную работу, связанную с HTML и DOM.
Кроме того, даже если бы jQuery не решала ни единой проблемы с DOM или с разношерстными браузерными реализациями спецификации DOM, важность самого API ничуть бы не уменьшилась, поскольку он так удобен для HTML-скриптинга.
Причем jQuery совершенствуется, и с ее помощью программисты могут работать толковее и быстрее. Такова ситуация сегодня, так было и на момент создания библиотеки. Сказать «мне не нужна jQuery» - все равно, что утверждать «обойдусь без lo-dash или underscore.js». Разумеется, можно без них обойтись. Но об их ценности судят не по этому.
Их ценность - в API. Из-за излишней сложности разработка может замедляться. Поэтому нам и нравятся такие вещи как lo-dash и jQuery – с ними все упрощается. А поскольку jQuery облегчает выполнение сложных задач (например, писать сценарии для HTML), она не устареет.
Если вы по-прежнему сомневаетесь, нужна ли jQuery в современной веб-разработке, предлагаю посмотреть следующую презентацию от одного из разработчиков библиотеки, где он обосновывает ее нужность безотносительно наворотов современных браузеров .
Приложение – важные факты об jQuery Наконец, перечислю некоторые важные факты, касающиеся jQuery.- Библиотеку jQuery написал Джон Резиг (John Resig), ее релиз состоялся 26 августа 2006. Джон признавался, что написал этот код, чтобы “произвести революцию во взаимодействии JavaScript с HTML”.
- jQuery считается наиболее популярной и востребованной современной библиотекой JavaScript.
- jQuery – свободное ПО, предоставляемое по лицензии MIT .
- Существует две версии jQuery. Версия 1.x поддерживает Internet Explorer 6, 7 и 8\, а 2.x поддерживает только IE9+. Если вам требуется поддержка IE8, то придется работать с версией 1.x. Но это нормально, обе версии по-прежнему активно разрабатываются .
- Минимальная версия jQuery 2.x имеет размер 82kb. В архиве Gzip - около 28k .разбиением документации API).
- attributes
- callbacks object
- deferred object
- dimensions
- effects
- events
- forms
- internals
- manipulation
- miscellaneous
- offset
- properties
- selectors
- traversing
- utilities
Вначале познакомимся с тем, что же такое jQuery?
Итак, jQuery- это JavaScript-библиотека, обеспечивающая кроссбраузерную поддержку приложений (работает в Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ и Chrome).
Автор библиотеки Джон Резиг (John Resig) впервые представил свое творение в январе 2006 года на компьютерной конференции в Нью-Йорке, а в августе того же года была выпущена первая стабильная версия библиотеки.
За прошедшие годы библиотека претерпела множество изменений и на текущий день содержит функционал, полезный для максимально широкого круга задач. Она имеет небольшой размер (например, размер минимизированной версии- 55,9 Кбайт, а сжатой версии- 19 Кбайт) и не засоряет глобальное пространство имен тривиальными идентификаторами.
Потрясающие возможности механизма селекторов, позволяющие легко получить доступ к любому элементу объектной модели документа, сделали библиотеку jQuery очень популярной.
Судите сами. Чтобы получить ссылку на DOM-элемент с помощью Javascript, обычно используется метод getElementByld (). Например, изменим HTML-код элемента с идентификатором divl.
Document.getElementByld (“divl”).innerHTML = "Новый текст";
Код на jQuery, выполняющий то же самое действие, будет в два раза короче.
$("#divl").html("Новый текст");
Конечно, ради одной этой строки не имеет смысла подключать целую библиотеку. Но все дело в том, что функционал селекторов далеко не ограничивается одним идентификатором. Возможности селекторов можно сравнить разве что с регулярными выражениями языка Perl. В качестве примера изменим цвет текста во всех элементах А, в параметре href которых содержится ссылка на HTML-документ, причем элемент А должен быть расположен внутри элемента DIV, имеющего стилевой класс clsl.
$("div.clsl a").css("color", "red");
Попробуйте выполнить аналогичную операцию с помощью JavaScript. Для этого понадобится далеко не одна строка кода.
Еще одной отличительной особенностью библиотеки jQuery является возможность составлять цепочки из вызовов методов, так как большинство методов jQuery возвращает объект, с которым можно производить дальнейшие манипуляции.
$("#message") // Получили ссылку на элемент с id=message
.html("Сообщение") // Изменили текст внутри элемента
.parent() // Получили ссылку на родительский элемент
.ess("background-color", "#fff4dd") // Задали
цвет
фона
.width(300) // Ширина
.height(200) // Высота
// Плавно отобразили элемент за счет изменения прозрачности
.fadeln(3000);
Библиотека jQuery не оставила без внимания и технологию AJAX, позволяющую обмениваться данными с сервером без перезагрузки веб-страницы. В главе 10 мы изучим базовые свойства и методы объекта XMLHttpRequest, а в главе 11 рассмотрим очень удобный интерфейс доступа к AJAX, предоставляемый библиотекой jQuery.
Благодаря своей универсальности библиотека jQuery будет полезна практически любому разработчику. Она подходит новичку, так как позволяет забыть о проблеме с кроссбраузерностью приложения (вышел новый веб-браузер- сменил версию библиотеки и все опять работает). Библиотека идеальна для профессионалов, так как позволяет сократить код минимум в три раза. А это в свою очередь позволит написать очень сложный код с минимальными усилиями и потерей времени.
Желаю приятного прочтения и надеюсь, что эта книга станет верным спутником в вашей повседневной деятельности и в лучшую сторону изменит ваш стиль программирования на JavaScript.
Основы jQuery
В этой книге предполагается, что все обсуждаемые файлы сохраняются в кодировке UTF-8. Поэтому, прежде чем изучать возможности библиотеки jQuery, рассмотрим, чем отличается UTF-8 от других кодировок и как правильно сохранить файл в этой кодировке.
Все символы, которые мы видим на экране монитора, внутри компьютера хранятся в виде чисел. Каждому символу соответствует определенное число (код символа). Для ответа на вопрос, как должен выглядеть символ, представленный определенным кодом, предназначены таблицы соответствий, которые называются кодировками. Кодировки могут быть одно- и многобайтовыми.
В однобайтовых кодировках символ кодируется одним байтом. Первые 7 бит позволяют закодировать 128 символов, соответствующих кодировке ASCII. В число этих символов входят цифры, буквы латинского алфавита, знаки препинания и некоторые служебные символы (например, перенос строки, табуляция и т.д.).
Коды этих символов одинаковы практически во всех однобайтовых кодировках. Восьмой бит предназначен для кодирования символов национальных алфавитов. Таким образом, однобайтовые кодировки позволяют закодировать всего 256 символов. Для кодирования букв русского языка разработано пять кодировок - windows-1251 (ср1251), ср866, iso8859-5, koi8-r и mac-cyrillic. Сложность заключается в том, что код одной и той же русской буквы в этих кодировках может быть разным. Из-за этого возникает множество проблем.
В кодировке UTF-8 один символ может кодироваться несколькими байтами. Первые 128 символов соответствуют кодировке ASCII и кодируются всего одним байтом. Остальные символы кодируются переменным количеством байтов - от двух до шести (на практике- до четырех).
Буквы русского алфавита и некоторых других европейских языков кодируются двумя байтами. Иными словами кодировка UTF-8 позволяет закодировать символы всех существующих алфавитов и способна заменить все кодировки сразу. Сайт может быть на русском или на любом другом языке, а кодировка будет одна и та же. Этой кодировкой мы и будем пользоваться.
При сохранении файлов в кодировке UTF-8 следует учитывать, что использовать приложение Блокнот для этого нельзя, так как при сохранении в начало файла будут вставлены служебные символы, называемые сокращенно ВОМ (Byte Order Mark, метка порядка байтов). Для кодировки UTF-8 эти символы являются необязательными и не позволят нам в дальнейшем, например, установить заголовки ответа сервера. Для работы с кодировкой UTF-8 необходимо установить на компьютер программу Notepad++.
Скачать программу можно абсолютно бесплатно с веб-страницы http: //notepad-plus. sourceforge.net/ru/site.htm. Из двух вариантов (zip-архив и инсталлятор) сове-тую выбрать именно инсталлятор, так как в этом случае при установке можно будет вы-брать язык интерфейса программы. Процедура установки Notepad++ предельно проста и в комментариях не нуждается. При создании нового документа в меню Кодировки следует установить флажок «Кодировать в UTF-8 (без ВОМ)».
Тот факт, что мы будем использовать кодировку UTF-8, отнюдь не означает, что библиотека jQuery может работать только с этой кодировкой. В своих проектах вы можете использовать любую другую кодировку. Однако следует учитывать, что запросы AJAX по умолчанию выполняются в кодировке UTF-8. При использовании других кодировок придется выполнять перекодирование.
Подключение библиотеки jQuery
Прежде чем использовать библиотеку jQuery, ее необходимо вначале скачать с сайта http://jquery.com/, разместить на своем сервере, а затем подключить к HTML-документу. Подключение производится с помощью тега script, в параметре src которого указывается абсолютный или относительный путь к библиотеке.
Сам тег script должен быть размещен в разделе HEAD HTML-документа.
Библиотеку jQuery можно загрузить и с сайта http://ajax.googleapis.com/. В этом случае подключение будет выглядеть так.
Если посетитель ранее заходил на другой сайт, на котором библиотека jQuery также подгружалась с сайта http://ajax.googleapis.com/, то веб-браузер не будет повторно загружать библиотеку и использует данные, сохраненные в кеше. Таким образом, скорость работы вашего сайта может увеличиться. В этом и заключается преимущество данного метода. Однако если сайт http://ajах.googleapis.сот/ будет не доступен, то возможны проблемы.
Определение готовности документа
Обычно большинство действий производится над элементами HTML-документа. По этой причине выполнять скрипты необходимо только после полной загрузки документа. Без библиотеки jQuery для этой цели обычно используется событие onload объекта window.
window.onload = function() {
alert("Документ полностью загружен");
}
Однако это событие возникает только после полной загрузки самого HTML-документа, а также всех других элементов, например изображений. Загрузка изображений (или баннеров с другого домена) может занимать определенное время, в течение которого выполнение скриптов как бы подвисает.
Библиотека jQuery избавляет нас от потери времени и предоставляет возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Обработать это событие можно с помощью метода ready () .
jQuery(document).ready(function() {
});
Функция jQuery () имеет псевдоним $ (). Используя этот псевдоним, можно обработать событие следующим образом.
alert("Документ доступен для выполнения скриптов");
});
Если в качестве параметра функции j Query () указать ссылку на функцию, то она также будет выполнена сразу после формирования структуры документа.
jQuery(function() {
alert("Документ доступен для выполнения скриптов");
});
Этот код можно еще сократить.
$(function() {
alert("Документ доступен для выполнения скриптов");
});
Необходимо также заметить, что в программе может быть несколько вызовов методов ready (). В этом случае выполнение методов происходит в порядке их объявления внутри программы.
Рассмотрим последовательность событий на примере. Для этого создадим HTML-документ и объявим несколько методов ready (), а также обработаем событие onload (листинг 1.1).
Листинг 1.1.
Последовательность обработки событий
Последовательность обработки событий
window.onload = function() {
alert("Событие
onload");
}
$(document).ready(function() {
alert("Метод
ready(). Вызов
1");
});
$(document).ready(function() {
alert("Метод
ready(). Вызов
2");
});
$(function() {
alert("Вызов
функции
$()");
});
Пример последовательности обработки событий
При выполнении этого примера будет иметь место следующая последовательность событий.
Метод ready(). Вызов 1
Метод ready(). Вызов 2
Вызов функции $()
Событие onload
Как видно из примера, событие onload возникает самым последним, а методы ready () и функция $ () выполняются в порядке их объявления в программе.
Обработка конфликтных ситуаций
Как вы уже знаете, функция jQuery () имеет псевдоним $ (). В некоторых других библиотеках (например, в Prototype) также объявлена функция $ (). Если использовать такие библиотеки одновременно, то возникнет конфликт имен. Библиотека jQuery позволяет избежать этого конфликта. Для этого необходимо вначале подключить конфликтную библиотеку, а затем библиотеку jQuery. Сразу после подключения следует вызвать функцию noConflict().jQuery.noConflict();
В этом случае библиотека jQuery освободит функцию $ () для использования другой библиотекой.
Если результат выполнения функции noConflict() присвоить какой-либо переменной, то ее имя можно использовать вместо функции $ () (листинг 1.2).
Листинг 1.2.
Обработка ситуации конфликта имен
Обработка конфликтных ситуаций
function $() {
alert("Функция $() из другой библиотеки");
}
var jq = jQuery.noConflict();
$(); // Вызов
функции
из
другой
библиотеки
jq("#div1").html("Пример использования библиотеки jQuery");
В этом примере мы присвоили результат выполнения функции noConflict () переменной jq.
Теперь можно использовать это имя в качестве названия функции,
jq("#divl").html("Пример использования библиотеки jQuery");
Если результат нигде не сохранять, то обращение выглядит следующим образом.
jQuery("#divl") .html("Пример использования библиотеки jQuery");
Использовать функцию $ () в данном случае уже нельзя/так как будет вызвана функция из другой библиотеки. Если же необходимо использовать функцию $ () применительно к библиотеке jQuery, то можно поступить следующим образом.
(function($) {
})(jQuery);
Этим способом обычно пользуются при создании расширений (плагинов). Можно также воспользоваться следующим кодом.
jQuery(function($) {
$("#divl").html("Пример использования библиотеки jQuery");
});
Форматы функции $()
Основную функциональность библиотеки jQuery выполняет функция jQuery (), которая имеет псевдоним $ (). Это единственные идентификаторы, которые доступны в глобальной области видимости. Все остальные функции находятся в области имен библиотеки jQuery. Функция $ () поддерживает несколько форматов:
$();
$();
$();
$([, ]).
Если в качестве параметра указать функцию, то она будет выполнена сразу после формирования структуры документа.
$(function() {
alert(“ Документ доступен для выполнения скриптов”);
});
Второй формат функции позволяет указать элемент объектной модели документа. В качестве примера зададим цвет фона для всего документа после загрузки:
$(document).ready(function() {
$(document.body).ess("background-color", "silver");
});
Третий формат функции позволяет создавать новые элементы, которые затем можно будет вставить в определенное место в HTML-документе. Рассмотрим это на примере (листинг 1.3).
Листинг 1.3.
HTML-текст в качестве параметра функции $()
HTML-текст в качестве параметра функции $()
$(document).ready(function() {
$("Вставленный текст").appendTo("#div1");
});
Строка
1
Строка 2
Обратите внимание на следующую строку.
$ (">Вставленный Teкст") . appendTo ("#divl") ;
Здесь мы в функции $ () формируем HTML-текст, а затем с помощью метода appendTo () вставляем его после элемента, имеющего идентификатор divl (id="divl").
При выполнении получим в окне веб-браузера следующий результат.
Строка 1
Вставленный текст
Строка 2
Четвертый формат функции $ () является наиболее часто используемым. Он позволяет получить ссылку на элемент или коллекцию элементов по указанному селектору. В качестве этого параметра указываются селекторы, которые являются частью стандарта CSS, а также некоторые специальные селекторы. Вторым параметром функции $ () может быть указан контекст. Например, ссылка на XML-документ, полученный с сервера в результате AJAX-запроса. Если параметр не указан, то контекстом является текущий документ.
Начинающие разработчики сайтов нередко сталкиваются с понятием jQuery, что это такое, знают единицы. А ознакомление с определением ясности вносит довольно мало.
Разберёмся со значением термина, сферами и случаями использования, а также сделаем краткий экскурс в историю.
Историческая справкаjQuery – это фреймворк, библиотека, созданная для взаимодействия языка программирования JavaScript и языка гипертекстовой . Представлен общественности он был в 2006 году на одной из конференций, посвященных разработкам в области соцсетей и браузеров, которая проходила в Нью-Йорке. Автор проекта – молодой программист Джон Резиг, возглавляющий проект и ныне.
Джон освоил HTML и начал программировать на Basic, и это пришлось парню по душе. Со временем Джон перешел на Visual Basic и занялся дизайном веб-сайтов.
Когда пришло время создать страницу с пользовательским скроллингом, программист очень разочаровался в возможностях используемых языков программирования , и принялся за JavaScript .
Уж его потенциал показался неисчерпаемым в решении появившихся за время использования VB проблем.
Набравшись опыта и создав десятки приложений, Резиг понял, что необходимо закодировать часто используемые фрагменты кода (сделать их в виде функций и подпрограмм) для эксплуатации в любом проекте на
Это и упростит разработку, и снимет все вопросы о браузерной и кроссплатформенной совместимости. Отсюда и началась разработка фреймворка.
ПонятияФреймворк (русский аналог термина – каркас) представляет собой программную платформу, служащую средством определения структуры приложения. Используется в разработке ПО , где необходимо обращаться к значительным и малым фрагментам кода и компонентам, которые и были объединены платформой, в данном случае jQuery .
Библиотека позволяет обращаться абсолютно к любому элементу DOM для изменения его содержимого, структуры, параметров и даже оформления.
Ясность в понимании предыдущего предложения внесёт определения DOM – это универсальный кроссплатформенный (не зависит от используемой и используемого языка программирования) пользовательский интерфейс, посредством коего программы и мини-программы (скрипты) способны открывать и для их корректировки.
При этом правила, условия или ограничения фактически отсутствуют, что открывает перед юзером неограниченные возможности по обработке и изменению содержимого HTML.
Любой известный документ представляется в виде иерархического дерева, в коем каждая ветка и её дочерние элементы – это атрибуты, графические или текстовые объекты.
JDOM – следующий шаг в эволюции объектной модели документа, созданная с учётом всех особенностей Java , в jQuery пока не используется, по крайней мере общественности это не представлено.
Что такое jQuery?Из вышесказанного намного проще понять, что jQuery – это , основанная на взаимодействии вышеназванного мультипарадигменного языка программирования с HTML документами и соответствующего содержимого.
Посредством фреймворка или каркаса, как его чаще называют отечественные разработчики, можно легко получить доступ к гипертекстовой странице и манипулировать её структурой и элементами без каких-либо ограничений.
Основные возможности каркаса:
- обращение к любым элементам DOM для их изменения и обработки;
- совместимость с AJAX;
- огромная библиотека плагинов, особенно касающихся визуального оформления страниц;
- поддержка работы с событиями.
Для тех пользователей, которые уже знакомы с JavaScript, этого вполне достаточной. Они прекрасно знают, насколько трудоёмкой является операция выбора элементов в документе для их изменения.
Это не только долгий процесс, но ещё и весьма неудобный даже для довольно опытных разработчиков. Библиотека же позволит в разы сократить исходный код приложения, упростив его до предела. Новичкам следует на практике увидеть все преимущества фреймворка.
То, что в JavaScript могло растянуться на страницу, в jQuery сокращено в разы.
Так код выглядит на Java:
var elem = document.getElementById(‘abzatc’);
var elem = $(‘#abzatc’);
.
Аналогичный фрагмент кода на jQuery: . Что это, если не упрощение работы? Да и понять, о чём идёт речь во втором случае сможет любой, кто знаком с основными тегами HTML.
Тут даже программистом быть не нужно. Ещё упростит освоение и использование библиотеки знание CSS.
Оба куска кода выберут параграф () с указанным идентификатором для его обработки.
Разобравшись со сферами применения фреймворка и основными преимуществами, которые он даёт разработчику, пришло время рассмотреть и остальные доводы, которые заставляют программистов переходить на jQuery.
Кроссплатформенность и кроссбраузерностьБлагодаря jQuery отпадает необходимость заботиться о синтаксисе и особенностях взаимодействия и операционных систем с кодом ввиду идентичной реализации работы фреймворка во всех средах.
Кстати, крупнейшие поисковые системы уже перешли на jQuery .
Скорость работы с селекторами и простота эксплуатации AJAXНезависимые тесты демонстрируют, насколько быстр jQuery на фоне аналогичных библиотек. И это , когда нужно многократно обращаться к одному элементу.
Молниеносность достигается благодаря использованию селекторов – механизму быстрого обращения к любому объекту .
Google . Вся работа с библиотекой ведётся посредством функции $ и разделяется на два типа:
- сначала получаем нужный объект посредством синтаксиса $() путём передачи функции CSS-селектора, который подпадает под критерий, затем обрабатываем его посредством нужного метода;
- вызываем глобальные методы в указанного в функции $() объекта .
Эксплуатация фреймворка возможна только после полной загрузки страницы на компьютер пользователя.
Фреймворк стал стандартом в разработке веб-страниц. Он содержит в себе необходимый для большинства разработчиков сайтов функционал, который позволит не только ускорить работу страниц и разукрасить их визуально, но и заставит одинаково работать на всех операционных системах и интернет-обозревателях. Для освоения jQuery достаточно начальных навыков в программировании и знаний HTML и основ CSS . Недостающие инструменты легко реализуются посредством скачивания плагинов и написания собственных селекторов.
Придерживаясь формальностей jQuery - это полностью бесплатный javascript фреймворк (framework) (для тех кто не в курсе скажу, что фреймворк - это набор готовых функций для облегчения решения типовых задач). Слова "полностью бесплатный" добавлены потому, что есть и не совсем бесплатные, например ExtJS. На самом деле jQuery гораздо больше, чем просто фреймворк, это новая психология программирования на javascript, если можно так выразиться. Я бы сравнил появление jQuery с появлением самого javascript. И это не просто громкие слова. Те, кто уже работает с jQuery подтвердят, что по прошествии некоторого времени начинаешь забывать структуры обычного javascript кода, а строка
становится такой же обязательной как .
Какие же преимущества привнес jQuery в стандартный набор функций языка, которые позволяют мне говорить о "новой психологии программирования на javascript"?
Во-первых, это отношение к (x)html документу действительно как к xml, а не просто формально из-за разметки. На практике это означает, что я легко могу получить доступ к любому узлу (node) древовидной структуры и его атрибутам, а также свободно перемещаться по ветвям. Например, есть table: view source
1
| one | two | three | four |
| one | two | three | four |
| one | two | three | four |
| one | two | three | four |
view source
1
| one | two | three | four |
| one | two | three | four |
| one | two | three | four |
| one | two | three | four |
one two three four
one two three four
one two three four
Мне захотелось, чтобы каждый td данной таблицы обрел border="1px solid gray" (предполагается, что проблему нужно решить средствами javascript). Стандартными методами это можно сделать, например, так: view source
1
2
3
for (var i = 0; i < rows.length; i++) {
4
5
for (var j = 0; j < tds.length; j++)
6
7
}
view source
1
var table = document.getElementById("test_tbl");
2
var rows = table.getElementsByTagName("tr");
3
for (var i = 0; i < rows.length; i++) {
4
var tds = rows[i].getElementsByTagName("td");
5
for (var j = 0; j < tds.length; j++)
6
tds[j].style.border = "1px solid gray";
7
}
Как видим целых 7 строчек кода, причем я не могу назвать это "свободным" доступом, потому что представьте себе, что бы мне пришлось выписывать, если бы я захотел добавить border только 3-й ячейке 2-й строки, при условии, что ячейки не имеют уникальных идентификаторов...
Теперь как это делается с помощью jquery: view source
1
view source
1
$("#test_tbl td").css("border","1px solid gray");
Одна строка! Как вам? А теперь 3-я ячейка 2-й строки: view source
1
view source
1
$("#test_tbl tr:eq(1) td:eq(2)").css("border","1px solid gray");
Опять одна строка! Неплохо правда? А ведь это самые простые вещи, основы, в javascript это изначально должно было быть так просто! Вам наверняка потребуется время, чтобы привыкнуть думать в таких категориях.
Во-вторых, jQuery совершил революцию в области html-javascript шаблонизации. До момента его появления последнее было если не принципиально невозможным, то уж настолько трудозатратным, что не многие отваживались с этим связываться, а само выражение "html-javascript шаблонизации" вызывало в лучшем случае улыбку. Широко бытовало мнение, что шаблонизация рациональна только средствами серверных языков программирования, но jQuery, благодаря развитому механизму обработки событий, позволил уже на уровне javascript отделить логику от представления. Рассмотрим пример, и вы поймете о чем я говорю. Несколько изменим нашу таблицу: view source
01
| one | two | three | edit del |
| four | five | six | edit del |
| seven | eight | nine | edit del |
| ten | eleven | twelve | edit del |
27
28
29
30
31
32
33
view source
01
| one | two | three | edit del |
| four | five | six | edit del |
| seven | eight | nine | edit del |
| ten | eleven | twelve | edit del |
27
28
29
30
31
32
33
one two three edit del
four five six edit del
seven eight nine edit del
ten eleven twelve edit del
Как видите, это чистый html. Дизайнер может издеваться над стилями сколько угодно, лишь бы сохранялись названия классов. А вся логика теперь сосредоточена в script блоке: view source
01
var tr;
02
03
function appearence(){
04
05
}
06
07
08
09
for(var i=0; i
