ความแตกต่างระหว่าง jQuery และ jQuery Mobile

Question 1

ฉันยังใหม่กับการพัฒนาเว็บบนมือถือและเพิ่งสร้างแอพมือถือด้วย PhoneGap โดยใช้ jQuery เป็นประจำ

แต่มีข้อบกพร่องสองสามอย่างที่เกี่ยวข้องกับวิธีที่ฉันจัดรูปแบบสิ่งต่าง ๆ และวิธีที่พวกเขาปรากฏบนหน้าจออุปกรณ์มือถือที่ฉันทดสอบด้วยและในการพยายามทำงานเหล่านี้ฉันพบคำแนะนำมากมายเพื่อทำให้สิ่งต่างๆง่ายขึ้นในตัวเองโดยใช้ jQuery มือถือ

ตอนนี้สิ่งนี้ทำให้ฉันสับสน - jQuery ไม่มีม้วนในการจัดรูปแบบ นั่นเป็นเพียงความรู้ระดับเริ่มต้นของฉันเกี่ยวกับ CSS บนมือถือที่ทำให้เกิดปัญหา

jQuery mobile ทำอะไรได้บ้างและแตกต่างจาก jQuery ทั่วไปอย่างไร? ถ้าฉันรู้จัก jQuery แล้วจะมีอะไรใหม่สำหรับฉัน?

Question 2

jQueryได้รับการออกแบบมาเพื่อลดความซับซ้อนและสร้างมาตรฐานการเขียนสคริปต์ในเบราว์เซอร์ โดยมุ่งเน้นไปที่สิ่งที่มีระดับต่ำเช่นการสร้างองค์ประกอบการจัดการ DOM การจัดการแอตทริบิวต์การดำเนินการตามคำขอ HTTP เป็นต้น

jQueryUIเป็นชุดส่วนประกอบและคุณสมบัติส่วนต่อประสานผู้ใช้ที่สร้างขึ้นจาก jQuery (กล่าวคือต้องใช้ jQuery ในการทำงาน): ปุ่มกล่องโต้ตอบแถบเลื่อนแท็บภาพเคลื่อนไหวขั้นสูงเพิ่มเติมฟังก์ชันการลาก / วาง

jQuery และ jQueryUI ได้รับการออกแบบให้ 'เพิ่ม' ในไซต์ของคุณ (เดสก์ท็อปหรือมือถือ) - หากคุณต้องการเพิ่มคุณสมบัติเฉพาะ jQuery หรือ jQueryUI อาจช่วยได้

jQuery Mobileเป็นเฟรมเวิร์กเต็มรูปแบบ โดยมีวัตถุประสงค์เพื่อเป็นจุดเริ่มต้นสำหรับไซต์บนมือถือ ต้องใช้ 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แอตทริบิวต์บอก jQuery มือถือที่จะเปิดรายการนี้เป็นองค์ประกอบ UI ที่เหมาะกับมือถือและdata-insetและdata-filterคุณลักษณะคุณสมบัติชุดว่า - โดยไม่ต้องเขียนบรรทัดเดียวของ JavaScript ในทางกลับกันคอมโพเนนต์ jQueryUI ถูกสร้างขึ้นโดยการเขียน JavaScript สองสามบรรทัดเพื่อสร้างอินสแตนซ์คอมโพเนนต์ใน DOM

Question 3

jQuery mobile คืออะไร

JQM (jQuery mobile) เป็นระบบส่วนต่อประสานผู้ใช้สำหรับโทรศัพท์มือถือที่สร้างขึ้นจาก jQuery จำเป็นต้องใช้ jQuery เพื่อให้ JQM ทำงานได้ ซึ่งแตกต่างจากเฟรมเวิร์กโทรศัพท์มือถืออื่น ๆ ที่คล้ายกัน JQM ตั้งเป้าไว้ว่าจะรองรับแพลตฟอร์มมือถือแท็บเล็ตอีรีดเดอร์และเดสก์ท็อปที่สำคัญทั้งหมดไม่ใช่แค่เบราว์เซอร์เว็บคิทบนมือถือ หนึ่งในคุณสมบัติที่โดดเด่นที่สุดของเฟรมเวิร์กคือระบบนำทาง Ajax ที่ใช้การเปลี่ยนหน้าแบบเคลื่อนไหว (เจ๋งมาก)

อาจมีอะไรใหม่สำหรับคุณ

สิ่งหนึ่งเกี่ยวกับ JQM ที่ขว้างลูกโค้งให้กับผู้ใช้ใหม่คือการนำทาง ajax มาจาก jquery คุณอาจคุ้นเคยกับการรวม javascript ของคุณในทุก ๆ หน้าจากนั้นใช้ dom พร้อม ( $(function(){ ... }หรือ$(document).ready(function(){ .... }) เพื่อเริ่มกิจกรรมจาวาสคริปต์ที่สนุกสนานของคุณ แต่เนื่องจาก JQM ใช้การนำทางแบบ ajax ระบบจะดึงเพจอื่น ๆ มาไว้ในโดเมนเดียวกับหน้าแรกและไม่โหลดสคริปต์ของคุณที่มีอยู่ในไฟล์<head>. เมื่อโหลดหน้าถัดไปผ่าน ajax คุณจะสังเกตเห็นว่าสิ่งของที่อยู่ภายใน$(function(){ ...}จะไม่ทำงานในหน้าที่สอง วิธีแก้ปัญหานี้มีผลผูกพันกับเหตุการณ์ 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 ขอให้โชคดี!

Question 4

jQuery เป็น DOM จัดการ / ข้ามผ่านและกรอบงาน AJAX JavaScript มันจะสรุปความซับซ้อนระหว่างเบราว์เซอร์ต่างๆโดยอัตโนมัติ มีปลั๊กอิน jQuery มากมายที่ช่วยลดความซับซ้อนของงานต่างๆ

jQuery Mobile เป็นเฟรมเวิร์ก UI ที่มุ่งเน้นไปที่แอปพลิเคชันมือถือที่สร้างบน jQuery มีส่วนประกอบของธีมและ UI

โดยรวมแล้วเป็นบริการฟรี คุณไม่จำเป็นต้องใช้ jQuery Mobile เพื่อใช้ jQuery แต่ในการใช้ jQuery Mobile คุณต้องใช้ jQuery

Question 5

ไม่มีคะแนนเพียงพอที่จะแสดงความคิดเห็นด้านบนดังนั้นการเพิ่มในเธรดเพื่อตอบคำถามที่สองเกี่ยวกับการอ้างอิงของ Andy

ฉันเชื่อว่าสิ่งที่คุณกำลังมองหาอยู่ที่นี่: 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>