JQuery - что это такое. Изучаем Java Как добавить jQuery на веб-страницу
JavaScript и jQuery
Что такое jQueryjQuery – это библиотека различных полезных программных сервисов для манипуляции элементами html разметки загруженной страницы. Написана она на . Прелесть ее не только в том, что она обладает достаточно серьезными возможностями, но и в том, что ее программный интерфейс прост до безобразия.
Перед тем, как перейти к описанию jQuery, еще раз напомню, что такое объектная модель документа или DOM (Document Object Mode l). DOM – это иерархическая структура объектов в оперативной памяти, соответствующая структуре загруженной интернет страницы. DOM формируется браузером и предоставляет программный интерфейс для работы с элементами разметки, например, с использованием того же JavaScript. Средствами DOM вы можете искать, добавлять и удалять элементы документа, редактировать их атрибуты, менять стили и т.д. Другими словами, с помощью DOM и JavaScript создаются динамические интернет страницы, которые еще называют DHTML страницам (Dynamic HTML pages). Вернемся к библиотеке jQuery. С помощью программного интерфейса jQuery вы легко можете выбрать нужные вам элементы DOM и выполнить с ними любые действия из нижеприведенного списка:
- Изменить ;
- Отредактировать атрибутный состав;
- Удалить;
- Добавить потомков;
- Переместить или обернуть другим элементом;
- Выполнить копирование;
- Привязать обработчик события;
- Настроить визуальный эффект или анимацию;
Для начала нужно скачать библиотеку. Сделать это можно на сайте авторов jQuery: http://jquery.com . Далее, необходимо ее просто подключить с помощью тега примерно так:
Все, можно начинать с ней работать. Если желания скачивать нет, то можно указать ссылку прямо на последнюю версию библиотеки, расположенную на сервере разработчика: Ссылаться на последнюю версию с одной стороны хорошо, поскольку в ней постоянно устраняют какие-то ошибки и оптимизируют работу отдельных ее функций, но, с другой стороны, в новой версии могут появиться изменения, которых вы не ожидаете, и которые приведут к изменениям в работе вашего проекта.
Программный интерфейс или синтаксис 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”
. Без символа “^” получим условие на полное совпадение значений, если вместо символа “^” поставим символ “$”, то получим ограничение на совпадение с конца, а символ * будет означать, что значение атрибута должно просто содержать указанный фрагмент.
Фильтр
– способ отфильтровать набор выбранных элементов по дополнительным критериям. Критерии – это те же селекторы. Есть две противоположные друг другу операции: 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"));
Таким образом, аргументом операции может быть либо селектор в виде строки, либо результат другого запроса, либо любой экземпляр 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 разметка внутри выбранных элементов. |
От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с замечательной и популярнейшей javascript библиотекой – jQuery. Мы узнаем, для его она нужна и чем может помочь нам в работе, а также научимся подключать библиотеку jQuery к нашему проекту.
Итак, что же такое jQuery. jQuery – это javascript библиотека, т.е. библиотека, написанная на языке JavaScript. Проще говоря, это некий набор готовых функций, которые упрощают жизнь разработчика и написание кода на JavaScript.
Если вы не забыли JavaScript, тогда должны помнить, как непросто выбрать элементы на странице, чтобы затем манипулировать ими. Вспомните все эти длинные названия методов: getElementById, getElementsByClassName и т.п. Писать эту связку слов долго и неудобно на самом деле. Библиотека jQuery позволяет сделать то же самое гораздо проще и понятнее. Сравните хотя бы вот эти две строчки кода:
var elem = document.getElementById("p"); var elem = $("#p");< p id = "p" > < / p >
var elem = document . getElementById ("p" ) ; var elem = $ ("#p" ) ;
|
JavaScript. Быстрый старт
Обе строки выберут один и тот же элемент – параграф с указанным идентификатором. Но, согласитесь, вторая строка гораздо короче и, что главное, понятнее. Кстати, ее синтаксис, скорее всего, вам мог что-то напомнить. Верно, это CSS селектор — #p – выборка элемента с указанным ID. jQuery для выборки элементов использует тот же синтаксис, что использует и CSS, поэтому если вы знаете CSS – вам будет гораздо проще понять и работать с jQuery. Это дополнительный плюс.
Однако, jQuery хорош не только тем, что обеспечивает выборку любого элемента на странице, при этом выборку гибкую. Используя jQuery вы получаете еще ряд плюсов по сравнению с нативным JS. Вот некоторые из них:
простая работа с событиями;
кроссбраузерность;
удобная работа с AJAX (асинхронные запросы к серверу);
удобные методы для работы с эффектами (скрытие / появление элементов с добавлением визуальных эффектов);
и главный плюс – тысячи готовых плагинов на любой вкус (галереи, слайдшоу, работа с формами и другими элементами страницы).
На сегодняшний день знание и работа с библиотекой jQuery – это фактически стандарт для любого веб-разработчика. Без нее не обходится практически ни один проект в сети, поскольку jQuery реально упрощает написание кода на JavaScript.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Давайте же попробуем подключить библиотеку jQuery к нашей странице, тем более что сделать это очень просто. Первый способ – локальное подключение. Заключается он в том, что мы скачиваем jQuery в наш проект и подключаем его. Идем на официальный сайт jQuery и скачиваем актуальную версию библиотеки. На момент написания статьи это версия 3.1.1.
Обратите внимание, мы можем скачать сжатую и несжатую версию библиотеки. Чем они отличаются?
Если мы скачаем обе версии библиотеки, то увидим, что они отличаются весом. Сжатая версия весит 84 Кб, несжатая – 260 Кб. Разница в том, что из сжатой версии убрали все пробелы и переводы строк, а также сократили все имена переменных. В остальном – никакой разницы, т.е. обе версии библиотеки одинаковы и выполняют одну и ту же работу. Рекомендую подключать сжатую версию, поскольку она весит меньше и, следовательно, загрузится быстрее. А зачем же тогда нужна несжатая версия – спросите вы? Она нужна для разработчиков, т.е. для тех, кто захочет заглянуть внутрь библиотеки, чтобы изучить ее детальнее.
Итак, подключаем библиотеку:
jQuery
< ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > jQuery < / title > < / head > < body >
< / body > < / html > |
Вот и все, библиотека jQuery подключена и мы можем использовать ее возможности, с которыми будем знакомиться в следующих уроках. Еще один способ подключения jQuery – использование CDN, проще говоря, удаленное хранилище ресурсов. Например, мы можем подключить jQuery с
jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии JavaScript, HTML и CSS.
Что умеет jQuery
- Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими.
- Работать с событиями.
- Легко осуществлять различные визуальные эффекты.
- Работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы, но пока мы ее трогать не будем).
- Имеет огромное количество плагинов, предназначенных для создания элементов пользовательских интерфейсов.
Как это работает
Сначала надо скачать саму библиотеку на сайте разработчиков или , при необходимости разархивировать и перенести ее (библиотеку) в ту же папку, где лежат наши html-страницы (это необязательно, но адреса для всех последующих примеров будут написаны, исходя из такой структуры).
Теперь нам надо подключить jQuery к html-странице. Для этого, как вы помните, в html существует тег , который и отвечает за подключение внешних файлов скриптов (). Добавим этот тег в html-страницу (так же мы подключали страницу script.js с функциями js): * Обратите внимание на имя файла. Здесь используется библиотека jquery-1.2.6, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.*
Итак, у нас в папке лежат html-страница, страница со стилями (style.css), страница с js-функциями (script.js) и (jquery-1.2.6.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):
Эффекты jQuery Эффект Show() Эффект SlideDown() Эффект Animate() Давайте посмотрим, как это сделано. На html-странице у нас должно быть три прямоугольника (div-ы) и три кнопки: Эффекты jQuery Эффект Show() Эффект SlideDown() Эффект Animate()Оформим внешний вид и сделаем прямоугольники невидимыми с помощью . Код style.css:
#kv1, #kv2, #kv3{ width:80px; height:100px; float:left; background:red; margin:5px; color:white; display:none; }
Теперь самое интересное, на странице script.js пишем код функций, которые будут срабатывать при нажатии на кнопки:
function addEffect1(){ $("#kv1:hidden").show(); } function addEffect2(){ $("#kv2:hidden").slideDown("slow"); } function addEffect3(){ $("#kv3:hidden").show().animate({ fontSize:"36px" } , 3000); }
Что же делают эти функции?
Функция addEffect1() видит $ ("#kv1:hidden") и понимает, что ей нужно найти элемент с id="kv1", обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым.
Функция addEffect2() видит $ (знак доллара) и понимает, что это jQuery, затем она видит ("#kv2:hidden") и понимает, что ей нужно найти элемент с id="kv2", обладающий свойством hidden (невидимый). Далее она видит .slideDown("slow") и понимает, что найденный элемент надо медленно ("slow") отобразить сверху-вниз (slideDown).
Функция addEffect3() видит $ (знак доллара) и понимает, что это jQuery, затем она видит ("#kv3:hidden") и понимает, что ей нужно найти элемент с id="kv3", обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым. Затем она видит .animate({fontSize:"36px"} , 3000) и понимает, что размер шрифта нужно за 3 секунды (3000) увеличить до 36 пикселей (fontSize:"36px")
Вот так собственно и работает jQuery. Посмотрите какие короткие у нас функции и представьте какими бы они были, если бы мы решили написать их на чистом javascript. Ну разве ли jQuery не прелесть? О том, как делать графические эффекты, анимацию, перетягивать и сортировать предметы и вообще работать с этой библиотекой и пойдет речь в последующих уроках.
В конце же этого урока хотелось бы поговорить об основных понятиях jQuery. Приблизительно синтаксис оператора jQuery можно представить следующим образом:
Где селектор - элемент или элементы, с которыми мы будем что-либо делать.
действие - что именно мы будем делать с выбранными элементами. Мы можем добавить какой-либо эффект, css-стиль, изменить html-код и т.д. Здесь же могут быть указаны какие-либо события.
свойства действия - если они предусмотрены действием.
На сегодня пожалуй все, в следующем уроке будем изучать селекторы.
Последнее обновление: 1.11.2015
Что такое 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).
Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика https://jquery.com/download/ . На странице загрузок в самом можно найти несколько версий jQuery. На момент написания данной главы последней доступной версией является 2.0.3. Хотя версии немного отличаются друг от друга, но эти отличия, как правило, не столь существенны, и базовый стержень и общие принципы у большинства версий по сути одни и те же.
Библиотека представлена в двух вариантах - Compressed или Monified (минимизированная) и Uncompressed (обычный). Минимизированные версии предоставляют ту же функциональность, что и обычные, но отличаются тем, что не содержат всяких необязательных символов, наподобие пробелов, комментариев и т.д., и поэтому в своем названии имею суффикс min , например, jquery-1.10.1.min.js . Поскольку они производительнее за счет меньшего объема, их рекомендуется использовать в реальном производстве. В то же время, если вам захочется понять логику кода jQuery, то в этом случае можно обращаться к обычной версии библиотеки.
Библиотека jquery подключается также, как и другие файлы javascript. Например:
Мир jQuery
В данном случае я использовал минимизированную версию библиотеки jquery - jquery-1.10.1.min.js. Теперь создадим какую-нибудь простенькую веб-страничку с использованием jquery:
Мир jQuery Добро пожаловать в мир jQuery jQuery JavaScript $(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир jQuery"); }); });
Данная веб-страница, с одной стороны, применяет код jquery, с другой стороны, также демонстрирует отличие от использования стандартного кода javascript.
У нас определены на странице две кнопки. У одной кнопки определен обработчик onclick в самой разметке кнопки: onclick="alert("Мир JavaScript"); " .
Другая же кнопка делает практически тоже самое, но только с jquery. Для этой кнопки определен id (id="btn1"), через который в функции jquery мы будет ею управлять.
В самом низу страницы мы определим функцию jquery:
$(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир 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:
Мир jQuery
Необязательно подключать именно эту версию библиотеки, весь набор доступных версий библиотеки можно найти по адресу https://code.jquery.com/
Также мы можем использовать и другие сети CDN. Например:
Google CDN: предоставляется компанией Google. Все доступные версии можно найти по адресу https://developers.google.com/speed/libraries/devguide?hl=ru#jquery .
Microsoft CDN: предоставляется компанией Microsoft. Все доступные версии можно найти по адресу https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 .
Формат подключения будет следующим:
Yandex CDN: предоставляется российской компанией Yandex. Все доступные версии можно найти по адресу
Придерживаясь формальностей 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
