Разница между jQuery и jQuery Mobile?

Я новичок в разработке мобильных веб-приложений, и я только что создал мобильное приложение с PhoneGap, которое часто использует jQuery.

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

Теперь это меня смущает - у jQuery не было никаких проблем с форматированием. Это было только моим знанием мобильного CSS для начинающих, которое и вызвало проблемы.

Так что же делает jQuery mobile и чем он отличается от обычного jQuery? Если я уже знаю jQuery, что будет для меня новым?

 Tamer Shlash30 июл. 2014 г., 22:14
«Я не мог поверить, что никто раньше не спрашивал об этом». На самом деле они сделали:stackoverflow.com/q/6636388/368167
 Legends01 апр. 2018 г., 11:02
Что такое мобильный CSS?

Ответы на вопрос(4)

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

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

В целом, они бесплатные. Вам не нужно использовать jQuery Mobile, чтобы использовать jQuery. Но чтобы использовать jQuery Mobile, вы должны использовать jQuery.

 01 мая 2012 г., 01:34
Так что вы могли бы сказать, чтоjQuery Mobile это мобильная версияjQuery UI?
 01 мая 2012 г., 01:35
@JeffHines - немного. это разные базы кода, но они достигают сходных целей разными способами.
 21 февр. 2014 г., 21:41
Отличные комментарии, Даниэль А. Уайт. Вам не нужно использовать jQuery Mobile, чтобы использовать jQuery. Но чтобы использовать jQuery Mobile, вы должны использовать jQuery.
 29 авг. 2017 г., 14:17
Альфа-версия сейчас в разработке.jquerymobile.com/changelog/1.5.0-alpha1
Решение Вопроса

jQuery предназначен исключительно для упрощения и стандартизации сценариев в разных браузерах. Основное внимание уделяется низкоуровневым вещам: созданию элементов, управлению DOM, управлению атрибутами, выполнению HTTP-запросов и т. Д.

jQueryUI представляет собой набор компонентов пользовательского интерфейса & amp; функции, построенные на основе jQuery (т. е. для работы требуется jQuery): кнопки, диалоговые окна, ползунки, вкладки, более продвинутая анимация, функция перетаскивания.

jQuery и jQueryUI спроектированы так, чтобы быть «добавленными»; на ваш сайт (настольный или мобильный) - если вы хотите добавить определенную функцию, jQuery или jQueryUI могут помочь.

jQuery MobileОднако это полная структура. Он предназначен для того, чтобы стать отправной точкой для мобильного сайта. Он требует jQuery и использует функции jQuery и jQueryUI для предоставления как компонентов пользовательского интерфейса, так и функций API для создания мобильных сайтов. Вы все еще можете использовать столько, сколько хотите, но jQuery Mobilecan Контролируйте весь видовой экран мобильным способом, если позволите.

Другое существенное отличие состоит в том, что jQuery и jQueryUI стремятся быть слоем поверх ваших HTML и CSS. Вы должны иметь возможность просто оставить разметку в покое и улучшить ее с помощью jQuery. Однако jQuery Mobile предоставляет способы определить, где вы хотите, чтобы компоненты появлялись, используя только HTML - например, (с сайта jQuery Mobile):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

data-role атрибут указывает jQuery Mobile превратить этот список в удобный для пользователя компонент пользовательского интерфейса иdata-inset а такжеdata-filter атрибуты устанавливают свойства этого - без написания ни одной строки JavaScript. С другой стороны, компоненты jQueryUI обычно создаются путем написания нескольких строк JavaScript для создания экземпляра компонента в DOM.

 30 апр. 2014 г., 18:03
как кто-то только сейчас "движется дальше" от jQuery + UI на веб-сайтах на основе браузера до понимания jQuery Mobile для мобильных устройств, я должен сказать, что я изо всех сил пытаюсь понять, как этот конкретный ответ получил 41 ответ, но НИКАКИХ комментариев. В своей основной направленности он особо указывает на то, что в отличие от jQueryUI, который «построен поверх jQuery», jQuery Mobile, тем не менее, является «полной структурой». Это полностью расходится с другими ответами ниже, в которых говорится (довольно точно - я думаю!), Что jQuery Mobile также требует, чтобы jQuery запускался, и добавляет мое личное замешательство относительно того, что мне нужно .js и .css.
 30 апр. 2014 г., 18:53
Извините, вы правы, я не дал понять, что для jQuery Mobile также требуется jQuery & # x2013; Я обновлю его. Хотя обратите внимание, что мой ответ на самом деле не предназначен для того, чтобы рассказать вам, как начать работу с jQuery Mobile (это не то, чем был первоначальный вопрос), просто для того, чтобы дать общий обзор концептуальных различий.
 01 мая 2014 г., 11:06
отличный материал, Стю, спасибо за настройку твоего ответа, который теперь имеет гораздо больше смысла. Вы можете быть удивлены, насколько сложно это сделать для мобильных пользователей jquery. для начала - даже веб-сайт jquerymobile не делает это очевидным! Это само по себе приводит к еще одной путанице - какая версия jquery требуется для jquerymobile? На момент написания статьи только jquerymobile.comimplies что 1.4.2 совместимо с jQuery 1.8 - 1.10 / 2.0 - но я не могу найти нигде, где версии & amp; js / css зависимости указаны конкретно!

What jQuery mobile is

JQM (jQuery mobile) - это система пользовательского интерфейса для мобильных телефонов, построенная на основе jQuery. JQuery требуется для работы JQM. В отличие от других аналогичных каркасов для мобильных телефонов, JQM нацелена на поддержку всех основных мобильных платформ, планшетов, электронных книг и настольных компьютеров, а не только браузеров мобильных веб-наборов. Одной из наиболее заметных особенностей фреймворка является навигационная система Ajax, которая использует анимированные переходы страниц (очень круто).

What may be new to you

Одна вещь о JQM, которая бросает кривая шар в новых пользователей, является навигацией ajax. Исходя из jquery, вы, вероятно, привыкли включать свой javascript на каждую страницу, а затем использовать dom ready ($(function(){ ... } или же$(document).ready(function(){ .... }), чтобы запустить все ваши забавные действия JavaScript. Но поскольку JQM использует навигацию ajax, система будет перетаскивать другие страницы в тот же каталог, что и первая страница, и не загружает ваши сценарии, содержащиеся в<head>, Когда следующая страница загружается через ajax, вы заметите, что ваши вещи внутри$(function(){ ...} не будет работать на второй странице. Решением этой проблемы является привязка к событию pageinit. Следующие примеры помогут вам в начале вашего путешествия:

$(document).on('pageinit', function(){ // this fires for each new page

});

Чтобы настроить таргетинг на определенную страницу, вы добавляете идентификатор страницы:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Понимание событий новой страницы поможет вам много, начиная с JQM.http://jquerymobile.com/demos/1.1.0/docs/api/events.html Удачи!

У вас недостаточно очков, чтобы комментировать выше, поэтому добавьте в ветку, чтобы ответить на второй вопрос Энди о зависимостях.

Я считаю, что вы ищете здесь:jQuery Mobile Demo

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>

Ваш ответ на вопрос