Perbedaan antara jQuery dan jQuery Mobile?

Question 1

Saya baru mengenal pengembangan web seluler, dan saya baru saja membuat aplikasi seluler dengan PhoneGap, yang sering menggunakan jQuery.

Tapi tentu saja ada beberapa gangguan terkait dengan cara saya memformat sesuatu dan cara mereka benar-benar muncul di layar perangkat seluler yang saya uji, dan saat mencoba menyelesaikannya, saya menemukan banyak saran untuk mempermudah diri saya sendiri dengan menggunakan jQuery seluler.

Sekarang ini membingungkan saya - jQuery tidak memiliki gulungan dalam pemformatan. Itu hanya pengetahuan tingkat pemula saya tentang CSS seluler yang menyebabkan masalah.

Jadi apa sebenarnya yang dilakukan jQuery mobile, dan apa bedanya dengan jQuery biasa? Jika saya sudah tahu jQuery, apa yang baru bagi saya?

Question 2

jQuery murni dirancang untuk menyederhanakan dan membakukan skrip di seluruh browser. Ini berfokus pada hal-hal tingkat rendah: membuat elemen, memanipulasi DOM, mengelola atribut, melakukan permintaan HTTP, dll.

jQueryUI adalah sekumpulan komponen & fitur antarmuka pengguna yang dibangun di atas jQuery (yaitu, perlu jQuery untuk bekerja): tombol, kotak dialog, slider, tab, animasi yang lebih canggih, fungsionalitas seret / lepas.

jQuery dan jQueryUI keduanya dirancang untuk 'ditambahkan' ke situs Anda (desktop atau seluler) - jika Anda ingin menambahkan fitur tertentu, jQuery atau jQueryUI mungkin dapat membantu.

jQuery Mobile , bagaimanapun, adalah kerangka kerja lengkap. Ini dimaksudkan sebagai titik awal Anda untuk situs seluler. Ini membutuhkan jQuery dan memanfaatkan fitur jQuery dan jQueryUI untuk menyediakan komponen UI dan fitur API untuk membangun situs yang ramah seluler. Anda masih dapat menggunakan sebanyak atau sesedikit yang Anda suka, tetapi jQuery Mobile dapat mengontrol seluruh area pandang dengan cara yang ramah seluler jika Anda mengizinkannya.

Perbedaan utama lainnya adalah bahwa jQuery dan jQueryUI bertujuan untuk menjadi lapisan di atas HTML dan CSS Anda. Anda harus bisa membiarkan markup Anda sendiri dan meningkatkannya dengan jQuery. Namun, jQuery Mobile menyediakan cara untuk menentukan di mana Anda ingin komponen muncul hanya menggunakan HTML - misalnya (dari situs 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-roleatribut memberitahu jQuery Mobile untuk mengubah daftar ini menjadi komponen UI untuk seluler dan data-insetdan data-filteratribut sifat set yang - tanpa menulis satu baris JavaScript. Komponen jQueryUI, di sisi lain, biasanya dibuat dengan menulis beberapa baris JavaScript untuk membuat instance komponen di DOM.

Question 3

Apa itu jQuery mobile

JQM (jQuery mobile) adalah sistem antarmuka pengguna untuk ponsel yang dibangun di atas jQuery. jQuery diperlukan agar JQM berfungsi. Tidak seperti framework ponsel serupa lainnya, JQM menargetkan dukungan untuk semua platform seluler, tablet, e-reader, dan desktop utama dan bukan hanya browser webkit seluler. Salah satu fitur kerangka kerja yang paling menonjol adalah sistem navigasi Ajax yang menggunakan transisi halaman animasi (sangat keren).

Apa yang mungkin baru bagi Anda

Satu hal tentang JQM yang melempar bola kurva ke pengguna baru adalah navigasi ajax. Berasal dari jquery Anda mungkin terbiasa memasukkan javascript Anda di setiap halaman dan kemudian menggunakan dom ready ( $(function(){ ... }atau $(document).ready(function(){ .... }) untuk menjalankan semua aktivitas javascript Anda yang menyenangkan. Tetapi karena JQM menggunakan navigasi ajax, sistem akan menarik halaman lain ke dom yang sama dengan halaman pertama dan tidak memuat skrip Anda yang terdapat di file <head>. Ketika halaman berikutnya dimuat melalui ajax Anda akan melihat bahwa barang-barang Anda di dalamnya $(function(){ ...}tidak akan berfungsi di halaman kedua. Solusi untuk ini mengikat ke acara pageinit. Contoh-contoh berikut ini akan membantu Anda di awal perjalanan Anda:

$(document).on('pageinit', function(){ // this fires for each new page

});

Untuk menargetkan halaman tertentu Anda menambahkan id halaman:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Memahami acara halaman baru akan banyak membantu Anda saat memulai dengan JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Semoga beruntung!

Question 4

jQuery adalah kerangka manipulasi / traversing DOM dan AJAX JavaScript. Ini mengabstraksi banyak kerumitan antara browser yang berbeda secara otomatis. Ada banyak plugin jQuery yang menyederhanakan banyak tugas.

jQuery Mobile adalah kerangka kerja UI yang ditujukan untuk aplikasi seluler yang dibangun di atas jQuery. Ini memiliki komponen tema dan UI.

Secara keseluruhan, mereka gratis. Anda tidak harus menggunakan jQuery Mobile untuk menggunakan jQuery. Tetapi untuk menggunakan jQuery Mobile, Anda harus menggunakan jQuery.

Question 5

Tidak memiliki cukup poin untuk dikomentari di atas jadi tambahkan ke utas untuk menjawab pertanyaan kedua tentang dependensi Andy.

Saya yakin apa yang Anda cari ada di sini: 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>