¿Diferencia entre jQuery y jQuery Mobile?

Question 1

Soy nuevo en el desarrollo web móvil y acabo de crear una aplicación móvil con PhoneGap, empleando el uso frecuente de jQuery.

Pero naturalmente hubo un par de fallas relacionadas con la forma en que formateé las cosas y la forma en que realmente aparecían en las pantallas de los dispositivos móviles con las que estaba probando, y al tratar de resolverlas, me encontré con muchas sugerencias para facilitarme las cosas al usar jQuery móvil.

Ahora, esto me confunde: jQuery no tenía rollos en el formato. Ese fue solo mi conocimiento de nivel principiante de CSS móvil lo que causó los problemas.

Entonces, ¿qué hace exactamente jQuery mobile y en qué se diferencia de jQuery ordinario? Si ya conozco jQuery, ¿qué va a ser nuevo para mí?

Question 2

jQuery está diseñado exclusivamente para simplificar y estandarizar las secuencias de comandos en todos los navegadores. Se enfoca en cosas de bajo nivel: crear elementos, manipular el DOM, administrar atributos, realizar solicitudes HTTP, etc.

jQueryUI es un conjunto de componentes y características de la interfaz de usuario construido sobre jQuery (es decir, necesita jQuery para funcionar): botones, cuadros de diálogo, controles deslizantes, pestañas, animaciones más avanzadas, funcionalidad de arrastrar / soltar.

jQuery y jQueryUI están diseñados para ser 'agregados' a su sitio (escritorio o móvil) - si desea agregar una característica en particular, jQuery o jQueryUI podrían ayudarlo.

jQuery Mobile , sin embargo, es un marco completo. Está destinado a ser su punto de partida para un sitio móvil. Requiere jQuery y utiliza funciones de jQuery y jQueryUI para proporcionar componentes de interfaz de usuario y funciones de API para crear sitios compatibles con dispositivos móviles. Aún puede usar tanto o tan poco como desee, pero jQuery Mobile puede controlar toda la ventana gráfica de una manera compatible con dispositivos móviles si lo permite.

Otra diferencia importante es que jQuery y jQueryUI apuntan a ser una capa encima de su HTML y CSS. Debería poder dejar su marcado solo y mejorarlo con jQuery. Sin embargo, jQuery Mobile proporciona formas de definir dónde desea que aparezcan los componentes utilizando solo HTML, por ejemplo (desde el sitio de 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>

El data-roleatributo le dice a jQuery Mobile que convierta esta lista en un componente de interfaz de usuario compatible con dispositivos móviles y los atributos data-insety data-filterestablecen las propiedades de eso, sin escribir una sola línea de JavaScript. Los componentes jQueryUI, por otro lado, normalmente se crean escribiendo unas pocas líneas de JavaScript para instanciar el componente en el DOM.

Question 3

Que es jQuery mobile

JQM (jQuery mobile) es un sistema de interfaz de usuario para teléfonos móviles que se basa en jQuery. jQuery es necesario para que JQM funcione. A diferencia de otros marcos de telefonía móvil similares, JQM tiene como objetivo el soporte para todas las principales plataformas móviles, tabletas, lectores electrónicos y de escritorio, y no solo los navegadores webkit móviles. Una de las características más notables del marco es el sistema de navegación Ajax que usa transiciones de página animadas (muy bueno).

¿Qué puede ser nuevo para ti?

Una cosa sobre JQM que lanza una bola curva a los nuevos usuarios es la navegación ajax. Viniendo de jquery, probablemente esté acostumbrado a incluir su javascript en cada página y luego usar dom ready ( $(function(){ ... }o $(document).ready(function(){ .... }) para activar todas sus divertidas actividades de javascript. Pero debido a que JQM usa la navegación ajax, el sistema colocará otras páginas en el mismo dominio que la primera página y no cargará sus scripts contenidos en <head>. Cuando la página siguiente se cargue a través de ajax, notará que sus cosas internas $(function(){ ...}no funcionarán en la segunda página. La solución a esto es vinculante para el evento pageinit. Estos siguientes ejemplos lo ayudarán al comienzo de su viaje:

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

});

Para apuntar a una determinada página, agrega la identificación de la página:

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

});

Comprender los eventos de la nueva página lo ayudará mucho al comenzar con JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html ¡ Buena suerte!

Question 4

jQuery es un marco de JavaScript AJAX que manipula / atraviesa DOM. Abstrae gran parte de la complejidad entre los diferentes navegadores automáticamente. Hay innumerables complementos de jQuery que simplifican muchas tareas.

jQuery Mobile es un marco de interfaz de usuario orientado a aplicaciones móviles que se basa en jQuery. Tiene componentes temáticos y de interfaz de usuario.

En total, son complementarios. No tiene que usar jQuery Mobile para usar jQuery. Pero para usar jQuery Mobile, debe usar jQuery.

Question 5

No tengo suficientes puntos para comentar arriba, así que agregue al hilo para responder la segunda pregunta de Andy sobre dependencias.

Creo que lo que estás buscando está aquí: 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>