JQuery ve jQuery Mobile arasındaki fark nedir?

Question 1

Mobil web geliştirmede yeniyim ve PhoneGap ile sık sık jQuery kullanan bir mobil uygulama yaptım.

Ancak, doğal olarak, şeyleri nasıl biçimlendirdiğim ve test ettiğim mobil cihaz ekranlarında gerçekte görünme biçimleriyle ilgili birkaç aksaklık vardı ve bunları çözmeye çalışırken, kullanarak işleri kendim için kolaylaştırmak için birçok öneri buldum. jQuery mobile.

Şimdi bu kafamı karıştırıyor - jQuery'nin biçimlendirme rulosu yok. Sorunlara neden olan, başlangıç seviyesindeki mobil CSS bilgisiydi.

Peki jQuery mobile tam olarak ne yapıyor ve sıradan jQuery'den farkı nedir? JQuery'yi zaten biliyorsam, benim için yeni olan ne olacak?

Question 2

jQuery , tamamen tarayıcılarda komut dosyasını basitleştirmek ve standartlaştırmak için tasarlanmıştır. Düşük seviyeli şeylere odaklanır: öğeler oluşturma, DOM'u değiştirme, öznitelikleri yönetme, HTTP isteklerini gerçekleştirme vb.

jQueryUI , jQuery üzerine inşa edilmiş bir dizi kullanıcı arayüzü bileşenleri ve özelliğidir (yani çalışması için jQuery gerekir): düğmeler, iletişim kutuları, kaydırıcılar, sekmeler, daha gelişmiş animasyonlar, sürükle / bırak işlevi.

jQuery ve jQueryUI, sitenize (masaüstü veya mobil) 'eklenmek' için tasarlanmıştır - belirli bir özellik eklemek isterseniz, jQuery veya jQueryUI yardımcı olabilir.

Ancak jQuery Mobile tam bir çerçevedir. Bir mobil site için başlangıç noktanız olması amaçlanmıştır. JQuery gerektirir ve mobil uyumlu siteler oluşturmak için hem UI bileşenleri hem de API özellikleri sağlamak için hem jQuery hem de jQueryUI özelliklerini kullanır. Yine de istediğiniz kadar çok veya az kullanabilirsiniz, ancak jQuery Mobile , izin verirseniz tüm görüntü alanını mobil uyumlu bir şekilde kontrol edebilir .

Diğer bir önemli fark, jQuery ve jQueryUI'nin HTML ve CSS'nizin üzerinde bir katman olmayı amaçlamasıdır. İşaretlemenizi yalnız bırakıp jQuery ile geliştirebilmelisiniz. Ancak jQuery Mobile, bileşenlerin yalnızca HTML kullanarak nerede görünmesini istediğinizi tanımlamanın yollarını sağlar - örneğin (jQuery Mobile sitesinden):

<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-roleNitelik mobil cihazlara uygun bir kullanıcı arayüzü bileşeni haline bu listeyi açmak için jQuery Mobile söyler ve data-insetve data-filterbu seti özelliklerini nitelikleri - JavaScript tek bir satır yazmadan. Diğer yandan jQueryUI bileşenleri, bileşenin DOM'da somutlaştırılması için normalde birkaç satır JavaScript yazarak oluşturulur.

Question 3

JQuery mobile nedir

JQM (jQuery mobile), jQuery üzerine inşa edilmiş, cep telefonları için bir kullanıcı arabirim sistemidir. JQM'nin çalışması için jQuery gereklidir. Diğer benzer cep telefonu çerçevelerinden farklı olarak JQM, yalnızca mobil webkit tarayıcıları değil, tüm büyük mobil, tablet, e-okuyucu ve masaüstü platformları için desteği hedefler. Çerçevenin en dikkate değer özelliklerinden biri, animasyonlu sayfa geçişleri kullanan (çok havalı) Ajax navigasyon sistemidir.

Senin için yeni ne olabilir

Yeni kullanıcılara virajlı bir top fırlatan JQM ile ilgili bir şey ajax navigasyonu. Jquery'den geldiğinizde, muhtemelen javascript'inizi her sayfaya eklemeye ve ardından tüm eğlenceli javascript etkinliklerinizi başlatmak için dom ready ( $(function(){ ... }veya $(document).ready(function(){ .... }) kullanmaya alışmışsınızdır . Ancak JQM ajax navigasyonu kullandığından, sistem diğer sayfaları ilk sayfayla aynı doma çekecek ve <head>. Bir sonraki sayfa ajax ile yüklendiğinde, içerideki eşyalarınızın $(function(){ ...}ikinci sayfada çalışmayacağını fark edeceksiniz . Bunun çözümü pageinit olayına bağlanmaktır. Aşağıdaki örnekler yolculuğunuzun başlangıcında size yardımcı olacaktır:

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

});

Belirli bir sayfayı hedeflemek için sayfanın kimliğini eklersiniz:

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

});

Yeni sayfa olaylarını anlamak, JQM ile başlarken size çok yardımcı olacaktır. http://jquerymobile.com/demos/1.1.0/docs/api/events.html İyi şanslar!

Question 4

jQuery, DOM işleme / geçiş ve AJAX JavaScript çerçevesidir. Farklı tarayıcılar arasındaki karmaşıklığı otomatik olarak özetler. Birçok görevi basitleştiren sayısız jQuery eklentisi vardır.

jQuery Mobile, jQuery üzerine kurulu mobil uygulamalara yönelik bir UI çerçevesidir. Tema ve UI bileşenlerine sahiptir.

Sonuç olarak, bunlar ücretsizdir. JQuery'yi kullanmak için jQuery Mobile kullanmanız gerekmez. Ancak jQuery Mobile'ı kullanmak için jQuery kullanmanız gerekir.

Question 5

Yukarıda yorumlamak için yeterli puanınız yok, bu yüzden Andy'nin ikinci bağımlılık sorusunu yanıtlamak için ileti dizisine ekleyin.

Aradığınız şeyin burada olduğuna inanıyorum: 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>