Question

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

但自然有一些故障与我如何格式化事物以及它们实际出现在我正在测试的移动设备屏幕上的方式有关，并且在尝试解决这些问题时，我偶然发现了许多建议以使事情变得更容易我自己使用jQuery mobile。

现在这让我感到困惑 - jQuery没有格式化。这只是我初学者对移动CSS的一级知识造成的问题。

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

Answer 1

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

jQueryUI 是一组用户界面组件＆amp;基于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中的组件。

Answer 2

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祝你好运！

Answer 3

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

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

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

Answer 4

上面没有足够的评论来评论，所以添加到线程来回答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>

jQuery和jQuery Mobile之间的区别？

4 个答案: