jQuery와 jQuery Mobile의 차이점은?
저는 모바일 웹 개발이 처음이고, 핸드폰 갭으로 모바일 앱을 만들었고, jQuery를 자주 사용했습니다.
하지만 제가 사물을 포맷하는 방식과 테스트하는 모바일 기기 화면에 실제로 나타나는 방식과 관련된 몇 가지 결함이 자연스럽게 존재했고, 이를 해결하기 위해 저는 jQuery 모바일을 사용함으로써 제 자신을 좀 더 쉽게 만들 수 있는 많은 제안들을 우연히 발견했습니다.
이제 혼란스럽군요. jQuery는 포맷에 롤이 없었어요.문제를 일으킨 것은 모바일 CSS에 대한 초보자 수준의 지식일 뿐입니다.
그렇다면 jQuery mobile은 정확히 무엇을 하며, 일반 jQuery와 어떻게 다른가요?만약 제가 jQuery를 이미 알고 있다면, 저는 어떤 점이 새로울까요?
jQuery는 브라우저 전반에 걸쳐 스크립트를 단순화하고 표준화하기 위해 순수하게 설계되었습니다.요소 생성, DOM 조작, 속성 관리, HTTP 요청 수행 등 낮은 수준의 작업에 중점을 둡니다.
jQuery UI는 jQuery 위에 구축된 사용자 인터페이스 구성 요소 및 기능의 집합입니다(즉, 작동하려면 jQuery가 필요합니다). 버튼, 대화 상자, 슬라이더, 탭, 고급 애니메이션, 드래그/드롭 기능.
jQuery와 jQueryUI는 둘 다 사용자의 사이트(데스크탑 또는 모바일)에 '추가'되도록 설계되어 있습니다. 특정 기능을 추가하고 싶다면 jQuery 또는 jQueryUI가 도움이 될 수 있습니다.
그러나 jQuery Mobile은 완전한 프레임워크입니다.그것은 당신의 모바일 사이트의 출발점이 되기 위한 것입니다.jQuery가 필요하며, jQuery와 jQuery UI의 기능을 모두 활용하여 모바일 친화적인 사이트 구축을 위한 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속성은 자바스크립트를 한 줄도 쓰지 않고 속성을 설정합니다.그러나 jQueryUI 구성요소는 일반적으로 DOM에서 구성요소를 인스턴스화하기 위해 자바스크립트를 몇 줄 작성하여 생성됩니다.
jQuery mobile이란?
JQM(jQuery mobile)은 jQuery 위에 구축된 휴대폰용 사용자 인터페이스 시스템으로, JQM이 작동하기 위해서는 jQuery가 필요합니다.JQM은 유사한 다른 휴대전화 프레임워크와 달리 모바일 웹킷 브라우저뿐만 아니라 주요 모바일, 태블릿, 전자 리더 및 데스크톱 플랫폼 모두를 지원합니다.이 프레임워크의 가장 주목할 만한 기능 중 하나는 애니메이션 페이지 전환(매우 멋진)을 사용하는 Ajax 네비게이션 시스템입니다.
당신에게 새로운 것은 무엇입니까?
새로운 사용자에게 커브볼을 던지는 JQM의 한 가지는 아약스 내비게이션입니다.jquery에서 오는 당신은 아마 모든 페이지에 당신의 자바스크립트를 포함시킨 다음 domready()를 사용하는 것에 익숙할 것입니다.$(function(){ ... }아니면$(document).ready(function(){ .... }재미있는 자바스크립트 활동을 시작합니다.그러나 JQM은 ajax navigation을 사용하기 때문에 시스템은 다른 페이지를 첫 페이지와 같은 도메인으로 끌어 들이고 스크립트를 로드하지 않습니다.<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 자바스크립트 프레임워크입니다.그것은 서로 다른 브라우저들 사이의 많은 복잡성을 자동으로 추상화합니다.수많은 작업을 단순화하는 수많은 jQuery 플러그인이 있습니다.
jQuery Mobile은 jQuery 기반의 모바일 애플리케이션에 적합한 UI 프레임워크입니다.이것은 ming과 UI 구성요소를 가지고 있습니다.
모두 무료입니다.jQuery를 사용하기 위해 jQuery Mobile을 사용하지 않아도 됩니다.하지만 jQuery Mobile을 사용하려면 jQuery를 사용해야 합니다.
위에 언급할 포인트가 충분하지 않으므로 앤디의 두 번째 의존성 질문에 답하기 위해 스레드를 추가합니다.
저는 여러분이 찾으시는 것이 여기 있다고 믿습니다: 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>
언급URL : https://stackoverflow.com/questions/10391856/difference-between-jquery-and-jquery-mobile
'sourcecode' 카테고리의 다른 글
| 플러그인 및 테마를 설치할 수 없습니다. (0) | 2023.10.30 |
|---|---|
| click() 이벤트가 jQuery에서 두 번 호출됩니다. (0) | 2023.10.30 |
| 여러 행을 가져와 하나의 변수에 저장 - ORACLE 저장 프로시저 (0) | 2023.10.30 |
| iPhone ObjectiveC Apps의 C/C++ 정적 라이브러리 사용 (0) | 2023.10.30 |
| PostgreSQL에 비해 Mysql에 진공이 필요 없는 이유는 무엇입니까? (0) | 2023.10.30 |