jQuery 和 jQuery Mobile 的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10391856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between jQuery and jQuery Mobile?
提问by temporary_user_name
I'm new to mobile web development, and I just made a mobile-app with PhoneGap, employing frequent use of jQuery.
我是移动 Web 开发的新手，我刚刚使用 PhoneGap 制作了一个移动应用程序，经常使用 jQuery。
But there were naturally a couple of glitches related to how I formatted things and the way they actually appeared on the mobile device screens I was testing with, and in trying to work these out I stumbled across many suggestions to make things easier on myself by using jQuery mobile.
但是自然有一些与我如何格式化事物以及它们在我正在测试的移动设备屏幕上实际出现的方式有关的故障，在尝试解决这些问题时，我偶然发现了许多建议，通过使用jQuery 移动版。
Now this confuses me-- jQuery had no roll in formatting. That was just my beginner's level knowledge of mobile CSS that caused the problems.
现在这让我很困惑——jQuery 在格式上没有任何作用。这只是我对移动 CSS 的初学者水平的知识，导致了这些问题。
So what exactly does jQuery mobile do, and how is it different from ordinary jQuery? If I already know jQuery, what's going to be new to me?
那么jQuery mobile究竟是做什么的，它和普通的jQuery有什么不同呢？如果我已经知道 jQuery，那么对我来说什么是新的？
回答by Stu Cox
jQueryis purely designed to simplify and standardise scripting across browsers. It focuses on the low-level stuff: creating elements, manipulating the DOM, managing attributes, performing HTTP requests, etc.
jQuery纯粹是为了简化和标准化跨浏览器的脚本编写。它专注于底层的东西：创建元素、操作 DOM、管理属性、执行 HTTP 请求等。
jQueryUIis a set of user interface components & features built on top of jQuery (i.e. it needs jQuery to work): buttons, dialog boxes, sliders, tabs, more advanced animations, drag/drop functionality.
jQueryUI是一组建立在 jQuery 之上的用户界面组件和功能（即它需要 jQuery 才能工作）：按钮、对话框、滑块、选项卡、更高级的动画、拖放功能。
jQuery and jQueryUI are both designed to be 'added' to your site (desktop or mobile) - if you want to add a particular feature, jQuery or jQueryUI might be able to help.
jQuery 和 jQueryUI 都旨在“添加”到您的站点（桌面或移动） - 如果您想添加特定功能，jQuery 或 jQueryUI 可能会有所帮助。
jQuery Mobile, however, is a full framework. It's intended to be your starting point for a mobile site. It requires jQuery and makes use of features of both jQuery and jQueryUI to provide both UI components and API features for building mobile-friendly sites. You can still use as much or as little of it as you like, but jQuery Mobile cancontrol the whole viewport in a mobile-friendly way if you let it.
然而，jQuery Mobile是一个完整的框架。它旨在成为您创建移动网站的起点。它需要 jQuery 并利用 jQuery 和 jQueryUI 的特性来提供 UI 组件和 API 特性来构建移动友好的站点。您仍然可以随心所欲地使用它，但如果您愿意，jQuery Mobile可以以移动友好的方式控制整个视口。
Another major difference is that jQuery and jQueryUI aim to be a layer on top of your HTML and CSS. You should be able to just leave your markup alone and enhance it with jQuery. However, jQuery Mobile provides ways to define where you want components to appear using HTML alone - e.g. (from the jQuery Mobile site):
另一个主要区别是 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>
The data-roleattribute tells jQuery Mobile to turn this list into a mobile-friendly UI component and the data-insetand data-filterattributes set properties of that - without writing a single line of JavaScript. jQueryUI components, on the other hand, are normally created by writing a few lines of JavaScript to instantiate the component in the DOM.
该data-role属性告诉 jQuery Mobile 将此列表转换为适合移动设备的 UI 组件，data-inset并data-filter设置其属性 - 无需编写任何 JavaScript 代码。另一方面，jQueryUI 组件通常是通过编写几行 JavaScript 来实例化 DOM 中的组件来创建的。
回答by codaniel
What jQuery mobile is
什么是 jQuery 移动版
JQM(jQuery mobile) is a user interface system for mobile phones that is built on top of jQuery . jQuery is required for JQM to work. Unlike other similar mobile phone frameworks JQM targets support for all major mobile, tablet, e-reader and desktop platforms and not just mobile webkit browsers. One of the most notable features of the framework is the Ajax navigation system that uses animated page transitions(very cool).
JQM(jQuery mobile) 是一个建立在 jQuery 之上的手机用户界面系统。JQM 需要 jQuery 才能工作。与其他类似的手机框架不同，JQM 的目标是支持所有主要的移动、平板电脑、电子阅读器和桌面平台，而不仅仅是移动 webkit 浏览器。该框架最显着的特性之一是使用动画页面转换的 Ajax 导航系统（非常酷）。
What may be new to you
什么对你来说可能是新的
One thing about JQM that throws a curve ball at new users is the ajax navigation. Coming from jquery you are probably used to including your javascript in every page and then using dom ready( $(function(){ ... }or $(document).ready(function(){ .... }) to fire up all your fun javascript activities. But because JQM uses ajax navigation the system will pull other pages into the same dom as the first page and does not load your scripts contained in the <head>. When the next page is loaded via ajax you will notice that your stuff inside $(function(){ ...}will not work on the second page. The solution to this is binding to the pageinit event. These following examples will help you out in the beginning of your journey:
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
});
In order to target a certain page you add the id of the page:
为了定位某个页面，您添加页面的 id：
$(document).on('pageinit','#page2', function(){ // this fires for #page2 only
});
Understanding the new page events will help you alot when starting out with JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.htmlGood luck!
在开始使用 JQM 时，了解新页面事件将对您有很大帮助。http://jquerymobile.com/demos/1.1.0/docs/api/events.html祝你好运！
回答by Daniel A. White
jQuery is a DOM manipulating/traversing and AJAX JavaScript framework. It abstracts out a lot of the complexity between the different browsers automatically. There are countless jQuery plugins that simplify many task.
jQuery 是一个 DOM 操作/遍历和 AJAX JavaScript 框架。它自动抽象出不同浏览器之间的许多复杂性。有无数的 jQuery 插件可以简化许多任务。
jQuery Mobile is a UI framework geared to mobile applications that is built on jQuery. It has theming and UI components.
jQuery Mobile 是一个 UI 框架，适用于基于 jQuery 构建的移动应用程序。它具有主题和 UI 组件。
In all, they are complimentary. You don't have to use jQuery Mobile to use jQuery. But to use jQuery Mobile, you have to use jQuery.
总之，它们是免费的。您不必使用 jQuery Mobile 即可使用 jQuery。但是要使用 jQuery Mobile，您必须使用 jQuery。
回答by TransitDataHead
Don't have enough points to comment above so adding to thread to answer Andy's second question of dependencies.
上面没有足够的点数来评论，所以添加到线程来回答安迪的第二个依赖问题。
I believe what you are looking for is here: jQuery Mobile Demo
我相信你要找的就在这里：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>
