93

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

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

现在这让我很困惑——jQuery 没有格式化。那只是我对移动 CSS 的初学者水平的知识导致了这些问题。

那么jQuery mobile到底是做什么的，和普通的jQuery有什么不同呢？如果我已经了解 jQuery，那么对我来说会有什么新东西？

4

4 回答 4

95

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 代码。另一方面，jQueryUI 组件通常是通过编写几行 JavaScript 来在 DOM 中实例化组件来创建的。

于 2012-05-01T00:15:21.667 回答
28

什么是 jQuery Mobile

JQM（jQuery mobile）是建立在jQuery之上的手机用户界面系统。JQM 需要 jQuery 才能工作。与其他类似的手机框架不同，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祝你好运！

于 2012-05-01T00:16:15.833 回答
6

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

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

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

于 2012-04-30T23:32:41.690 回答
2

上面没有足够的评论点，所以添加到线程来回答安迪的第二个依赖问题。

我相信您正在寻找的东西在这里：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>
于 2014-08-16T13:21:59.573 回答