Diferença entre jQuery e jQuery Mobile?

92

Sou novo no desenvolvimento web móvel e acabei de fazer um aplicativo móvel com PhoneGap, empregando o uso frequente de jQuery.

Mas havia naturalmente algumas falhas relacionadas à forma como formatei as coisas e a maneira como elas realmente apareciam nas telas dos dispositivos móveis que eu estava testando e, ao tentar resolver isso, deparei com muitas sugestões para tornar as coisas mais fáceis para mim usando jQuery mobile.

Agora, isso me confunde - jQuery não tinha rolagem na formatação. Esse foi apenas o meu nível de conhecimento de iniciante em CSS móvel que causou os problemas.

Então, o que exatamente o jQuery mobile faz e como ele é diferente do jQuery comum? Se eu já conheço jQuery, o que vai ser novo para mim?

jquery jquery-mobile

— Temporary_user_name
fonte

2

"Eu não conseguia acreditar que ninguém tinha perguntado isso antes." Na verdade, eles fizeram: stackoverflow.com/q/6636388/368167

— Tamer Shlash

O que é css móvel?

— Legends

94

jQuery é puramente projetado para simplificar e padronizar scripts em navegadores. Ele se concentra nas coisas de baixo nível: criação de elementos, manipulação do DOM, gerenciamento de atributos, execução de solicitações HTTP, etc.

jQueryUI é um conjunto de componentes e recursos de interface do usuário construídos em cima do jQuery (ou seja, ele precisa do jQuery para funcionar): botões, caixas de diálogo, controles deslizantes, guias, animações mais avançadas, funcionalidade de arrastar / soltar.

jQuery e jQueryUI foram projetados para serem 'adicionados' ao seu site (desktop ou celular) - se você quiser adicionar um recurso específico, jQuery ou jQueryUI podem ajudar.

jQuery Mobile , no entanto, é uma estrutura completa. Pretende ser o seu ponto de partida para um site móvel. Ele requer jQuery e faz uso de recursos de jQuery e jQueryUI para fornecer componentes de UI e recursos de API para a construção de sites compatíveis com dispositivos móveis. Você ainda pode usar o quanto quiser, mas o jQuery Mobile pode controlar toda a janela de visualização de uma maneira compatível com dispositivos móveis, se você permitir.

Outra grande diferença é que jQuery e jQueryUI pretendem ser uma camada acima de seu HTML e CSS. Você deve ser capaz de deixar sua marcação e aprimorá-la com jQuery. No entanto, o jQuery Mobile fornece maneiras de definir onde você deseja que os componentes apareçam usando apenas HTML - por exemplo, (do site do 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>

O data-roleatributo diz ao jQuery Mobile para transformar essa lista em um componente de UI compatível com dispositivos móveis e as propriedades do conjunto de atributos data-insete data-filterdisso - sem escrever uma única linha de JavaScript. Os componentes jQueryUI, por outro lado, normalmente são criados escrevendo algumas linhas de JavaScript para instanciar o componente no DOM.

— Stu Cox
fonte

como alguém que acabou de passar de jQuery + UI em sites baseados em navegador para entender o jQuery Mobile para dispositivos móveis, devo dizer que estou lutando para ver como essa resposta em particular recebeu 41 votos positivos, mas SEM comentários. Ele aponta especificamente em seu impulso principal que, ao contrário do jQueryUI, que é "construído sobre o jQuery", o jQuery Mobile é "no entanto, uma estrutura completa". Isso está totalmente em desacordo com as outras respostas abaixo, que afirmam (com bastante precisão - eu acho!) Que o jQuery Mobile também requer jQuery para ser executado e está aumentando minha confusão pessoal sobre o que .js e .css eu preciso.

— Andy Lorenz

3

Desculpe, você está certo, eu não deixei claro que o jQuery Mobile requer jQuery também - vou atualizá-lo. Embora note que minha resposta não foi realmente projetada para dizer a você como começar e executar o jQuery Mobile (essa não é a pergunta original), apenas para dar uma ampla visão geral das diferenças conceituais.

— Stu Cox

ótimas coisas Stu, obrigado por ajustar sua resposta, o que agora faz muito mais sentido. Você pode se surpreender com o quão difícil é para 'novatos no jquery mobile' começar - até mesmo o site do jquerymobile não deixa isso óbvio! Isso por si só leva a outro ponto confuso - qual versão do jquery o jquerymobile requer? No momento em que este artigo foi escrito, jquerymobile.com implica apenas que 1.4.2 é compatível com jQuery 1.8-1.110 / 2.0 - mas não consigo encontrar nenhum lugar onde as versões e dependências de js / css sejam especificamente declaradas!

— Andy Lorenz

28

O que é jQuery mobile

JQM (jQuery mobile) é um sistema de interface de usuário para telefones móveis que é construído sobre jQuery. O jQuery é necessário para o JQM funcionar. Ao contrário de outras estruturas de telefone móvel semelhantes, o JQM visa o suporte para todas as principais plataformas móveis, tablets, e-reader e desktop, e não apenas para navegadores de webkit móvel. Um dos recursos mais notáveis do framework é o sistema de navegação Ajax que usa transições de página animadas (muito legal).

O que pode ser novo para você

Uma coisa sobre JQM que joga uma bola curva para novos usuários é a navegação ajax. Vindo do jquery, você provavelmente está acostumado a incluir seu javascript em todas as páginas e, em seguida, usar o dom ready ( $(function(){ ... }ou $(document).ready(function(){ .... }) para iniciar todas as suas atividades divertidas de javascript. Mas, como o JQM usa navegação ajax, o sistema puxará outras páginas para o mesmo dom da primeira página e não carregará seus scripts contidos no <head>. Quando a próxima página for carregada via ajax, você notará que seu conteúdo $(function(){ ...}não funcionará na segunda página. A solução para isso é vincular ao evento pageinit. Os exemplos a seguir irão ajudá-lo no início de sua jornada:

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

});

Para direcionar uma determinada página, você adiciona o id da página:

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

});

Entender os eventos da nova página irá ajudá-lo muito ao iniciar o JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Boa sorte!

— codaniel
fonte

5

jQuery é uma estrutura de manipulação / passagem de DOM e AJAX JavaScript. Ele abstrai grande parte da complexidade entre os diferentes navegadores automaticamente. Existem inúmeros plug-ins jQuery que simplificam muitas tarefas.

jQuery Mobile é uma estrutura de UI voltada para aplicativos móveis que é construída em jQuery. Possui temas e componentes de IU.

Ao todo, eles são gratuitos. Você não precisa usar o jQuery Mobile para usar o jQuery. Mas para usar o jQuery Mobile, você precisa usar o jQuery.

— Daniel A. White
fonte

Então você poderia dizer que essa jQuery Mobileé a versão móvel do jQuery UI?

— Jeff Hines

@JeffHines - um pouco. eles são bases de código diferentes, mas alcançam objetivos semelhantes de maneiras diferentes.

— Daniel A. White

Excelent coments, Daniel A. White. Você não precisa usar o jQuery Mobile para usar o jQuery. Mas para usar o jQuery Mobile, você precisa usar o jQuery.

— user3174782

Uma versão alfa está agora em obras. jquerymobile.com/changelog/1.5.0-alpha1

— Jackson Ng

2

Não tenho pontos suficientes para comentar acima, então adicione ao tópico para responder à segunda pergunta de Andy sobre dependências.

Eu acredito que o que você está procurando está aqui: 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>

— TransitDataHead
fonte