jQuery和jQuery Mobile之间的区别？

92

我是移动Web开发的新手，我刚刚使用PhoneGap开发了一个移动应用程序，并经常使用jQuery。

但是自然会有一些小故障，与我格式化内容的方式以及它们实际在我正在测试的移动设备屏幕上显示的方式有关，在尝试解决这些问题时，我偶然发现了许多建议，以通过使用jQuery mobile。

现在这让我感到困惑-jQuery在格式方面一无所获。那只是我初学者对移动CSS的了解，从而导致了这些问题。

那么jQuery mobile到底有什么作用？它与普通jQuery有何不同？如果我已经知道jQuery，那么对我来说会有什么新鲜事？

jquery jquery-mobile

— 临时用户名
source

2

“我不敢相信以前没有人问过这个。” 实际上，他们做到了：stackoverflow.com/q/6636388/368167

— 塔默·斯拉什

什么是移动CSS？

— 传奇

94

jQuery纯粹是为了简化和标准化跨浏览器的脚本而设计的。它着重于低级内容：创建元素，操纵DOM，管理属性，执行HTTP请求等。

jQueryUI是在jQuery之上构建的一组用户界面组件和功能（即，需要jQuery才能工作）：按钮，对话框，滑块，选项卡，更高级的动画，拖放功能。

jQuery和jQueryUI都被设计为“添加”到您的站点（台式机或移动设备）中-如果您想添加特定功能，则jQuery或jQueryUI可能会提供帮助。

jQuery Mobile是一个完整的框架。它旨在成为您移动网站的起点。它需要jQuery，并利用jQuery和jQueryUI的功能来提供UI组件和API功能，以构建适合移动设备的网站。您仍然可以随意使用其中的任何一个，但如果允许的话，jQuery Mobile 可以通过移动友好的方式控制整个视口。

另一个主要区别是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将此列表转换为适合移动设备使用的UI组件，data-inset并且data-filter属性设置属性-无需编写任何JavaScript代码。另一方面，通常通过编写几行JavaScript来实例化DOM中的组件来创建jQueryUI组件。

— 斯图·考克斯
source

作为一个刚刚从基于浏览器的网站上的jQuery + UI继续“前进”以了解移动设备上的jQuery Mobile的人，我不得不说我很努力地看到这个特定的答案如何获得41票赞成但没有评论。它特别指出了其主要目的，即与“建立在jQuery之上”的jQueryUI不同，jQuery Mobile是“但是，一个完整的框架”。这与下面的其他答案完全不符，其他答案指出（非常准确-我认为！）jQuery Mobile也需要jQuery才能运行，这使我对我所需的.js和.css感到困惑。

— 安迪·洛伦兹

3

抱歉，您是对的，我没有说清楚jQuery Mobile也需要jQuery，我将对其进行更新。尽管请注意，我的答案并不是真的旨在告诉您如何使用jQuery Mobile并运行（这不是原始问题），只是为了概述概念上的差异。

— Stu Cox

Stu的好东西，感谢您调整您的答案，这现在变得更有意义了。您可能会惊讶于“ jquery mobile新手”的入门有多么困难-甚至jquerymobile网站也没有使它变得显而易见！这本身导致了另一个令人困惑的问题-jquerymobile需要哪个版本的jquery？截至撰写本文时，jquerymobile.com仅暗示 1.4.2与jQuery 1.8兼容-1.10 / 2.0-但我找不到在哪里特别说明了版本和js / css依赖项！

— 安迪·洛伦兹

28

jQuery mobile是什么

JQM（jQuery mobile）是基于jQuery构建的用于手机的用户界面系统。jQuery是JQM起作用所必需的。与其他类似的手机框架不同，JQM的目标是支持所有主要的移动设备，平板电脑，电子阅读器和台式机平台，而不仅仅是移动Webkit浏览器。该框架最显着的功能之一是使用动画页面过渡（非常酷）的Ajax导航系统。

您可能有什么新鲜事

关于JQM的一件事是向新用户投掷曲线球，这是ajax导航。来自jquery，您可能习惯于将JavaScript包含在每个页面中，然后使用dom ready（$(function(){ ... }或$(document).ready(function(){ .... }）启动所有有趣的javascript活动。但是由于JQM使用ajax导航，因此系统会将其他页面拉入与第一页相同的dom中，并且不会加载脚本中包含的脚本<head>。当通过ajax加载下一页时，您会发现里面的东西在$(function(){ ...}第二页上不起作用。解决方案是绑定到pageinit事件。以下这些示例将在您的旅程开始之初为您提供帮助：

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

});

为了定位某个页面，您需要添加页面的ID：

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

});

了解新页面事件将在开始使用JQM时帮助您很多。http://jquerymobile.com/demos/1.1.0/docs/api/events.html祝您好运！

— 柯达尼尔
source

5

jQuery是一个DOM操作/遍历和AJAX JavaScript框架。它会自动抽象出不同浏览器之间的许多复杂性。有无数的jQuery插件可以简化许多任务。

jQuery Mobile是一个基于jQuery的移动应用程序UI框架。它具有主题和UI组件。

总之，它们是免费的。您不必使用jQuery Mobile即可使用jQuery。但是要使用jQuery Mobile，就必须使用jQuery。

— 丹尼尔·怀特
source

那么您能说这jQuery Mobile是的移动版本jQuery UI吗？

— 杰夫·海因斯

@JeffHines-有点。它们是不同的代码库，但是它们以不同的方式实现相似的目标。

— Daniel A. White

出色的一句话，丹尼尔·怀特。您不必使用jQuery Mobile即可使用jQuery。但是要使用jQuery Mobile，就必须使用jQuery。

— user3174782

一个Alpha版本现在正在开发中。jquerymobile.com/changelog/1.5.0-alpha1

— Jackson Ng

2

上面没有足够的要点评论，因此添加了线程来回答Andy的第二个依赖问题。

我相信您正在寻找的是这里：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>

— TransitDataHead
source