web-dev-qa-db-ja.com

jQueryとjQuery Mobileの違いは？

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

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

今、これは私を混乱させます。jQueryには書式設定がありませんでした。これは、問題を引き起こしたモバイルCSSの初心者レベルの知識でした。

それでは、jQuery mobileは正確に何をしますか、また通常のjQueryとはどう違うのですか？ jQueryをすでに知っている場合、私にとって何が新しくなるのでしょうか？

jqueryjquery-mobile
89
temporary_user_name

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

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

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

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

もう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属性は、jQuery MobileにこのリストをモバイルフレンドリーUIコンポーネントとdata-insetおよびdata-filter属性は、JavaScriptの1行を記述することなく、そのプロパティを設定します。一方、jQueryUIコンポーネントは、通常、DOMでコンポーネントをインスタンス化するJavaScriptの数行を記述することで作成されます。

91
Stu Cox

jQuery mobileとは

JQM（jQuery mobile）は、jQueryの上に構築された携帯電話用のユーザーインターフェイスシステムです。 jQMは、JQMが機能するために必要です。他の同様の携帯電話フレームワークとは異なり、JQMは、モバイルWebキットブラウザーだけでなく、すべての主要なモバイル、タブレット、e-リーダー、デスクトッププラットフォームのサポートを対象としています。フレームワークの最も注目すべき機能の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 頑張ってください！

28
codaniel

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

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

全部で、彼らは無料です。 jQueryを使用するためにjQuery Mobileを使用する必要はありません。ただし、jQuery Mobileを使用するには、jQueryを使用する必要があります。

4
Daniel A. White

上記のコメントに十分なポイントがないので、スレッドに追加して、依存関係に関するアンディの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>
2
TransitDataHead