что такое jquery и для чего он нужен
jQuery для начинающих
jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…
Как же все-таки работает jQuery?
Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью jQuery?
Выдвижная панель
Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
Связанная анимация
— уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 5: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 6: затем top=0, скорость — «fast»
Line 7: затем slideUp (с дефолтной скоростью анимации — «normal»)
Line 8: затем slideDown, скорость — «slow»
Line 9: возвращаем false для того чтобы браузер не перешел по ссылке
Гармошка #1
внутри
, для следующего в нём элемента
будет применен эффект slideToggle, затем для всех остальных элементов
будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки
и убираем у них класс «active»
Гармошка #2
Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)
В CSS у нас указано для всех элементов
Анимация для события hover #1
Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):
Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:
Анимация для события hover #2
Кликабельные блоки
Складывающиеся панельки
— вызывает метод slideToggle для следующего элемента
Имитация Backend’a WordPress’a
(цвет изменяется на красный), и изменяет параметр «opacity» на «hide»
Галерея изображений
По клику на изображения в
Стилизируем ссылки
Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.
Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/
Может кому пригодиться еще библиотека jQuery-PHP
Зачем вам jQuery
Каждый год говорят о том, что jQuery уже не тот, но продолжают его использовать. Почему? Вот почему.
Представьте, что вам нужно на сайт добавить форму обратной связи и кнопку быстрого заказа. Вы пишете 200 строк на JavaScript: нужно, чтобы поля проверялись, данные отправлялись, если человек не заполнил — на него выпадала выпадайка и т. д. Всё это нужно внимательно описать, запрограммировать и протестировать. На это уходит, допустим, полтора-два часа. Работает? Да. Получилось быстро? Не очень. Чтобы было быстрее, многие используют jQuery.
jQuery — специальная библиотека, написанная на JavaScript, в которой многие типовые действия прописаны как одна команда. Представьте, что это набор готовых деталей конструктора, из которого собрать программу получается быстрее. Правда, не все задачи решаются деталями конструктора…
Чтобы было понятно, насколько jQuery может ускорить написание кода, вот пример. Двум программистам дали задачу: сделать так, чтобы по клику в самом низу страницы она сама плавно прокручивалась до самого верха. Один решил эту задачу на чистом JavaScript:
Другой использовал jQuery. У него код состоит из одной строки:
У обоих программистов код работает одинаково, но второй решил задачу гораздо быстрее.
Эта команда говорит браузеру: «Иди на сервер Яндекса по вот такому пути, найди там файл jquery.min.js, будем работать с этой библиотекой и писать на ней скрипты». Дальше мы собрали список плюсов и самых веских причин использовать jQuery в проектах. Это будет полезно знать тем, кто хочет делать что-то для веба или лучше понимать, как устроены сайты изнутри.
Плюс: простой синтаксис
jQuery читается несколько проще, чем JavaScript, многие вещи сделаны понятнее. Например, нам нужно скрыть на странице второй по счету заголовок уровня H2.
Плюс: плагины на любой случай
Что бы вы ни хотели сделать на веб-странице, скорее всего, для этого уже есть готовые плагины на jQuery. Формы подписки, всплывающая реклама, захват телефонного номера — всё это уже есть и доступно за пару команд.
Scrollpane — кроссбраузерный скролбар любого элемента на странице;
jReject — проверяет, не устарел ли используемый браузер;
GridScrolling — навигация по сайту с помощью клавиш;
FlickerPlate — плагин для слайдеров с поддержкой сенсорных экранов;
Animsition — создание анимированной загрузки страниц на сайте;
SlideBars — создание адаптивного меню на сайте
и ещё тысячи готовых плагинов.
Плюс: простой доступ к странице
В чистом JavaScript обратиться к объекту на странице можно одним из способов:
и еще несколько подобных
В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:
Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.
Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:
$elem.remove(); //Удаляем их.
Плюс: кроссбраузерность
Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.
Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:
И такие условные блоки есть для всех старых версий IE.
Если всё настолько круто, как здесь написано, то все должны уже были давно перейти на jQuery и забыть про JavaScript, но этого не происходит. Более того, у jQuery есть свои существенные минусы и ограничения.
Минус: вы контролируете не всё
Если вам нужен максимальный контроль за всем, что происходит на сайте, то лучше использовать чистый JavaScript. В этом случае вы полностью уверены в том, как ведёт себя страница, и не зависите от стороннего кода.
Если используете редкий плагин, есть риск, что он может не работать настолько надёжно, как вам нужно. К тому же, не все сторонние плагины так же хорошо оптимизированы, как сам jQuery: в итоге у вас ради какого-то одного эффекта или блока на странице появится огромная библиотека, которая будет всё страшно замедлять.
Минус: много всего
Подключать целую библиотеку ради одного эффекта — не самая лучшая идея. Иногда проще потратить лишних пять минут и сделать то же самое на JavaScript, чем тащить в проект лишних 64 килобайта кода.
Например, чтобы однократно вызвать обработчик события, можно подключить jQuery и написать так:
А можно ничего не подключать и использовать простой JavaScript, который уже научился делать то же самое через третий, необязательный, параметр в addEventListener:
Плюс-минус: многое можно уже сделать и на JavaScript
В самом начале, когда jQuery только появился, он сильно помогал разработчикам, потому что сам JavaScript многое не умел делать так же легко и изящно. Сейчас JS по возможностям и удобству почти догнал jQ, и то, на что раньше уходило 10 команд, теперь делается одной.
Замена одного элемента на странице на другой.
Минус: нет понимания технологии
Чрезмерное увлечение jQuery может привести к тому, что программист просто не будет понимать, как работают механизмы у него на странице и не сможет их исправить, если что-то пойдёт не так.
Например, программист прикрутил на страницу какой-то эффект на базе jQuery. Потом еще один, и они начали конфликтовать. Если программист не может разобраться в устройстве этих библиотек, он не сможет разрешить конфликт — а для этого нужно понимать чистый javaScript и уметь отлаживать код.
Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.
Скоро возьмем эту библиотеку за основу и сделаем какой-нибудь полезный проект. Подписывайтесь, мы напишем, когда что-нибудь такое выйдет.
jQuery изнутри — введение
По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.
У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.
Извините, отвлекся. Суть поста и следующих частей серии в том, чтобы рассказать о том, как же работает библиотека изнутри и что же в ней происходит по мере выполнения каких-то методов.
Исходники
Исходники проекта лежат вот тут. Все разбито на несколько модулей, собирается (у кого-то даже успешно) в одно целое с помощью Grunt. Для разбора в статье я буду использовать код последней стабильной версии (на момент написания статьи это — 1.8.3).
Образно, в этой статье мы рассмотрим скрипт, который можно получить склейкой intro.js. core.js, [sizzle] (мельком), sizzle-jquery.js, support.js (так же, мельком) и outro.js.
Скрипты intro.js и outro.js нужны просто чтобы обернуть код библиотеки в анонимную функцию, дабы не мусорить в window. В функцию передаются параметрами window и undefined (этот параметр — не передается, оттого и undefined). Зачем? У таких переменных не меняется названия в ходе минификации, а названия параметров функции — сжимаются и от таких манипуляций в итоге получается серьезный профит.
Инициализация
Первым делом при загрузке jQuery у нас отрабатывается core.js, ядро фреймворка. Что же происходит на этапе инициализации кроме объявления тонны использованных далее RegExp’ов и переменных:
Внимание, магия:
Именно поэтому из результата работы этого самого «конструктора» всегда можно достучаться до всех методов jQuery.
Собственно, jQuery.fn расширяется базовыми методами, среди которых jQuery.extend, с помощью которого осуществляется расширение объектов, в том числе и дальнейшее расширение функционала самого же jQuery.
Вроде бы все и относительно просто, но все это касается только core.js. Любой модуль что-то делает при загрузке и их лучше рассматривать отдельно. Отдельно упомянем support.js, в котором сразу же при инициализации проводится масса тестов для определения возможностей браузера.
Объект jQuery
Итак, что же представляет из себя объект jQuery и зачем?
Именно из-за свойства length многие почему-то заблуждаются и думают о том, что это — на самом деле массив. На самом деле свойство length поддерживается внутри jQuery вручную и является количеством возвращенных элементов, которые располагаются в нумерованных с нуля ключах-индексах объекта. Делается это именно за тем, чтобы с этим объектом можно было работать как с массивом. В свойство selector помещается строка-селектор, если мы искали по ней, а в context — контекст, по которому искали (если не задан, то он будет — document ).
jQuery.fn.init
Сначала в функции будет проверено, передан ли ей вообще селектор и в случае, если не передан (или передана пустая строка, null, false, undefined) — в этом случае нам вернется пустой объект jQuery, как если бы мы обратились к нему через window.$.
В случае, если селектор является строкой, то относительно контекста (если контекста нет, то это — document, см. о rootjQuery выше) будет выполнен метод find указанного селектора, т.е.:
Йо-хо-хо
Обратите внимание на span внутри параграфа — в результатах он тоже будет внутри него, в элементе с индексом 1.
jQuery.find
Если Вас чем-то не устраивает Sizzle, а такое бывает, вместо нее можно использовать что-то свое (или чужое), см. sizzle-jquery.js, именно там создаются ссылки на методы из Sizzle. Не забудьте в этом случае выкинуть Sizzle из билда.
Заключение
jQuery все растет и растет, уже сейчас библиотека разрослась почти до 10 тысяч строк кода (без учета Sizzle). Тем не менее исходники разбиты на несколько файлов, аккуратно написаны и даже местами прокомментированы. Не бойтесь подсматривать туда, а даже наоборот — если чувствуете, что не знаете как работает то, что Вы хотите использовать, не поленитесь посмотреть в исходники библиотеки. Это касается не только jQuery, но и вообще любой библиотеки.
Помните, что jQuery — это библиотека, цель которой не только облегчить разработчику жизнь лаконичностью кода, который получается с ее помощью, но и сделать один интерфейс для работы во всех возможных браузерах, включая доисторические, что добавляет определенный оверхед. Именно поэтому важно знать, что же делает за тебя библиотека. В некоторых случаях можно обойтись и без этих ста килобайт (помните что до сих пор видите значок Edge на своих телефонах) и без оверхеда на вызовах и тестировании возможностей браузера. К примеру, при написании расширения для Chrome или Firefox вам с вероятностью в 90% оно не принесет какого-то профита.
Статья вышла у меня не такая большая, как я боялся и это очень хорошо — читать будет легче (надеюсь). В области профессиональной веб-разработки я всего лишь лет 7, поэтому, как новичок, конечно, могу чего-то не знать, а что-то знать — не совсем (совсем не) правильно или не до конца. Не стесняйтесь меня поправлять, дополнять, критиковать, спрашивать.
jQuery in Action. Глава 1. Введение в jQuery.
Как я уже писал, я начал читать книгу «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). В данной серии статей (а я планирую довести дело до конца) я буду выкладывать самые интересные моменты из каждой главы этой книги. Это будут основные идеи, примеры или и то и другое вместе 🙂
Глава 1. Введение в jQuery.
Для чего нужно (нужна, нужен) jQuery – чтобы облегчить работу веб-программиста. С помощью этой библиотеки нам (веб-программистам) проще повысить функциональность наших страниц с минимальным выполнением монотонной работы.
Основы jQuery
В своей основе jQuery ориентировано на работу с элементами HTML страниц.
Основные моменты.
1.1. Wrapper.
В jQuery для этого используется следующее выражение:
Или такой пример: применим эффект fade out для всех элементов
Такую цепочку можно продолжать бесконечно.
Но это только малая часть возможности jQuery по работе с селекторами. Еще пара:
Селектор выбирает элементы
То же, но уже выбираем
, содержащие в себе ссылки.
Выбираем ссылки на PDF файлы.
Не пугайтесь, что вам что-то сейчас непонятно. Более подробно на селекторах мы остановимся в главе 2. Единственный на сейчас вывод, который нужно сделать – jQuery на самом деле мощная штука.
1.2. Функции.
По сути функции jQuery это методы функции jQuery. Но в книге мы их будем называть функцими. А не методами.
$ это пространство имен.
1.3.The document ready handler
(на английском-то понятно, а как это по-русски сказать… Суть ниже :-)).
Обычный код JavaScript при применении метода onload начинает работать, когда страничка полностью загрузилась браузером пользователя. Вместе с картинками и прочим. Для работы jQuery достаточно загрузки DOM.
1.4. Работа с DOM.
1.5. Расширение jQuery.
В jQuery много полезных функций, но, конечно, она не может удовлетворить потребностям всех пользователей. В этом случае библиотеку всегда можно расширить своими собственными функциями.
Затем мы можем уже использовать свою новую функцию:
Кроме своих функций к jQuery можно подключать плагины. О них еще будет упомянуто в главе 9.
1.6. Использование jQuery с другими библиотеками.
Авторы jQuery предвидели такой момент и при совместном использовании нескольких библиотек рекомендуют использовать функцию noConflict() сразу после подключения других библиотек:
Как вам в целом пост? Хотелось бы услышать ваше мнение, стоит ли продолжать, потому что это мой первый опыт в такого вида постах-переводах, да еще урезанного вида.
Еще хотелось отметить, что в jQuery я далеко не эксперт, разбираться начал вместе с вами с прочтения этой книги. Надеюсь, что все у нас получится! При этом если я допустил какие-то неточности, что-то не так понял — прошу прощения, я с радостью все исправлю.
Параллельно выкладываю статьи в своем блоге, там же можно и подфидиться;-)
Что такое jQuery?
Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)
Многие читатели Envato Tuts + имеют богатый опыт работы, культуры и того, чему они хотят научиться. Когда дело доходит до технологии, легко принять как должное тех, кто только начинает, особенно если вы сделали какой-либо тип развития в течение длительного времени.
Тем не менее, одним из приятных моментов становления разработчика является то, что как только вы освоили определенный язык и набор навыков, легко перевести их в другие области разработки.
Стремясь обеспечить максимально широкую аудиторию, мы стремимся публиковать контент, нацеленный непосредственно на новичков, которые интересуются языком, платформой или приложением.
И в этой статье мы собираемся сосредоточиться исключительно на jQuery. В частности, мы собираемся взглянуть на все, что предлагает jQuery, и на то, как оно может нам помочь, и посмотреть на некоторые из проектов, которые также были реализованы в исходной библиотеке.
Все о jQuery
Впервые выпущенный в 2006 году Джоном Ресигом, jQuery представляет собой кросс-платформенную JavaScript-библиотеку, которая упростила создание клиентских решений.
В то время, когда это было выпущено, это было особенно полезно из-за несоответствий, которые существовали среди реализаций JavaScript в Internet Explorer, Firefox и, в конечном счете, Google Chrome (который не был выпущен до 2008 года).
Определение в Википедии:
Кроме того, сам сайт jQuery гласит:
1. Обход документа HTML
Когда браузер отображает веб-страницу, это визуальное представление того, что известно как DOM (или объектная модель документа). Эта модель может быть концептуально смоделирована как структура данных дерева, где есть определенные узлы с корнями и листьями.
Например, см. Это изображение, предоставленное в Web Step Book:
Когда вы работаете с jQuery, вы можете легко перемещаться по содержимому DOM, чтобы достичь или найти узлы, элементы или значения, которые вы хотите получить.
Это означает, что если вы ищете текст элемента div с уникальным идентификатором, это легко сделать.
Мы рассмотрим эту конкретную функциональность немного больше в следующем разделе, поскольку она показывает некоторые дополнительные действия, которые вы можете сделать, чтобы манипулировать страницей.
Конечно, эти примеры просты, и все может усложниться, особенно когда мы вводим цепочку методов. Например:
На данном этапе вы не должны знать, что происходит с кодом, но он должен показать вам, какой полезной jQuery может быть в определенных ситуациях с помощью вспомогательных функций и цепочек методов.
Можно было бы утверждать, что все остальное проистекает только из этой функции. Так что с учетом сказанного, давайте продолжим смотреть на то, как это выглядит.
2. Манипуляция документами HTML
Когда дело доходит до фактического манипулирования DOM, у jQuery есть много функций, которые позволяют нам изменять то, что видят наши посетители.
Некоторые из этих функций просты, например, позволяют нам показывать ( show ) или скрывать ( hide ) элементы, которые не отображаются при загрузке страницы. Другие функции позволяют нам создавать новые элементы и добавлять ( append ) их к существующему элементу или добавлять их перед ( prepend ) всем списком.
Это все едва лишь затрагивает поверхность того, что какая функциональность манипуляции DOM доступна в jQuery. Просмотрев API, в разделе Manipulation вы можете увидеть, сколько вариантов доступно нам (наряду с хорошими примерами).
Чтобы привести дальнейшие примеры, мы также можем:
Помните, что одна из вещей, которые делают jQuery привлекательным решением для столь многих разработчиков, состоит в том, что все функции и примеры, которые мы рассматриваем в этой статье, совместимы с несколькими браузерами.
3. Обработка событий
Если вы новичок в JavaScript, то одна вещь, которая имеет ключевое значение для понимания того, как она работает со страницей, отображаемой в веб-браузере, состоит в том, что она реагирует на различные события.
То есть, когда пользователь нажимает на элемент, нажимает клавишу или щелкает мышью, тогда браузер выдает сигнал, соответствующий произошедшему событию. Это позволяет нам использовать преимущества взаимодействия пользователя с браузером.
В частности, каждый раз, когда пользователь что-то делает на странице, мы можем реагировать с помощью пользовательского события. Проблема заключается в том, что не каждый браузер реализует события одинаково (поэтому существует потребность в спецификации, но это контент для другой статьи).
К счастью, jQuery делает это намного проще, определяя последовательное имя для всех событий, чтобы мы могли использовать одно и то же имя для события, на которое мы пытаемся ответить, и оно будет работать во всех основных браузерах.
4. Анимация
Когда jQuery впервые вышел, Flash все еще был относительно популярен, и общие анимации в Интернете не были полностью мертвыми.
Когда мы говорим об анимации в контексте jQuery, мы не говорим о том же типе эффектов или поведения, которые мы привыкли видеть со старой технологией. Вместо этого мы говорим об эффектах, которые дают пользователям обратную связь, что-то случилось на экране. Кроме того, он менее инвазивный и может придать правильное чувство стиля странице или приложению при правильном использовании (хотя конечно чем-то можно и злоупотреблять).
Вы можете просмотреть API всех эффектов на этой странице, но стоит заметить, что эффекты jQuery могут варьироваться в любом месте от обработки простого выцветания и выхолащивания элементов или скользящих элементов до более сложного, например манипулирования очередью зарегистрированных эффектов для запуска потом на определенном элементе.
Конечно, в последнем случае предполагается, что у вас есть небольшой опыт работы с API-интерфейсами эффектов, но это естественно, если у вас есть достаточно времени для работы с библиотекой и документацией.
5. Ajax
Если вы не знакомы с Ajax, то, по сути, веб-страница может сделать вызов на сервер, обработать ответ и обновить часть страницы, не обновляя всю страницу. Хотя технология существует уже довольно давно, это все еще что-то действительно крутое и может обеспечить некоторые действительно аккуратные функциональные возможности в контексте страницы или веб-приложения при правильном и эффективном использовании.
Хотя поддержка Ajax не так плоха, как это было пять или десять лет назад, реализация API в разных браузерах может немного меняться. Это означает, что нам нужно написать код Ajax специально для браузера, который корпорация Майкрософт предоставляет, который Google предоставляет, который предоставляет Apple, предоставляемый Chrome, и так далее.
Как только вы привыкли к тому, что API доступен в ядре вашего приложения или в вашем распоряжении, трудно представить, что вы не работаете с ним (или с чем-то подобным).
Слово о расширяемости
Одной из особенностей, которую предлагает множество серверных фреймворков и библиотек, является возможность создания расширений для базовой кодовой базы. Современные клиентские библиотеки и платформы позволяют это, и jQuery не является исключением.
Скажем, например, вы работаете в определенной нише, в которой вы создаете одни и те же функции для каждого проекта. Или что у вас есть продукт, который вы продаете, и у вас есть немного пользовательского кода, который необходимо интегрировать с jQuery, но для него могут потребоваться различные параметры в зависимости от проекта.
Что вы будете делать?
Затем мы можем повторно использовать этот код в наших собственных проектах или сделать их доступными на сайтах, таких как GitHub, чтобы другие могли предлагать исправления, функции и т.д.
Дополнительные проекты jQuery
С момента своего создания jQuery превратился в нечто большее, чем просто библиотека JavaScript, которая предлагает нам возможность выполнять как простые, так и мощные операции в кроссплатформенном режиме.
В дополнение к основной библиотеке jQuery также привел к двум другим заметным проектам, о которых стоит упомянуть, прежде чем мы завершим эту статью. Хотя мы не собираемся рассматривать детали того, что дает каждый проект, мы возьмем высокоуровневое представление о каждом проекте, если только по какой-либо другой причине, кроме осознания того, что доступно для нас, нам нужно это для будущей работы.
jQuery UI
С домашней страницы jQuery UI:
Эта библиотека была впервые опубликована в 2007 году, примерно через год после самой jQuery. Он работает как дополнительная библиотека для jQuery, поскольку он повышает кроссплатформенную совместимость библиотеки, чтобы помочь создавать виджеты, которые можно использовать на всех веб-сайтах.
Многие из виджетов включают часто используемые функциональные возможности. Например:
Существуют также расширенные функции, такие как эффекты, утилиты и взаимодействия. Все, что мы рассмотрели до сих пор (а также что еще не успели), включает широкий спектр обратных вызовов, атрибутов и функций, которые позволяют нам взаимодействовать с ними в полной мере.
Все вышеупомянутые функции также предлагают различные темы, чтобы убедиться, что они соответствуют внешнему виду вашего веб-сайта. Наконец, все функции, описанные здесь и включенные в сайт, хорошо документированы.
jQuery Mobile
С домашней страницы jQuery Mobile:
Подобно своему коллеге по пользовательскому интерфейсу, она предлагает хорошо документированный API и настраиваемые темы, которые идеально подходят для различных устройств, на которые может ориентироваться ваш проект.
В то время как предыдущие две библиотеки предлагают набор кросс-платформенных функций, которые позволяют нам сравнительно легко писать jQuery и сопутствующие виджеты, jQuery Mobile включает в себя фреймворк CSS, которая позволяет нам также создавать пользовательские интерфейсы, которые идеально подходят для характера наших Соответствующего проекта.
Фреймворк включает в себя:
Библиотека предлагает то, что вы ожидаете от проекта, направленного на то, чтобы сделать веб-разработку намного проще для различных мобильных устройств. К ним относятся такие вещи, как:
Наконец, количество браузеров, которые все еще доступны и используются, велико. Хотя мы наблюдали уменьшение использования более ранних версий Internet Explorer и более широкое внедрение Chrome, у нас все еще есть определенные пользователи, которые придерживаются старых браузеров по ряду причин.
Иногда эти пользователи находятся в более старых браузерах из-за характера их внутренней сети. Иногда это связано с мобильными устройствами и / или телефонами, которые они используют для своей работы. И иногда это просто связано с невозможностью перейти на что-то лучшее.
Неважно, однако. JQuery Mobile предлагает поддержку большинства существующих браузеров и операционных систем. Если вы не уверены, поддерживается ли ваша платформа библиотекой, вы всегда можете проверить страницу поддержки браузера.
Дополнительные ресурсы
Заключение
Понимание того, что такое jQuery (и чем она не является) и как это связано с JavaScript, необходимо для того, чтобы вы знали, что делается для вас и что вы можете делать, когда вам нужно работать с библиотекой.
JavaScript стал одним из языков де-факто работы в Интернете. Это не без кривых обучения, а также множество фреймворков и библиотек, которые заставляют вас быть занятыми. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, ознакомьтесь с имеющимися у нас на рынке Envato.
Если этого недостаточно, есть много документации и кода с открытым исходным кодом, который также доступен для просмотра и чтения. Есть также широко доступные плагины и активный блог, чтобы держать вас в курсе всех новостей, происходящих с развитием библиотеки.
Для тех, кто интересуется JavaScript (особенно в контексте WordPress), не стесняйтесь следовать за мной в моем блоге и/или Twitter в @tommcfarlin. Вы также можете просмотреть все мои курсы и учебные материалы на моей странице профиля.
Не стесняйтесь оставлять любые вопросы или комментарии в фиде ниже, и я постараюсь ответить на каждый из них.