jQuery — Описание библиотеки


Содержание

Введение в jQuery

Начало работы с jQuery

Что такое jQuery

Современное веб-программирование и создание веб-сайтов уже невозможно представить без использования языка JavaScript. Однако в настоящее время, все чаще используется не «голый» код javascript, а javascript-фреймворки и библиотеки. Одной из таких библиотек, причем наверное самой популярной на сегодняшний день, является jQuery. По некоторым оценкам не менее половины крупнейших сайтов в интернете используют эту библиотеку.

Хотя мы и можем назвать jQuery библиотекой, он на самом деле понятие «jQuery» объединяет целую экосистему библиотек, построенный вокруг базовой библиотеки: это и библиотека jquery.ui, предназначенная для создания визуальных интерфейсов, это и jqyery.mobile, используемая при разработке мобильных сайтов и др.

Какие преимущества несет нам использование jQuery?

Упрощение работы с кодом . jQuery предлагает простой элегантный синтаксис для манипулирования элементами на веб-странице.

Расширяемость . Весь код jQuery открыт для просмотра и изменения, и в случае, если что-то в библиотеке не устраивает, ее можно модифицировать. А также можно создавать плагины jQuery.

Кроссбраузерность . jQuery имеет поддержку большинства известных браузеров, в том числе таких. как IE 7,8. (Хотя в силу того, что браузеры IE 6-8 постепенно становятся достоянием истории, а также чтобы уменьшить размер библиотеки в последней версии была прекращена поддержка IE 6-8).

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

Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика https://jquery.com/download/. На странице загрузок в самом можно найти несколько версий jQuery. На момент написания данной главы последней доступной версией является 2.0.3. Хотя версии немного отличаются друг от друга, но эти отличия, как правило, не столь существенны, и базовый стержень и общие принципы у большинства версий по сути одни и те же.

Библиотека представлена в двух вариантах — Compressed или Monified (минимизированная) и Uncompressed (обычный). Минимизированные версии предоставляют ту же функциональность, что и обычные, но отличаются тем, что не содержат всяких необязательных символов, наподобие пробелов, комментариев и т.д., и поэтому в своем названии имею суффикс min , например, jquery-1.10.1.min.js. Поскольку они производительнее за счет меньшего объема, их рекомендуется использовать в реальном производстве. В то же время, если вам захочется понять логику кода jQuery, то в этом случае можно обращаться к обычной версии библиотеки.

Библиотека jquery подключается также, как и другие файлы javascript. Например:

В данном случае я использовал минимизированную версию библиотеки jquery — jquery-1.10.1.min.js. Теперь создадим какую-нибудь простенькую веб-страничку с использованием jquery:

Данная веб-страница, с одной стороны, применяет код jquery, с другой стороны, также демонстрирует отличие от использования стандартного кода javascript.

У нас определены на странице две кнопки. У одной кнопки определен обработчик onclick в самой разметке кнопки: onclick=»alert(‘Мир JavaScript’); » .

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

В самом низу страницы мы определим функцию jquery:

Выражение $(function()<>); — это и есть краткое определение функции jquery. Эту функцию принято помещать в конце документа, как в данном случае, перед закрывающем тегом body. Данная функция включает весь код на языке javascript, который будет выполняться при загрузке страницы.

Смысл использованного кода состоит в том, что мы получаем элемент кнопки в выражении $(«#btn1») и затем вешаем на него обработчик нажатия. Фактически выражение $(«#btn1»).click будет аналогично использованию обработчика onclick в теле разметки кнопки. При этом нам не надо никак изменять разметку самой кнопки, что-то туда дописывать. Все делается в функции jquery.

Что в нашем случае она включает? Во-первых, мы устанавливаем цвет кнопки: $(this).css(‘background-color’, ‘red’); . А дальше просто выводим сообщение на экран.

Использование сетей CDN

В предыдущем примере я подключил библиотеку jquery непосредственно с локального диска, однако нам необязательно загружать библиотеку и размещать на локальном диске рядом с прочими файлами. Вместо этого мы можем использовать сети CDN (Content Delivery Networks). В данном случае сама библиотека будет находится физически в какой-либо сети CDN, а мы можем указать на нее ссылку.

Например, подключим библиотеку jquery, находящуюся в jQuery CDN:

Необязательно подключать именно эту версию библиотеки, весь набор доступных версий библиотеки можно найти по адресу https://code.jquery.com/

Также мы можем использовать и другие сети CDN. Например:

Библиотека jQuery

Здравствуйте, уважаемые читатели блога LifeExample, давненько в статье «Пишем интернет магазин на PHP» я ставил себе цель разобраться самому и поведать вам о замечательном инструменте – библиотеке jQuery. Сегодня пришло время сдержать обещание и рассказать о том, что же представляет собой библиотека jQuery и как начать работать с ней.

Многие называют этот инструмент фрэймворком, это не правильно, хотя от названия назначения данного инструмента не меняется, и он остается необходимым сегодня для функционирования практически любого стоящего веб-проекта. На самом деле библиотека jQuery — это единственный JavaScript файл, содержащий в себе набор функций дающих быстрый доступ к любому элементу DOM, а также предоставляющих удобный интерфейс для работы с технологией AJAX.

Кто совсем ничего не слышал о jQuery, приведу примеры использования данного инструмента. Как правило, эта библиотека используется для создания анимационных эффектов на страницах, таких как:

  • Выпадающее и плавающее меню;
  • Фото галерея;
  • Всплывающее окно;
  • Всевозможные слайдеры;
  • Перемещающиеся блоки;
  • Изменение прозрачности элементов;
  • Подсвечивание текста и переливание его цвета разными оттенками;

Второе важное характерное для jQuery применение, наблюдается в создании AJAX элементов, т.е. тех элементов страницы, которые отсылают на сервер данные и получают ответ, без перезагрузки страницы. К примерам таких элементов можно отнести: форму управление корзиной для интернет магазина, пагинацию страниц, вывод информера погоды, и многое другое.

На момент публикации данной статьи актуальной версией библиотеки jQuery являлась версия 1.7.2. Скачать свежую версию библиотеки можно на официальном сайте абсолютно бесплатно.

Попробуем начать работу и напишем простенький скрипт с использованием jQuery библиотеки.

Начало работы с библиотекой jQuery

Если вы еще не скачали библиотеку, скачайте ее с официального сайта:

Поместите скачанный файл в папку сайта, в которой вами уже должна быть создана index.html страничка. Скопируйте ниже приведенный код в содержимое index.html.


Запустите скрипт, и убедитесь, что jQuery уже работает. При обновлении страницы мы получаем надпись «Библиотека jQuery готова к работе!«. Это значит, что мы все сделали правильно. Если вы не получаете такое сообщение, то внимательно смотрите на название и расположение файла с библиотекой, возможно версия будет отличаться и тогда нужно будет подкорректировать строку инициализации файла:

Посмотрите на содержание приведенного кода, и вы увидите не характерную для обычного JavaScript скрипта запись:

Событие ready – означает, что выполнение содержимого будет произведено только после загрузки всей страницы и окончательном формировании DOM. Если бы мы не использовали функционал библиотеки, а работали с чистым JavaScript нам вместо этого пришлось бы использовать такую запись:

Первый скрипт на jQuery

Теперь немного усовершенствуем код, и напишем первый простой плагин:

Перезагрузите страничку и посмотрите, что у нас вышло. Когда DOM сформирован, в событии ready мы получаем содержимое блока с >

(Все события предоставляемые библиотекой jQuery можно посмотреть тут: http://www.linkexchanger.su/2008/60.html)

Затем при нажатии на ссылку класса button, срабатывает обработчик событий — click() библиотеки jQuery , который событием show() показывает нам скрытый текст:

В этом маленьком скрипте, написанном с помощью библиотеки jQuery, мы с легкостью получили объекты DOM’a простыми конструкциями:

$(‘#h > $(‘.button’); // получаем элементы где >

Сравнение с чистым JavaScript

А теперь посмотрите, как бы мы получили тот же самый результат, если бы не использовали jQuery:

Заметьте, тут даже нет задержки показа, а уже код смотрится намного сложнее и неказистее. Это говорит о том, что работа с библиотекой jQuery делает процесс программирования более быстрым, а код более читабельным.

Вам уважаемые читатели, как новичкам в этом деле наверняка будет интересно узнать о других доступных функциях заложенных в библиотеке jQuery, поэтому советую вам следить за публикациями новых статей с помощью RSS и e-mail подписки. В ближайших планах намечена публикация статьи о работе с AJAX и обзор доступных событий jQuery.

Что такое jQuery?

Дата публикации: 2020-12-05

От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с замечательной и популярнейшей javascript библиотекой – jQuery. Мы узнаем, для его она нужна и чем может помочь нам в работе, а также научимся подключать библиотеку jQuery к нашему проекту.

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

Илон Маск рекомендует:  Примеры использования jQuery

Если вы не забыли JavaScript, тогда должны помнить, как непросто выбрать элементы на странице, чтобы затем манипулировать ими. Вспомните все эти длинные названия методов: getElementById, getElementsByClassName и т.п. Писать эту связку слов долго и неудобно на самом деле. Библиотека jQuery позволяет сделать то же самое гораздо проще и понятнее. Сравните хотя бы вот эти две строчки кода:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Обе строки выберут один и тот же элемент – параграф с указанным идентификатором. Но, согласитесь, вторая строка гораздо короче и, что главное, понятнее. Кстати, ее синтаксис, скорее всего, вам мог что-то напомнить. Верно, это CSS селектор — #p – выборка элемента с указанным ID. jQuery для выборки элементов использует тот же синтаксис, что использует и CSS, поэтому если вы знаете CSS – вам будет гораздо проще понять и работать с jQuery. Это дополнительный плюс.

Однако, jQuery хорош не только тем, что обеспечивает выборку любого элемента на странице, при этом выборку гибкую. Используя jQuery вы получаете еще ряд плюсов по сравнению с нативным JS. Вот некоторые из них:

простая работа с событиями;

удобная работа с AJAX (асинхронные запросы к серверу);

удобные методы для работы с эффектами (скрытие / появление элементов с добавлением визуальных эффектов);

и главный плюс – тысячи готовых плагинов на любой вкус (галереи, слайдшоу, работа с формами и другими элементами страницы).

На сегодняшний день знание и работа с библиотекой jQuery – это фактически стандарт для любого веб-разработчика. Без нее не обходится практически ни один проект в сети, поскольку jQuery реально упрощает написание кода на JavaScript.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Давайте же попробуем подключить библиотеку jQuery к нашей странице, тем более что сделать это очень просто. Первый способ – локальное подключение. Заключается он в том, что мы скачиваем jQuery в наш проект и подключаем его. Идем на официальный сайт jQuery и скачиваем актуальную версию библиотеки. На момент написания статьи это версия 3.1.1.

Обратите внимание, мы можем скачать сжатую и несжатую версию библиотеки. Чем они отличаются?

Если мы скачаем обе версии библиотеки, то увидим, что они отличаются весом. Сжатая версия весит 84 Кб, несжатая – 260 Кб. Разница в том, что из сжатой версии убрали все пробелы и переводы строк, а также сократили все имена переменных. В остальном – никакой разницы, т.е. обе версии библиотеки одинаковы и выполняют одну и ту же работу. Рекомендую подключать сжатую версию, поскольку она весит меньше и, следовательно, загрузится быстрее. А зачем же тогда нужна несжатая версия – спросите вы? Она нужна для разработчиков, т.е. для тех, кто захочет заглянуть внутрь библиотеки, чтобы изучить ее детальнее.

JQuery — Описание библиотеки

Only 30kB minified and gzipped. Can also be included as an AMD module

CSS3 Compliant

Supports CSS3 selectors to find elements as well as in style property manipulation


Cross-Browser

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Resources

A Brief Look

DOM Traversal and Manipulation

Get the element with the class ‘continue’ and change its HTML to ‘Next Step. ‘

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp ‘s html with the returned text.

Библиотека jQuery: где скачать, как подключить, основы работы

Неожиданно для себя обнаружил, что на блоге нет, фактически, ни одного упоминания о чумовой библиотеке для работы с JavaScript — jQuery.

Если считаете, что для удобной и быстрой разработки клиентского взаимодействия достаточно обычного JavaSciprt, которые вроде бы и не сложен, могу ответить одно: почти наверняка на вашем пути сложных проектов ещё не встречалось. Конечно, для простейшего взаимодействия со страницей — например, запросить содержимое элемента по его id — библиотеки не нужны. Но представьте, если нужный элемент располагается где-то в недрах кода, и для доступа к нему потребуется пройтись по дереву вышележащих элементов и классов. В этом случае придётся писать свою реализацию для поиска. Однако, сюрпризы только начинаются — код, прекрасно работающий в Firefox, может напрочь отказаться работать в IE или Chrome. Соответственно, придётся либо искать универсальный метод, который бы работал везде, либо использовать «костыли», что довольно долго, т. к. подразумевает дополнение кода проверками работы того или иного метода.

Но хорошая новость присутствует — уже давно есть люди, прошедшие этот путь много лет назад, люди, которые не только знают о множестве подводных камней, но и как их преодолевать. Итак, встречайте одну из лучших JavaScript-библиотек — jQuery!

Что же позволяет этот «зверь»? В самом ли деле нужно изучать основы работы и новый синтаксис ещё одной библиотеки? Если попробуете, то сможете легко получить доступ к элементам страницы с помощью модели построения селекторов в CSS, манипулировать элементами, классами и атрибутами и ещё много чего полезного. Но на самом деле — решать вам. Только учтите, что поработав с jQuery будет сложно заставить себя программировать по старинке, на чистом JavaScript. Ну, я предупредил.

Прежде, чем перейти к основным темам статьи, позволю себе объяснения, которые в дальнейшем пригодятся. Так повелось, что язык гипертекстовой разметки — HTML — постоянно развивался и продолжает это делать сейчас. Начиная с 4-ой версии от него отпочковался XHTML, который предусматривает несколько другую обработку документов — весь код должен быть абсолютно валидным и не содержать ошибок (в противном случае, браузерам разрешается прекращить дальнейшую обработку), в то время, как HTML допускает любые вольности, и все обозреватели обязаны хоть как-то, но отобразить страницу. Чтобы узнать, какую спецификацию поддерживает сайт, достаточно заглянуть в начало кода страницы и найти тег DOCTYPE.

Следующие документы следуют спецификации XHTML:

Спецификация HTML5 имеет упрощённое определение:

В остальных случаях браузеры будут считать, что документ следует рассматривать как HTML 4.01.

Основное значимое отличие — XHTML требует, чтобы все теги были закрытыми. В случае отсутствия у элемента закрывающего тега на конце необходимо использовать слеш /. Кроме того, названия нужно задавать в нижнем регистре. Несколько примеров помогут понять, о чём речь:

8.2. Обращение к элементам

Рассмотрим на примерах варианты обращения. Обращаю внимание, что все основано на синтаксисе CSS.

1. $(p a) выбирает все ссылки, расположенные в абзацах.

2. $(‘ #myId ‘) – выбор элемента с указанным идентификатором.

3. $(‘myClass’) – использование классов.

4. $(‘body>div’) – выбор элементов div, являющихся прямыми потомками элемента body.


5. $(p:even) – четные абзацы.

6. Использование ссылок.

  • a[href^=http://] – этому селектору соответствуют все ссылки, которые начинаются с символов http://, на это указывает символ ^/
  • a[href$=.pdf] – ссылки заканчиваются на «pdf»
  • a[href*=ya.ru] – ссылка содержит упоминание ya.ru в произвольном месте.

7. Имеется возможность выбора определенных элементов при условии, что они содержат другие элементы (в примере ниже двоеточие как в математике означает “такое что”). Например, селектор

выбирает элементы
, которые содержат элемент .

8. Выбор по позиции (некоторые варианты)

:first – первое совпадение на странице;

:last – последнее совпадение на странице;

:first-child – первый дочерний элемент;

:last-child – последний дочерний элемент;

:nth-child(n) – n-й элемент;

:nth-child(even|odd) – четные или нечетные дочерние элементы;

:even – четные элементы;

:odd – нечетные элементы.

9. Выбор элементов на основе характеристик, не предусмотренных спецификацией CSS

:input – выбирает элементы формы;

:selected – выбранные элементы option;

:visible – выбор невидимых элементов.

8.3. Обработчик готовности документа

Первый способ – запуск обработчика, когда загрузилась страница

$(«table tr:nth-child(even) «).addClass(«even»);

Недостаток данного метода заключается в том, что ничего не будет изменено, пока все не загрузится, включая картинки, т.е. пользователь может усмотреть как все изменяется, т.е. увидеть и исходный вариант, и преобразованный.

Второй способ – дождаться только загрузки структуры документа, а именно:

$(«table tr:nth-child(even) «).addClass(«even»);

Т.е. читаем буквально – “Запуск функции после загрузки”. У этой конструкции имеется сокращенная форма:

$(«table tr:nth-child(even) «).addClass(«even»);

8.4. Создание элементов DOM

Пустой элемент можно создать так:

Можно использовать кавычки, можно апострофы. Но наличие тегов обязательно. Задавать просто текст нельзя. Вспомните (лекция 7), сколько было команд, чтобы создать веточку элементов без jquery. Сама по себе эта команда ничего не выведет, надо эту веточку опять же привязать к родительскому элементу. Делается это так:

Здесь a1 – это идентификатор объекта, после которого необходимо вставить элемент.

8.5. Работа с полученным набором значений

В терминах jQuery эти наборы называют обернутыми.

8.5.1. Определение размера. Для этого можно использовать свойство length, а можно метод size().

Пример. Замена содержимого с идентификатором a1 на количество элементов класса b2

8.5.2. Полученный набор значений рассматривается как массив, и с ним мы соответственно и работаем. Получить любой элемент в обернутом наборе можно по индексу. Например, получить второй элемент в наборе всех гиперссылок:

Вместо индексов можно использовать метод get(), т.е. последнюю команду можно записать так:


При помощи метода get() можно получить обычный массив JavaScript, содержащий все обернутые элементы. Пример:

8.5.3. Существуют специальные команды библиотеки, которые позволяют объединять различные полученные наборы, убирать определенные значения по некоторым правилам

8.6. Манипулирование объектами на странице

Команды jQuery позволяют манипулировать свойствами, атрибутами, стилями и содержанием элементов.

Для обращения к свойствам и их значениям используются методы JavaScript, нет методов непосредственно библиотеки.

Пример. Изменяет свойство title у всех элементов класса b2

Здесь использована команда each(функция). Она выполняет обход всех элементов в наборе и вызывает для них функцию. В качестве параметра функции передается индекс элемента в наборе.

8.7. Обработка событий

8.7.1. Различные браузеры по-своему могут обрабатывать события, jQuery пытается сгладить эти неприятности. Поэтому обращаемся только к методам jQuery, а библиотека уже сама смотрит, что за браузер и применяет то или иное свойство.

  • Модель событий jQuery обладает следующими свойствами:
  • поддерживает единый метод установки событий;
  • позволяет устанавливать несколько обработчиков для события;
  • использует стандартные названия типов событий;
  • предоставляет единые методы отмены события и блокирования действий по умолчанию.

8.7.2. Подключение обработчиков. Рассмотрим пример функции, которая будет срабатывать при щелчке по любому рисунку:

Для удаления обработчика используется команда unbind()

8.8. Скрытие и отображение объектов

8.1. Функции hide() и show(). С ними есть некоторые нюансы (например, show показывает изначальное состояние свойства display, поэтому при загрузке рекомендуют скрыть объект при помощи hide()), но в целом все как в примере.

А затем, скажем, по щелчку, $(‘#b3’).show()

8.2. Имеются различные эффекты – раскрывающиеся списки, слайдеры, увеличение рисунков (когда-нибудь надо разобрать подробнее)

8.9. Создания слайдера

Рассмотрим пример создания слайдера – блока с контентом, выползающего по нажатию на конец закладки.

8.9.1. В текст вставляем следующий фрагмент:

9.2. При помощи стилей изначально скрываем панель. Остальные параметры просто описательные – размер, цвет и т.д.

Примеры jQuery для начинающих

Главная → JavaScript → Примеры jQuery для начинающих

jQuery — javascript библиотека, состоящая из кроссбраузерных функций — оплеток для манипулирования элементами DOM (Document Object Model — Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

Чтобы это же действие совершить в jquery, достаточно сделать так:

Обращение к функции $() равносильно jQuery(), так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта — jQuery. Далее, считаем что нет других библиотек.

Начало работы с jQuery

Итак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $(‘#objID’). Где objID — ID объекта.

jQuery и CSS

В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css(). Выглядит в теории это примерно так:

Пример изменения одного атрибута CSS

Пример изменения одного атрибута удался!

Пример изменения нескольких атрибутов CSS

Пример изменения нескольких атрибутов!

Изменение текста и html

Для изменения текста или html кода существуют функции text() и html().


Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

Пример использования text()

Пример использования html()

Управление атрибутами с помощью jQuery

Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

Часть 1. Обзор компонентов и пример использования

Серия контента:

Этот контент является частью # из серии # статей: Библиотека jQuery Mobile

Этот контент является частью серии: Библиотека jQuery Mobile

Следите за выходом новых статей этой серии.

Исторически сложилось так, что производители смартфонов и планшетов не стремятся к унификации и выработке стандартов, и поэтому разработчикам прикладного ПО приходится иметь дело с целым “зоопарком” операционных систем и Web-браузеров. Для выхода из подобной ситуации приходится использовать каркасы (англ. framework), которые позволяют разрабатывать приложения без оглядки на особенности той или иной мобильной платформы.

На сегодняшний день существуют и широко применяются несколько каркасов для создания мобильных приложений. Из известных можно перечислить WebOS, Appcelerator и PhoneGap. В ноябре 2010 командой разработчиков популярной библиотеки jQuery был представлен каркас jQuery Mobile для разработки Web-интерфейсов. На момент написания этой статьи доступна 3-я альфа версия jQuery Mobile, а появление стабильных версий ожидается уже в ближайшее время.

Этот цикл статей посвящен использованию библиотеки jQuery Mobile для разработки Web-приложений для мобильных платформ. В первой статье представлен обзор возможностей и архитектуры jQuery Mobile.

Краткое описание jQuery Mobile

jQuery Mobile — это каркас, построенный на основе библиотеки jQuery и предназначенный для создания Web-интерфейсов, ориентированных на использование в мобильных устройствах. Принцип работы jQuery Mobile можно описать следующим образом: этот каркас, используя стандартные HTML-элементы, расширенные с помощью дополнительных атрибутов, создает элементы соответствующие стилю и требованиям мобильных интерфейсов.

К достоинствам jQuery Mobile можно отнести:

  • короткую «кривую обучения» и легкость использования;
  • небольшой размер (12 Кб в сжатом виде);
  • поддержка широкого ряда мобильных (и немобильных) Web-браузеров;
  • поддержка HTML5;
  • расширенная поддержка HTML-форм;
  • изменение внешнего вида документа (стили);
  • открытый исходный код.

Создание HTML-документа с помощью jQuery Mobile

Легкость применения – это одно из основных преимуществ jQuery Mobile, так как большая часть работы по созданию страниц для мобильного устройства может быть проделана без использования JavaScript. В данной статье рассматривается пример использования jQuery Mobile для создания демонстрационного Web-сайта, состоящего из трех страниц:

  • главная страница;
  • страница с описанием;
  • страница с контактной информацией.

В листинге 1 приведен фрагмент HTML-документа, в котором выполняется подключение библиотеки jQuery Mobile.

Листинг 1. Подключение библиотеки jQuery Mobile

Объявление типа документа говорит о том, что этот документ будет создан с помощью HTML 5. Далее происходит подключение библиотеки jQuery Mobile. Для использования jQuery Mobile необходимо также подключить библиотеку jQuery.

В листинге 2 выполняется определение содержимого документа. jQuery Mobile позволяет размещать в одном документе несколько логических страниц, отмеченных атрибутом data-role со значением page. Каждая страница состоит из трех фрагментов, которые также отмечены атрибутом data-role.

Листинг 2. Определение содержимого документа

Если в одном документе определено несколько страниц, то, по умолчанию, страница, объявленная первой, будет заглавной в этом наборе страниц.

Дополнительные атрибуты

В стандарте языка разметки HTML5 была введена новая функциональность, позволяющая задавать тегам дополнительные атрибуты типа data-*. Вместо символа “*” можно использовать любую последовательность латинских символов, значение для добавляемого атрибута также можно установить любое. Благодаря этому получается простое и эффективное решение для «прозрачного» расширения семантики документа. В листинге 2 атрибут data-role содержит значения, определяющие страницу и её фрагменты.

Этот атрибут повсеместно используется при создании документов в jQuery Mobile. Хорошее знание атрибутов, определенных в jQuery Mobile, и соответствующих им значений является залогом уверенного владения этой библиотекой.

В листинге 3 в документ добавляются еще две страницы.

Листинг 3. Добавление страниц в документ

В листингах 1, 2 и 3 полностью приводится исходный код HTML документа, созданного с помощью библиотеки jQuery Mobile.

Использование ссылок в jQuery Mobile

К внешним ссылкам в библиотеке jQuery Mobile относятся:

  • ссылки на другой домен;
  • ссылки, имеющие атрибут target;
  • ссылки, имеющие атрибут rel со значением external.


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

сообщает сценарию, что кроме загрузки ресурса следует обновить дерево DOM и историю. Если запрос выполняется успешно, то показывается загруженная страница. Если возникает какая-то ошибка, то показывается сообщение об ошибке, а обновления экрана не происходит.

Внутренние ссылки используются в документах, состоящих из нескольких страниц. При этом ссылка на внутреннюю страницу оформляется как «якорь» (символ #) и содержит в атрибуте id название слоя, в котором находится адресуемая страница, как показано в листинге 1.

Также в документах jQuery Mobile можно использовать ссылки вида mailto или tel, которые обрабатываются стандартными способами.

Переходы

Одна из особенностей мобильных Web-интерфейсов, редко встречающаяся в оконных приложениях, — это анимированные переходы между страницами. Так как библиотека jQuery Mobile предназначена для создания Web-интерфейсов для мобильных платформ, то в нее уже встроен набор спецэффектов. В листинге 1 имеется строка, содержащая атрибут data-transition, как показано ниже

Именно этот атрибут определяет характер перехода между страницами. Программисту доступны и другие значения, кроме slide, например:

Названия однозначно говорят о том, как именно будет анимирован переход этого типа.

Отображение верхних и нижних колонтитулов

Как видно из изучения листингов 1, 2 и 3, каждая логическая страница в документе состоит из трех независимых фрагментов с идентификаторами content, header и footer. Фрагмент с идентификатором content предназначен для основного содержимого страницы, а header и footer отвечают за верхний и нижний колонтитулы. Так как мобильные интерфейсы имеют свои особенности, то элементы навигации в них принято размещать в отдельных областях вверху и внизу страницы. Связано это с тем, что место на экране необходимо экономить, и, следовательно, элементы навигации не должны занимать много пространства.

Отображение верхнего и нижнего колонтитула может быть выполнено тремя способами.

В первом, используемом по умолчанию, размещение верхнего и нижнего колонтитула зафиксировано относительно содержимого страницы, и поэтому они перемещаются вместе c содержимым страницы при ее прокрутке пользователем.

Второй способ отображения называется фиксированным, и в этом случае колонтитулы остаются на экране независимо от того, прокручивается страница или нет. Однако колонтитулы появляются или исчезают, когда пользователь кликает в области содержимого страницы. Как активировать этот способ, показано в листинге 4.

Листинг 4. Фиксированное отображение верхнего и нижнего колонтитулов

При использовании последнего способа отображения – полноэкранного, верхний и нижний колонтитулы исчезнут, если пользователь кликнет в области содержимого, но снова появятся при прокрутке страницы. Для активации этого способа необходимо включить фиксированный способ отображения и добавить в тег слоя, определяющего страницу, атрибут data-fullscreen=»true».

Использование элементов управления

Как можно было увидеть, в представленном примере отсутствуют элементы управления, осуществляющие возврат на главную страницу. Это не случайно, так как библиотека jQuery Mobile, если не указано явно, автоматически включает этот элемент навигации в заголовок каждой страницы второго уровня. Если же по какой-то причине этого не требуется, то в тег, описывающий верхний колонтитул, необходимо добавить атрибут data-backbtn=»false».

В jQuery Mobile есть два способа изменить название этой кнопки: прописать в теге верхнего колонтитула атрибут data-back-btn-text=»назад» или сконфигурировать глобальный объект $.mobile, установив в нем необходимое значение для данного свойства $.mobile.page.prototype.options.backBtnText.

По умолчанию, ссылка в документе отображается в виде подсвеченной строки. Если добавить в нее атрибут data-role со значением button, то ссылка превратится в кнопку, как показано ниже:

Кнопки в области содержимого можно объединять в блоки. Код из листинга 5 отобразит на экране мобильного устройства блок кнопок, расположенных одна над другой.

Листинг 5. Блок кнопок

Кнопки можно группировать не только вертикально, но и горизонтально. Для этого следует добавить в контейнер, определяющий группу кнопок, атрибут data-type со значением horizontal. При этом следует особо следить за размером строк внутри кнопок, так как при большой длине строки блок будет разнесен по разным строкам.

Вновь созданная кнопка занимает всю доступную ей ширину экрана. Тем не менее, есть возможность настроить кнопку так, чтобы её ширина определялась длиной строки. Для этого кнопки надо поместить в контейнер, и задать этому контейнеру атрибут data-inline со значением true.

Листинг 6: Встраиваемые кнопки

Верхний и нижний колонтитулы тоже могут содержать кнопки. jQuery Mobile автоматически конвертирует ссылки внутри колонтитулов в кнопки, но элементы, помеченные как кнопки, также распознаются. По умолчанию элементы внутри контейнера размещаются по порядку. В листинге 7 приведен пример размещения двух кнопок в верхнем колонтитуле.

Листинг 7. Добавление кнопок в верхний колонтитул

Если есть необходимость явно указать местоположение кнопки, встроенные CSS классы ui-btn-left или ui-btn-right помогут решить эту задачу. В листинге 8 приведен пример подобного решения. Кнопка “Настройки” выравнивается вправо, кнопка “назад” отключена.

Листинг 8. Позиционирование кнопок с помощью классов

Пиктограммы

Для отображения созданной кнопки можно использовать пиктограмму из стандартного набора. Для этого необходимо присвоить ссылке дополнительный атрибут data-icon, как показано ниже

Значение атрибута data-icon может быть выбрано из списка стандартных значений, например, arrow-l или arrow-r. Полный список можно посмотреть в официальной документации. Местоположение пиктограммы можно задать атрибутом data-iconpos, указав значение из набора left, right, top, bottom. Пиктограмма будет размещена слева, справа, сверху или снизу относительно надписи, размещенной на кнопке.

Создание диалоговых окон

Любая страница может быть выведена в виде диалогового окна. Для того чтобы это сделать, необходимо оформить ссылку следующим образом:

В этом случае загружаемая страница будет оформлена как диалоговое окно, появятся необходимые отступы, свой заголовок и т.п. Если при этом требуется использовать эффект перехода, то в ссылку необходимо добавить атрибут data-transition с одним из значений, описанных выше.

Чтобы закрыть диалоговое окно, достаточно активировать любую ссылку, содержащуюся в нем. Окно будет закрыто и произойдет переход по ссылке. В случае, когда надо закрыть диалоговое окно, не совершая никаких действий, можно создать кнопку со ссылкой на предыдущую страницу и задать для нее атрибут data-rel со значением back. Необходимо учитывать, что, несмотря на то, что диалоговые окна — это обычные страницы, они не учитываются историей браузера.

Заключение

В этой статье был представлен обзор архитектуры и компонентов библиотеки jQuery Mobile. В качестве примера было рассмотрено создание простого HTML-документа, использующего основные возможности jQuery Mobile.

Илон Маск рекомендует:  Как выделить строку с помощью блока с закруглениями
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
HTML XHTML
link link
или

Выборка одного элемента в JavaScript производилась с помощью метода document.getElementById(‘id-элемента’), нескольких — documents.getElementsByTagName(‘тег нужного элемента’), после чего по списку требовалось пробежаться в цикле и выполнить необходимое дейстие. В jQuery это выполняется гораздо проще, а нужное действие можно применить сразу же ко всем элементам. Для выборки служит такая конструкция:

jQuery(‘selector’).func()
где selector — правило, определяющее часть страницы (тег, класс, идентификатор),
func — метод, который будет применён ко всем полученным элементам.

Основные селекторы jQuery

Функциональность очень сходна с аналогичной в CSS, поэтому, если вы верстали документы, будет гораздо проще. Можно выделить следующие:

  • * — универсальный селектор, выбирающий абсолютно все элементы;
  • tag — селектор элементов, представляющий просто название любого тега (например: p, div, span, a); выбираются все запрашиваемые теги на странице;
  • . >

);
elem1 > elem2 — комбинатор «детей» — элеметны elem2, непосредственно вложенные внутрь elem1 (p > b →

), в отличие от предыдущей конструкции, p > i не найдёт ни одного элемента, т. к. i не является прямым потомком p (вложен в b);

  • elem1 + elem2 — комбинатор «следующий брат» — elem2, расположенный (не вложенный!) сразу же после elem1, по сути — следующий элемент (b + i → bi);
  • elem1

    elem2 — комбинатор «нижеследующие братья» — elem2, расположенные (не вложенные!) после elem1, в отличие от предыдущего пункта, ищутся элементы, не обязательно непосредственно следующие за elem1 (b

    i → b span i);

  • elem:first — выбор только первого элемента из всех elem;
  • elem:last — выбор только последнего элемента;
  • elem:eq(n) — выбор только n-ного элемента; нумерация начинается с нуля, запись :eq(n) эквивалентна :first;
  • elem:lt(n) — выбор всех элементов до n-ного;

  • elem:gt(n) — выбор всех элементов после n-ного;
  • elem:even — все чётные элементы (важно знать, что нумерация начинается с нуля, поэтому нулевой эменнт является чётным, хотя в потоке следует первым);
  • elem:odd — все нечётные элементы;
  • elem:visible — видимые элементы;
  • elem:hidden — невидимые элементы.
  • Этого списка должно хватить для получения различных множеств элементов. Как и в CSS, селекторы можно комбинировать для того, чтобы «достучаться» даже до самого глубокого тега:

    table — найти внутри div таблицу, следующую после подзаголовка h2;

  • form.reg input[type=»text»] — все теги , расположенные внутри формы с установлленым классом reg;
  • div > table td — ячейки таблицы, непосредственно вложенной в тег div.
  • jQuery: метод css против свойства style

    На самом деле, нет ничего сложного. Если в обычном JS для манипулирования существовал элемент style, то здесь всё гораздо проще:

    jQuery(‘selector’).css(‘property’, [‘value’])
    где property — CSS-свойство,
    value — значение свойства.

    В случае, года значение не задано, будет возвращено текущее значение свойства. Свойства используются в «чистом виде», т. е. так же, как они записаны в стилях. Для JS пришлось бы писать, например, что-то вроде:

    document.getElementBy ;
    В jQuery код сократится до:

    jQuery(‘#id’).css(‘background-color’, ‘#f0f’);
    Но не забываем, что здесь в качестве селектора можно задать сложное правило — библиотека возьмёт на себя поиск элемента. В чистом JS пришлось бы с этим повозиться.

    Атрибуты элемента: получить, удалить, добавить, изменить

    Получение, добавление или изменение атрибута выполняется аналогично, как и в случае с css, только нужно использвоать другой метод — attr:
    jQuery(‘selector’).attr(‘name’, [‘value’])
    где name — название атрибута,
    value — значение атрибута (если не задано, будет возвращено текущее значение).

    Для удаления атрибута существует специальный метод:
    jQuery(‘selector’).removeAttr(‘property’)

    Классы элемента: удалить, добавить, изменить

    Классы имеют одное интересное свойство — у элемента их может быть сразу несколько. Поэтому набор функций отличается от привычного.

    Добавить класс:
    jQuery(‘selector’).addClass(‘class_name’)
    где class_name — новый класс.

    Удалить класс:
    jQuery(‘selector’).removeClass(‘class_name’)
    Помимо этого есть весьма полезная возможность «переключения» класса. Принцип работы состоит в том, что если элементу уже назначен класс class_name, он (класс) удаляется, если нет — добавляется:
    jQuery(‘selector’).removeClass(‘class_name’)
    И осталась ещё одна функциональность, которой не коснулись — проверка, назначен ли элементу заданный класс (true, если да):
    jQuery(‘selector’).hasClass(‘class_name’)

    Содержимое контейнера — аналог innerHTML

    В JavaScript свойство innerHTML служит для получения или установки всего HTML-содержимого элемента. Для jQuery код упрощается до такого:
    jQuery(‘selector’).html([‘code’])
    где code — HTML-код, который будет присвоен найденным элементам. Если параметр не задать, будет возвращено содержимое (HTML).

    Как удалить элемент в jQuery?

    В отличие от чистого JavaScript, операция вырождается в одну строку кода:
    jQuery(‘selector’).remove()

    Как вставить текст?

    Для JS существует свойство innerText которое, однако, поддерживают не все браузеры. Но мы же не ищем сложных путей, верно?
    jQuery(‘selector’).text([‘str’])
    где str — текст, который будет вставлен. Если параметр не задать, вернётся текущее текстовое содержимое.

    Как узнать количество элементов?

    Элементарно! Нужно прочитать содержимое свойства length:
    var cnt = jQuery(‘selector’).length

    Как скрыть или показать элемент?

    Для этого существует два метода:
    jQuery(‘selector’).hide(); // скрыть
    jQuery(‘selector’).show(); // показать

    Что ещё может jQuery?


    Очень, очень много всего: перехватывать и обрабатывать разнообразные события (например, от мыши или клавиатуры), работать с Ajax (общение с сервером без перезагрузки страницы, например, для организации подгрузки новых сообщений, как это сделано в VK), сериализовать формы для их последующей отправки, создавать элементы и легко добавлять их в требуемое место на странице и прочее.

    Если вы решили непременно изучить jQuery, посмотрите официальные маны, там есть много чего полезного. Сразу предупреждаю, что там информация представлена на английском, но пусть это не страшит — по примерам почти всегда становится ясно, что делает тот или иной метод.

    В случае появления вопросов — жду их в комментариях.

    w3.org.ua

    уроки front-end и back-end

    Рубрики

    Подключение библиотеки jQuery. 4 способа

    Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.

    Способ 1. Скачать в папку и подключить файл

    Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).

    Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:

    w3.org.ua

    уроки front-end и back-end

    Рубрики

    Подключение библиотеки jQuery. 4 способа

    Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.

    Способ 1. Скачать в папку и подключить файл

    Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).

    Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:

    Лекция 8. Библиотека jQuery

    8.1. Введение в jQuery

    jQuery – библиотека JavaScript, которая позволяет получать доступ к любому элементу модели DOM, обращаться к атрибутам и содержимому, а также манипулировать ими. Кроме этого библиотека предоставляет удобный API для работы с технологией AJAX.

    Библиотека была создана в 2006 году. В настоящее время практически каждый сайт использует данную библиотеку.

    Подключив библиотеку jQuery вместо десятков команд на JavaScript можно написать несколько команд. Команды основаны на селекторах и классах CSS.

    Библиотеку jQuery можно скачать с сайта http://jquery.com/ . Размер библиотеки в минимальном варианте составляет примерно 60 Кб.

    Перед началом работы библиотеку надо подключить:

    Вся работа с библиотекой ведется с использованием функции $. Общая идея использования: 1) выбирается элемент или группа элементов, 2) выполняются действия над выделенными элементами.

    Пример. Выделение красным цветом каждой второй строки таблицы (сравните с аналогичным примером из лекции 7).

    1 1 1
    1 1 1
    1 1 1