[解決済み] jQueryとjQuery Mobileの違いとは？

質問

私はモバイルWeb開発の初心者で、PhoneGapを使ってjQueryを多用したモバイルアプリを作ったところです。

しかし、私が物事をどのようにフォーマットするか、そして私がテストしていたモバイル デバイスの画面に実際に表示される方法に関連するいくつかの不具合が当然あり、これらを解決しようとして、jQuery mobile を使用して自分自身で物事を簡単にするための多くの提案を偶然目にしました。

jQuery は書式設定に関与していません。私のモバイル CSS についての初心者レベルの知識が問題を引き起こしただけです。

では、jQuery mobileはいったい何をするのでしょうか、そして普通のjQueryとどう違うのでしょうか。もし私がすでにjQueryを知っているなら、何が新しくなるのでしょうか？

どのように解決するのですか？

jQuery は、ブラウザ間のスクリプティングを単純化し、標準化するために設計されています。要素の作成、DOM の操作、属性の管理、HTTP リクエストの実行など、低レベルのものに焦点を合わせています。

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

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

jQueryモバイル しかし、これは完全なフレームワークです。これは、モバイルサイトの出発点となることを意図しています。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 属性は、このリストをモバイルフレンドリーなUIコンポーネントに変換するようjQuery Mobileに指示し data-inset と data-filter 属性は、JavaScriptを一行も書かずに、そのプロパティを設定します。一方、jQueryUIコンポーネントは、通常、DOMにコンポーネントをインスタンス化するために数行のJavaScriptを書くことで作成されます。