[jquery] jQuery와 jQuery Mobile의 차이점은 무엇입니까?

Program / 글쓴이

저는 모바일 웹 개발이 처음이고 jQuery를 자주 사용하는 PhoneGap으로 모바일 앱을 만들었습니다.

하지만 자연스럽게 내가 사물을 포맷하는 방법과 내가 테스트 한 모바일 장치 화면에 실제로 나타나는 방식과 관련된 몇 가지 결함이 있었으며,이를 해결하려고 시도하면서 다음을 사용하여 작업을 더 쉽게 만들 수있는 많은 제안을 발견했습니다. jQuery 모바일.

이제 이것은 나를 혼란스럽게합니다. jQuery는 형식화에 롤이 없었습니다. 그것은 문제를 일으킨 모바일 CSS에 대한 초심자 수준의 지식이었습니다.

그렇다면 jQuery 모바일은 정확히 무엇을하며 일반 jQuery와 어떻게 다릅니 까? 이미 jQuery를 알고 있다면 새로운 기능은 무엇입니까?

답변

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 Mobile에이 목록을 모바일 친화적 인 UI 구성 요소로 전환하도록 지시하고 data-inset및 data-filter속성은 한 줄의 JavaScript를 작성하지 않고도 속성을 설정합니다. 반면에 jQueryUI 구성 요소는 일반적으로 몇 줄의 JavaScript를 작성하여 DOM에서 구성 요소를 인스턴스화함으로써 생성됩니다.

답변

jQuery 모바일이란?

JQM (jQuery mobile)은 jQuery 위에 구축 된 휴대폰 용 사용자 인터페이스 시스템입니다. JQM이 작동하려면 jQuery가 필요합니다. 다른 유사한 휴대폰 프레임 워크와 달리 JQM은 모바일 웹킷 브라우저뿐만 아니라 모든 주요 모바일, 태블릿, e-reader 및 데스크탑 플랫폼에 대한 지원을 목표로합니다. 프레임 워크의 가장 눈에 띄는 기능 중 하나는 애니메이션 페이지 전환 (매우 멋진)을 사용하는 Ajax 탐색 시스템입니다.

당신에게 새로운 것

새로운 사용자에게 커브 볼을 던지는 JQM의 한 가지는 ajax 탐색입니다. jquery에서 왔을 때 모든 페이지에 자바 스크립트를 포함시킨 다음 dom ready ( $(function(){ ... }또는 $(document).ready(function(){ .... })를 사용하여 모든 재미있는 자바 스크립트 활동을 시작하는 데 익숙 할 것입니다 . 그러나 JQM은 ajax 탐색을 사용하기 때문에 시스템은 다른 페이지를 첫 번째 페이지와 동일한 dom으로 가져오고 <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 행운을 빕니다!

답변

jQuery는 DOM 조작 / 순회 및 AJAX JavaScript 프레임 워크입니다. 서로 다른 브라우저 간의 많은 복잡성을 자동으로 추상화합니다. 많은 작업을 단순화하는 수많은 jQuery 플러그인이 있습니다.

jQuery Mobile은 jQuery를 기반으로하는 모바일 애플리케이션에 맞춰진 UI 프레임 워크입니다. 테마 및 UI 구성 요소가 있습니다.

모두 무료입니다. jQuery를 사용하기 위해 jQuery Mobile을 사용할 필요는 없습니다. 그러나 jQuery Mobile을 사용하려면 jQuery를 사용해야합니다.

답변

위에 언급 할 충분한 포인트가 없으므로 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>

답변