jQueryとjQuery Mobileの違いは？

92

私はモバイルWeb開発に不慣れです。PhoneGapでモバイルアプリを作成し、jQueryを頻繁に使用しました。

しかし、私が物事をフォーマットした方法と、実際にテストしていたモバイルデバイスの画面に実際に表示された方法に関連するいくつかの不具合がありました。 jQueryモバイル。

今、これは私を混乱させます-jQueryはフォーマットの役割を持っていませんでした。問題の原因となったのは、モバイルCSSに関する初心者レベルの知識だけでした。

では、jQuery mobileは正確には何をするのでしょうか。また、jQueryモバイルは通常のjQueryとどう違うのですか jQueryをすでに知っている場合、何が新しくなりますか？

jquery jquery-mobile

— temporary_user_name
ソース

2

「これまで誰もこれを求めたことがないなんて信じられなかった」実際に彼らはそうしました：stackoverflow.com/q/6636388/368167

— Tamer Shlash '30 / 07/30

モバイルCSSとは何ですか？

— レジェンド

94

jQueryは、ブラウザ間でスクリプトを簡素化および標準化するために純粋に設計されています。要素の作成、DOMの操作、属性の管理、HTTPリクエストの実行など、低レベルのものに焦点を当てています。

jQueryUIは、jQueryの上に構築されたユーザーインターフェイスコンポーネントと機能のセットです（つまり、jQueryが機能する必要があります）：ボタン、ダイアログボックス、スライダー、タブ、より高度なアニメーション、ドラッグ/ドロップ機能。

jQueryとjQueryUIはどちらもサイト（デスクトップまたはモバイル）に「追加」できるように設計されています。特定の機能を追加したい場合は、jQueryまたはjQueryUIが役立ちます。

ただし、jQuery Mobileは完全なフレームワークです。これは、モバイルサイトの出発点となることを目的としています。jQueryが必要であり、jQueryとjQueryUIの両方の機能を利用して、UIコンポーネントと、モバイルフレンドリーなサイトを構築するためのAPI機能の両方を提供します。それでも好きなだけ使用できますが、jQuery Mobileを使用すると、ビューポート全体をモバイルフレンドリーな方法で制御できます。

もう1つの大きな違いは、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属性は、モバイル向けのUIコンポーネントにこのリストを有効にするjQueryのモバイルに指示し、data-insetかつdata-filterその一連のプロパティ属性-をJavaScriptを一行も書かず。一方、jQueryUIコンポーネントは、通常、数行のJavaScriptを記述してDOMでコンポーネントをインスタンス化することによって作成されます。

— スチュコックス
ソース

ブラウザーベースのWebサイトのjQuery + UIからモバイルデバイス向けのjQuery Mobileを理解するために、今、誰かが「進んで」いるので、この特定の回答が41の賛成票を受け取ったがコメントはないかどうかを確認するのに苦労しています。具体的には、「jQueryの上に構築された」jQueryUIとは異なり、jQuery Mobileは「しかし、完全なフレームワーク」であることを主な目的として指摘しています。これは、jQuery MobileもjQueryを実行する必要があることを（かなり正確に-私が思うに！）述べている以下の他の回答と完全に対立しており、必要な.jsと.cssについての個人的な混乱に加わっています。

— Andy Lorenz

3

申し訳ありませんが、jQuery MobileにもjQueryが必要であることを明確にしていません。更新します。私の回答は、jQuery Mobileを使い始める方法を説明するように実際に設計されたものではないことに注意してください（これは元の質問ではありませんでした）。

— Stu Cox

素晴らしいものStu、あなたの答えを微調整してくれてありがとう。「jquery mobileの初心者」が始めるのがどれほど難しいか、驚くかもしれません-jquerymobileのWebサイトでさえ、明らかにされていません！それ自体が別の混乱するポイントにつながります-jquerymobileにはどのバージョンのjquerymobileが必要なのですか？jquerymobile.comを書いている時点では、1.4.2がjQuery 1.8-1.10 / 2.0と互換性があることのみを示唆していますが、バージョンとjs / cssの依存関係が具体的に記述されている場所は見つかりません！

— Andy Lorenz

28

jQueryモバイルとは

JQM（jQuery mobile）は、jQueryの上に構築された携帯電話用のユーザーインターフェースシステムです。JQMが機能するにはjQueryが必要です。他の同様の携帯電話フレームワークとは異なり、JQMは、モバイルWebキットブラウザーだけでなく、すべての主要なモバイル、タブレット、電子書籍リーダー、デスクトッププラットフォームのサポートを対象としています。フレームワークの最も注目すべき機能の1つは、アニメーション化されたページ遷移を使用するAjaxナビゲーションシステムです（非常に優れています）。

あなたにとって新しいかもしれないもの

新規ユーザーにカーブボールを投げるJQMの1つは、ajaxナビゲーションです。jqueryから来ると、おそらくすべてのページにJavaScriptを含め、次にdom ready（$(function(){ ... }または$(document).ready(function(){ .... }）を使用してすべての楽しいJavaScriptアクティビティを起動することに慣れているでしょう。ただし、JQMはajaxナビゲーションを使用するため、システムは他のページを最初のページと同じdomにプルし、に含まれて<head>いるスクリプトをロードしません。ajaxを介して次のページが読み込まれると、中身$(function(){ ...}が2番目のページで機能しないことがわかります。これに対する解決策は、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頑張ってください！

— コダニエル
ソース

5

jQueryは、DOM操作/トラバースおよびAJAX JavaScriptフレームワークです。異なるブラウザ間の複雑さの多くを自動的に抽象化します。多くのタスクを簡素化する無数のjQueryプラグインがあります。

jQuery Mobileは、jQueryに基づいて構築されたモバイルアプリケーション向けのUIフレームワークです。テーマとUIコンポーネントがあります。

すべてにおいて、それらは無料です。jQueryを使用するためにjQuery Mobileを使用する必要はありません。ただし、jQuery Mobileを使用するには、jQueryを使用する必要があります。

— ダニエル・A・ホワイト
ソース

だから、それjQuery Mobileはのモバイル版jQuery UIですか？

— ジェフハインズ2012

@JeffHines-やや。それらは異なるコードベースですが、異なる方法で同様の目標を達成します。

— Daniel A. White

優れたコメント、ダニエルA.ホワイト。jQueryを使用するためにjQuery Mobileを使用する必要はありません。ただし、jQuery Mobileを使用するには、jQueryを使用する必要があります。

— user3174782 14

アルファ版は現在作業中です。jquerymobile.com/changelog/1.5.0-alpha1

— Jackson Ng

2

上記のコメントをするのに十分なポイントがないので、依存関係に関するAndyの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>

— TransitDataHead
ソース