jQuery - javascript библиотека, использование которой делает разработку на javascript кода намного быстрее и проще. В недалеком прошлом эта библиотека позволяла быстро разрабатывать скрипты. В настоящее время чистый javascript продвинулся настолько, что использование jQuery для многих проектов становится ненужным. Например: как обойтись без jQuery .
Подключение jQuery к вашему сайтуМожно скачать библиотеку jQuery с официального сайта и положить у себя на сайте, после этого подключить следующей командой:
Можно воспользоваться хостингом библиотек от гугла или яндекса , тогда соответственно вызов будет следующий: //или
Особенно актуально, если используете метрику или аналитику...
Возможности библиотеки jQueryФормат запроса jQuery выглядит следующим образом:
$("селектор").действие("свойства действия");
| $("*") | вернет все элементы на странице |
| $("div") | вернет все div-элементы на странице |
| $(".someBlock") | вернет все элементы с классом someBlock |
| $("#content") | вернет элемент с идентификатором content |
| $(Object) | привязать всю функциональность jQuery к уже существующим объектам DOM-элементов. Пример: var el = document.getElementById("some_id"); $(el).css("margin", "5px"); |
| $("#content2 div.someBlock") | вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2 |
| $("div:odd") | вернет div-элементы, находящиеся на странице под нечетными номерами |
| $("div:hidden") | вернет скрытые div-элементы |
| $("") | вернет все элементы с атрибутом value, равным 5 |
| $("div, span, p.lok").css("border", "1px solid red"); | Данный оператор добавит рамку ко всем div-ам, span-ам, и абзацам, имеющим класс lok. Таким образом, через зяпятую можно указать любые селекторы. |
Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS
Селекторы по атрибутам| "" | элементы, содержащие атрибут name |
| "" | элементы, у которых значение атрибута name совпадает с value |
| "" | элементы, у которых значение атрибута name не совпадает с value |
| "" | элементы, у которых значение атрибута name начинается с value |
| "" | элементы, у которых значение атрибута name заканчивается на value |
| "" | элементы, у которых значение атрибута name содержит подстроку value |
| "" | элементы, у которых значение атрибута name содержит слово value |
| "" | элементы, у которых значение атрибута name имеют префикс value (равен value или имеет вид: "value-*") |
| "[..." | элементы, соответствующие всем заданным условиям на атрибуты одновременно |
Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в CSS
| ":focus" | элемент, находящийся в фокусе |
| ":first" | первый найденный элемент |
| ":last" | последний найденный элемент |
| ":eq()" | элемент идущий под заданным номером среди выбранных |
| ":not(selector)" | все найденные элементы, кроме указанных в selector |
| ":even" | элементы с четными номерами позиций, в наборе выбранных элементов |
| ":odd" | элементы с нечетными номерами позиций, в наборе выбранных элементов |
| ":gt()" | элементы с индексом превышающим n |
| ":lt()" | элементы с индексом меньшим, чем n |
| ":header" | элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.) |
| ":animated" | элементы, которые в данный момент задействованы в анимации |
| ":hidden" | невидимые элементы страницы |
| ":visible" | видимые элементы страницы |
| ":lang(language)" | элементы, в которых указаны языки содержимого |
| ":root" | элемент, который является корневым в документе |
Данные селекторы отфильтровывают элементы по их расположению в родительских элементах
| ":first-child" | элементы, расположенные первыми в своих родительских элементах |
| ":last-child" | элементы, расположенные последними в своих родительских элементах |
| ":nth-child()" | элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером) |
| ":nth-child-last()" | |
| ":only-child" | элементы, являющиеся единственными потомками в своих родительских элементах |
| ":only-of-type" | элементы, являющиеся единственными, удовлетворяющими селектору, потомками в своих родительских элементах |
| ":first-of-type" | те из выбранных элементов, которые первыми встречаются в своих родительских элементах |
| ":last-of-type" | те из выбранных элементов, которые последними встречаются в своих родительских элементах |
| ":nth-first-of-type()" | те из выбранных элементов, которые в определенную очередь встречаются в своих родительских элементах |
| ":nth-last-of-type()" |
| ":button" | элементы с тегом button или типом button |
| ":radio" | элементы, являющиеся переключателями |
| ":checkbox" | элементы, являющиеся флажками |
| ":text" | элементы, являющиеся текстовыми полями |
| ":password" | элементы, являющиеся полями ввода пароля |
| ":file" | элементы, являющиеся полями загрузки файлов |
| ":submit" | элементы, являющиеся кнопками отправки формы |
| ":reset" | элементы, являющиеся кнопками очистки формы |
| ":image" | элементы, являющиеся изображениями для отправки формы (input типа image) |
| ":input" | элементы, являющиеся элементами формы (с тегами input, textarea или button) |
| ":selected" | выбранные элементы (со статусом selected). Это могут быть элементы типа . |
| ":focus" | элементы формы, находящиеся в фокусе. |
| ":checked" | выбранные элементы (со статусом checked). Это могут быть элементы типа или . |
| ":enabled" | активные элементы формы (со статусом enabled) |
| ":disabled" | неактивные элементы формы (со статусом disabled) |
| .parent() | вернет родительские элементы всех выбранных элементов. |
| .parents() | Находит всех предков у выбранных элементов, т.е. не только прямых родителей, но и прародителей, прапрародителей и так далее, до начало дерева DOM. |
| .parentsUntil() | Находит предков, как и.parents(), но прекращает поиск перед элементом, удовлетворяющим заданному селектору. |
| .offsetParent() | Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию). |
| .children() | вернет дочерние элементы всех выбранных элементов. |
| .next() | вернет элемент, лежащий сразу после выбранных элементов. |
| .nextAll() | Находит элементы, которые лежат после каждого из выбранных элементов. |
| .nextUntil() | Находит элементы, которые лежат после каждого из выбранных, но не дальше элемента, удовлетворяющего заданному селектору. |
| .prev() | вернет элементы, лежащие перед выбранных элементов. |
| .prevAll() | Находит элементы, которые лежат перед каждым из выбранных элементов. |
| .prevUntil() | Находит элементы, которые лежат перед каждым из выбранных, но не дальше элемента, соответствующего заданному селектору. |
| .siblings() | Находит все соседние элементы (под соседними понимаются элементы с общим родителем). |
| .eq(i) | вернет элемент, с индексом i в наборе. Методы jQuery для него доступны. |
| .get(i) | вернет DOM-объект выбранных элементов, с индексом i. Методы jQuery для него не доступны. |
| .get() | вернет массив DOM-объеков всех выбранных элементов |
| .size() | вернет размер набора (количествово выбранных элементов). |
| .each(func) | выполнить func для каждого эллемента. |
| .map() | Вызывает заданную функцию для каждого элемента набора, и в итоге создает новый набор, составленный из значений, возвращенных этой функцией. |
| .closest() | Находит ближайший, соответствующий заданному селектору элемент, из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM. |
| .find() | Находит элементы по заданному селектору, внутри выбранных элементов. |
| .filter() | Фильтрует набор выбранных элементов с помощью заданного селектора или функции. |
| .first() | Возвращает первый элемент в наборе. |
| .has() | Фильтрует набор выбранных элементов, оставляя те, которые имеют потомков, соответствующих селектору. |
| .is() | Проверяет, содержится ли в наборе, хотя бы один элемент удовлетворяющий заданному селектору. |
| .last() | Возвращает последний элемент в наборе. |
| .not() | Возвращает элементы, не соответствующие заданным условиям. |
| .slice() | Возвращает элементы с индексами из определенной области (например от 0 до 5). |
| .add() | Добавляет заданные элементы в набор. |
| .andSelf() | Добавляет элементы из предыдущего набора, к текущему (речь идет об одной цепочке методов). |
| .contents() | Находит все дочерние элементы у выбранных элементов. В результат, помимо элементов, включается и текст. |
| .end() | Возвращает предыдущий набор элементов в текущей цепочке методов. |
| .hide() | Скрыть элемент. .hide("slow") - скрыть элемент медленно. «slow», «normal», «fast» или число миллисекунд. Вторым параметром может быть задана Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента. |
| .show() | Отобразить элемент. .show("slow") - скрыть элемент медленно. |
| .css("height") | возвратит значение высоты у элемента с идентификатором bigIt. |
| .css("width", "20px") | установит новое значение ширины |
| .attr("class") | возвратит значение класса элемента |
| .attr("class", "box") | установит новое значение атрибута class у элемента |
| .html("Новое") | изменит все html-содержимое элемента на заданное в методе html |
| .text() | возвратит текст, находящийся внутри элемента |
| .empty() | очистить от содержимого элементы |
| .offset() .position() | позволят узнать или изменить позицию выбранного элемента. |
| .width() .height() | позволят узнать или изменить размеры выбранного элемента. |
| .animate(properties, , , ) | анимация. properties - список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение}, например:{opacity: 50, width: 100, height: 200}. duration - продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением "fast" или "slow" (200 и 600 миллисекунд). easing - изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). callback - функция, которая будет вызвана после завершения анимации. Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым: $("#mydiv").animate({height: "hide"}, 300).text("Новый текст").animate({height: "show"}, 300); значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены. |
| .on(events, , , handler) | Универсальный метод для установки обработчиков событий на выбранные элементы страницы. events: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error selector - селектор по которому будут фильтроваться элементы, лежащие внутри уже найденных. В итоге, обработчик будет срабатывать только в том случае, если событие «поднялось» от одного из отфильтрованных элементов. data - данные, передаваемые обработчику событий. В обработчике будут доступны в переменной event.data. handler - функция, которая будет установлена в качестве обработчика. Например: ("#foo").on("click", function(){alert("Вы нажали на элемент "foo"");}); Обработчик для всех элементов li: $("ul").on("click", "li", function(event){}) |
| .off() | Удаляет обработчики, установленные с помощь.on(). |
| .bind() | Устанавливает обработчик события на выбранные элементы страницы. начиная с jQuery-1.7, данный метод считается устаревшим |
| .live() | Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки. |
| .delegate() | Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки. |
| .one() | Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов. |
| .unbind() | Удаляет обработчик событий у выбранных элементов. |
| .die() | Удаляет обработчик событий, который был установлен с помощью live(). |
| .undelegate() | Удаляет обработчик событий, который был установлен с помощью delegate(). |
| .trigger() | Выполняет указанное событие и запускает его обработчик. |
| .triggerHandler() | Запускает обработчик указанного события, без его выполнения. |
| jQuery.proxy() | По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению. |
| event | Объект, содержащий данные о текущем событии. Передается всем обработчикам событий. |
| .click() | Устанавливает обработчик "клика" мышью по элементу, либо, запускает это событие. |
| .dblclick() | Устанавливает обработчик двойного "клика" мышью по элементу, либо, запускает это событие. |
| .hover() | Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом. |
| .mousedown() | Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие. |
| .mouseup() | Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие. |
| .mouseenter() | Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover. |
| .mouseleave() | Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout. |
| .mousemove() | Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие. |
| .mouseout() | Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. |
| .mouseover() | Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. |
| .toggle() | Поочередно выполняет одну из двух или более заданных функций, в ответ на "клик" по элементу. |
Перед тем как начать хочу сказать, что на данную стать меня натолкнул вот этот :
Наталия полностью права, мой блог посвящён, в принципе, JQuery, и JQuery плагинам, но что это такое, и как эти плагины применять на сайтах я не писал ниразу. Дорогие читатели, простите меня:-) я исправлюсь, честно:-)
Наталия, спасибо Вам большое за такой комментарий! И хотелось бы отметить, что Наталья — начинающий блоггер (как и я:-)) и всем родителям советую почитать её блог Маминого малыша . Наталья, у Вас и Вашего блога большое будущее.
Ладно, не будем сильно отвлекаться от темы, давайте перейдём ближе к делу. Дам общее понятие что такое JQuery.
JQueryjQuery – это в первую очередь большая библиотека JavaScript скриптов, с помощью которой можно получить доступ к любому элементу так называемого DOM (объектная модель документа). Другими словами с помощью этого jQuery на сайте можно сделать что хочешь как хочешь и когда захочешь, в частности касается это анимации:-) В основном эту библиотеку используют для украшения сайта, которая уже давно заменила flash . Если не в далёком прошлом красивый сайт можно было сделать только при помощи флеш элементов, то в настоящее время всё это можно сделать с помощью jQuery.
Честно признаюсь не хочется долго объяснять именно значение этого слова, а хочется подробнее остановиться на jQuery плагинах, как их прикрепить к сайту. Но для начала давайте узнаем, что такое плагины.
jQuery плагиныjQuery плагины — это уже готовые скрипты плюс HTML и CSS, которые нужно просто скачать и прикрепить на свой ресурс. Слайдеры, галереи, всякие подсказки всплывающие, многоуровневые меню и т.д. Перечислять можно бесконечно. Как оказывается прикрепить уже готовый скрипт бывает не так уж и легко, тем более если никогда не сталкивался с этим.
Чтобы было понятнее я буду прикреплять плагин к странице на примере, потому что на примере всегда понятнее.
Перед тем как начать Вам нужно на сайт прикрепить саму библиотеку jQuery, тут ничего сложного просто между тегами и поставьте вот это:
Вот и всё, первый шаг сделали:-)
ПримерНапример, мне захотелось на свой сайт прикрепить вот такие интересные и красивые картинки с классной анимацией:
Как видите у меня есть три папки с картинками, стилями и с самим скриптом, а также три примера index.html . В данном случае будем использовать именно его.
Далее открываем первый пример, например в Опере, затем нам нужно посмотреть исходный код самой страницы, там же нажимаем правую кнопку мыши и выбираем Исходный код , и по его примеру прикрепляем галерею на свой сайт. В общем смотрим как сделано там и также делаем себе.
Говорю сразу, что все исходные коды могут быть разными, но принцип один и тот же. Я, например, всегда так делаю, смотрю исходный код в примере и так же делаю у себя.
Важные моменты в данном примере.Нужно прикрепить стили именно того плагина, который прикрепляете, в данном случае это делается так:
Эту строчку нужно ставить между тегами и и на той странице где будет сама галерея, если у Вас, например Вордпресс, нужно ставить в header.php .
Так же ещё нужно прикрепить и сам скрипт этой красивой анимации, опять же между тегами:
Ну а сейчас давайте посмотрим, что у меня получилось. Напоминаю, что я создал новую страницу и прикрепил туда галерею. Вот полюбуйтесь:
Обязательно пользуйтесь исходным кодом примера плагина, для того чтобы было легче прикрутить его на свой сайт. Исходный код вы можете посмотреть в моём примере, и сюда его выложу тоже, на всякий случай:-)
< !DOCTYPE html>
Вот в принципе и всё. Самое главное пробуйте сами изменять, вставлять, удалять и т. д. Испортили, скачали ещё раз и всё по новой пока не получится желаемый результат. Надеюсь, что я всё доступным языком Вам рассказал. Если Вам всё же будет что то не понятно обязательно спрашивайте в комментариях. До скорых встреч, друзья.
Начинающие разработчики сайтов нередко сталкиваются с понятием 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 . Недостающие инструменты легко реализуются посредством скачивания плагинов и написания собственных селекторов.
От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с замечательной и популярнейшей 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, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:
Чтобы пояснить, чем она нас привлекает в эпоху 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