Sự khác biệt giữa jQuery và jQuery Mobile?

Question 1

Tôi là người mới phát triển web di động và tôi vừa tạo một ứng dụng di động với PhoneGap, sử dụng jQuery thường xuyên.

Nhưng tự nhiên có một vài trục trặc liên quan đến cách tôi định dạng mọi thứ và cách chúng thực sự xuất hiện trên màn hình thiết bị di động mà tôi đang thử nghiệm và khi cố gắng giải quyết những vấn đề này, tôi đã tình cờ gặp nhiều đề xuất để tự làm mọi thứ dễ dàng hơn bằng cách sử dụng jQuery di động.

Bây giờ điều này làm tôi bối rối - jQuery không có định dạng. Đó chỉ là kiến thức sơ cấp của tôi về CSS dành cho thiết bị di động đã gây ra sự cố.

Vậy chính xác thì jQuery mobile làm gì, và nó khác jQuery thông thường như thế nào? Nếu tôi đã biết jQuery, điều gì sẽ trở nên mới mẻ với tôi?

Question 2

jQuery hoàn toàn được thiết kế để đơn giản hóa và chuẩn hóa tập lệnh trên các trình duyệt. Nó tập trung vào những thứ cấp thấp: tạo các phần tử, thao tác với DOM, quản lý các thuộc tính, thực hiện các yêu cầu HTTP, v.v.

jQueryUI là một tập hợp các thành phần & tính năng giao diện người dùng được xây dựng trên nền jQuery (tức là nó cần jQuery để hoạt động): các nút, hộp thoại, thanh trượt, tab, hoạt ảnh nâng cao hơn, chức năng kéo / thả.

jQuery và jQueryUI đều được thiết kế để 'thêm' vào trang web của bạn (máy tính để bàn hoặc thiết bị di động) - nếu bạn muốn thêm một tính năng cụ thể, jQuery hoặc jQueryUI có thể trợ giúp.

jQuery Mobile , tuy nhiên, là một khuôn khổ đầy đủ. Nó được dự định là điểm khởi đầu của bạn cho một trang web di động. Nó yêu cầu jQuery và sử dụng các tính năng của cả jQuery và jQueryUI để cung cấp cả các thành phần giao diện người dùng và các tính năng API để xây dựng các trang web thân thiện với thiết bị di động. Bạn vẫn có thể sử dụng nhiều hay ít tùy thích, nhưng jQuery Mobile có thể kiểm soát toàn bộ khung nhìn theo cách thân thiện với thiết bị di động nếu bạn cho phép.

Một điểm khác biệt lớn nữa là jQuery và jQueryUI nhằm mục đích trở thành một lớp trên HTML và CSS của bạn. Bạn có thể chỉ để lại đánh dấu của mình và nâng cao nó với jQuery. Tuy nhiên, jQuery Mobile cung cấp các cách để xác định vị trí bạn muốn các thành phần xuất hiện chỉ bằng HTML - ví dụ: (từ trang web 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>

Các data-rolethuộc tính nói với jQuery Mobile để biến danh sách này thành một thành phần giao diện người dùng điện thoại di động thân thiện và data-insetvà data-filtercác thuộc tính thuộc tính bộ đó - mà không cần viết một dòng duy nhất của JavaScript. Mặt khác, các thành phần jQueryUI thường được tạo bằng cách viết một vài dòng JavaScript để khởi tạo thành phần đó trong DOM.

Question 3

JQuery mobile là gì

JQM (jQuery mobile) là một hệ thống giao diện người dùng cho điện thoại di động được xây dựng dựa trên jQuery. jQuery là bắt buộc để JQM hoạt động. Không giống như các khuôn khổ điện thoại di động tương tự khác, JQM nhắm mục tiêu hỗ trợ cho tất cả các nền tảng di động, máy tính bảng, máy đọc sách điện tử và máy tính để bàn chứ không chỉ các trình duyệt webkit di động. Một trong những tính năng đáng chú ý nhất của framework là hệ thống điều hướng Ajax sử dụng chuyển trang hoạt hình (rất tuyệt).

Điều gì có thể mới đối với bạn

Một điều về JQM có thể ném một quả bóng cong vào người dùng mới là điều hướng ajax. Đến từ jquery, bạn có thể quen với việc đưa javascript của mình vào mọi trang và sau đó sử dụng dom sẵn sàng ( $(function(){ ... }hoặc $(document).ready(function(){ .... }) để kích hoạt tất cả các hoạt động javascript thú vị của bạn. Nhưng vì JQM sử dụng điều hướng ajax nên hệ thống sẽ kéo các trang khác vào cùng một dom như trang đầu tiên và không tải các tập lệnh của bạn có trong <head>. Khi trang tiếp theo được tải qua ajax, bạn sẽ nhận thấy rằng nội dung bên trong của bạn $(function(){ ...}sẽ không hoạt động trên trang thứ hai. Giải pháp cho điều này là ràng buộc với sự kiện pageinit. Những ví dụ sau đây sẽ giúp bạn trong quá trình bắt đầu hành trình:

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

});

Để nhắm mục tiêu một trang nhất định, bạn thêm id của trang:

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

});

Hiểu các sự kiện trang mới sẽ giúp bạn rất nhiều khi bắt đầu với JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Chúc may mắn!

Question 4

jQuery là một khung JavaScript thao tác / duyệt qua DOM và AJAX. Nó tự động tóm tắt rất nhiều sự phức tạp giữa các trình duyệt khác nhau. Có vô số plugin jQuery giúp đơn giản hóa nhiều công việc.

jQuery Mobile là một khung giao diện người dùng hướng đến các ứng dụng di động được xây dựng trên jQuery. Nó có chủ đề và các thành phần giao diện người dùng.

Nói chung, chúng đều miễn phí. Bạn không cần phải sử dụng jQuery Mobile để sử dụng jQuery. Nhưng để sử dụng jQuery Mobile, bạn phải sử dụng jQuery.

Question 5

Không có đủ điểm để nhận xét ở trên vì vậy hãy thêm vào chuỗi để trả lời câu hỏi thứ hai của Andy về sự phụ thuộc.

Tôi tin rằng những gì bạn đang tìm kiếm là ở đây: 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>