JQuery Mobile Interview Questions and Answers

JQuery Mobile is a cross platform mobile UI framework designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3, jQuery and jQuery UI into one framework that is not only robust, but maintainable and organized. The mobile framework itself is a separate, additional download of around 12KB (minified and gzipped) from jQuery core, which is around 25KB when minified/gzipped. As with the rest of the jQuery framework, jQuery Mobile is a free, dual-licensed (MIT and GPL) library.

JQuery Mobile is a ‘mobile-first’ framework, not ‘mobile only’. It is a highly extensible and customizable theme and layout engine. There are a variety of mobile devices having different OS like Android, Blackberry, iOS, Windows Phone, Nokia Symbian etc. These devices have own apps and different browsers which present challenges for us in web or apps development. Instead of developing an app for each mobile device, jQuery mobile allows you to create cross platform website or apps which are easy to develop and maintain, since it only uses HTML/HTML5, CSS/CSS3 and JavaScript, which is standard for all mobile devices and mobile web browsers.

• It is Open-source and freely available for all kind of usages.
• Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.
• Compatible with all major mobile, tablet, e-reader & desktop platforms – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook and all modern browsers with graded levels of support.
• Lightweight size and minimal image dependencies for speed.
• Modular architecture for creating custom builds that are optimized to only include the features needed for a particular application.
• HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
• Unified user interface system across all popular mobile platforms.
• Minimal image dependencies and light weight in size (12KB) to optimize speed.
• Responsive design techniques allow the same underlying UI to automatically scale from smart-phones to tablet and desktop-sized screens.
• AJAX-based navigation system to enable animated page transitions while maintaining back button, bookmarking and clean URLs.
• Support for touch and mouse events for better user experience.

JQuery: It is purely designed to simplify and standardize scripting across browsers. It focuses on the low-level stuff: creating elements, manipulating the DOM, managing attributes, performing HTTP requests, etc.

JQuery UI: It is a set of user interface components & features built on top of jQuery (i.e. it needs jQuery to work): buttons, dialog boxes, sliders, tabs, more advanced animations, drag/drop functionality. JQuery and jQueryUI are both designed to be added to your web site, if you want to add a particular feature, jQuery or jQueryUI might be able to help.

JQuery Mobile: It is a full framework which is built on jQuery and jQuery UI foundation. It makes use of features of both jQuery and jQueryUI to provide both UI components and API features for building mobile-friendly sites. In addition, jQuery Mobile also offers various native features that are especially made for mobile devices.

One of the first things people learn in jQuery is to use the $(document).ready () function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pageinit event.

As other client-side libraries like MooTools, Prototype can be used with jQuery and they also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other library as their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict().

jQuery.noConflict();

// Use jQuery via jQuery(…)

jQuery(document).ready(function(){

jQuery(“div”).hide();

});

$(‘div’).on(‘tap’, function(event)

{

alert(‘You tapped an element’);

});

$(‘.selected’). This selector is known as class selector. We need to prefix the class name with “.” (dot).

Using below jQuery methods, you can make Ajax calls:

$load (): Load a piece of html into a container DOM

$.getJSON (): Load JSON with get method.

$.getScript (): Load a JavaScript file.

$.get (): Use to make a get T call and play extensively with the response.

$.post (): Use to make a post call and don’t want to load the response to some container DOM.

$.ajax (): Use this to do something on XHR failures, or to specify Ajax options (e.g. cache: true) on the fly.

• data-role=”page”: Page displayed in the browser.
• data-role=”header”: Creates a toolbar at the top of the page.
• data-role=”main”: Content of the page, like text, images, buttons and forms etc.
• “ui-content”: Adds extra padding and margin inside the page content
• data-role=”footer”: creates a toolbar at the bottom of the page

In jQuery, ID and element selectors are the fastest selectors and class selectors are the slow compare to ID and element.

The jQuery Plugin Registry is in read-only mode. JQuery plugins are quite useful as its piece of code which is already written by someone and re-usable, which saves your development time.

The .finish() method stops all queued animations and places the element(s) in their final state. This method was introduced in jQuery 1.9.

jQuery Mobile provides a powerful theming that allows developers to customize color schemes & CSS aspects of UI features.

The jQuery Mobile theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects.

• Pages normally don’t have a fixed height.
• If you set a page or some element on a page to a fixed height using CSS, then you can size things in terms of %.
• You’ll need to use a bit of JavaScript to set the page height.

 In JQuery mobile, to load an external page, enhance its content, and insert it into the DOM, use the load Page method. There are a lot of methods and properties that you can set when loading pages.

Rangeslider widget provides you with a pair of handles allowing you to select a numeric value range.

When you load the first page of a jQuery Mobile based site, then click a link or submit a form, AJAX is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing. To remedy this, jQuery Mobile automatically parses the title of the page pulled via AJAX and changes the title attribute of the parent document to match.

JQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi-page document, you must disable Ajax on the link by adding the data-ajax=”false” attribute.

The column toggle puts the columns in a hiding place and allows user to select columns as per their choice by using the data-mode=”column toggle” attribute.

Content delivery networks (CDN) are the transparent backbone of the Internet in charge of content delivery. Whether we know it or not, every one of us interacts with CDNs on a daily basis; when reading articles on news sites, shopping online, watching YouTube videos or perusing social media feeds. It reduces the load from your server. It saves bandwidth. jQuery framework will load faster from these CDN. The goal of a CDN is to serve content to end-users with high availability and high performance.

You can use following CDN files −

<link rel = “stylesheet” href = “https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>

<script src = “https://code.jquery.com/jquery-1.11.3.min.js”></script>

<script src = “https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

In case of jQuery, Source Map is nothing but mapping of minified version of jQuery against the un-minified version. Source map allows to debug minified version of jQuery library. Source map feature was release with jQuery 1.9.

You can set the icon in the button using ui-icon class and ui-btn-icon-pos_name class for specifying the position for icon.

Document. Ready () function is different from body onload () function for 2 reasons.

We can have more than one document. Ready () function in a page where we can have only one body onload function.

Document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.         

It is data in horizontal format by collapsing the table into stacked representation by using the data-mode=”reflow” attribute.

It is display the value of the slider as a tooltip using the data-popup-enabled=”true” attribute.

Since live was deprecated with 1.7, so new method was introduced named “.on()”. This method provides all the goodness of previous 3 methods and it brings uniformity for attaching event handlers.

This method overcomes the disadvantage of bind (). It works for dynamically added elements or future elements. Because of its poor performance on large pages, this method is deprecated as of jQuery 1.7 and you should stop using it. Chaining is not properly supported using this method.

To prevent jQuery Mobile form enhancing an element simply add data-role=”none” to the element. Here is a select that is the normal, native element instead of the custom jQuery Mobile styled version that normally is seen.

It is increase the quality and functionality of text inputs by setting the data-enhanced=”true” attribute in the input field.

• It is an Open source framework.
• Easy to use and learn.
• Easily expandable.
• Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
• Easy to use for DOM manipulation and traversal.
• Large pool of built in methods.
• Methods for changing or applying CSS, creating animations.
• Event detection and handling.
• Tons of plug-ins for all kind of needs.
• AJAX Capabilities.

JQuery Mobile is still beta software, and as such I have encountered bugs. That being said, the team is extremely responsive in addressing issues on GitHub. I think one of the big problems is simply quirks across various browsers on different platforms. I am certain that this will be ironed out over time. The applications also can look quirky in a visual sense – while I think the JQuery Mobile team have done a great job with their widgets and themes, it is still fairly distinct from native. How much this really matters to users is not clear, but it is something to be aware of. Limited Capabilities vs Native: Obviously, JavaScript running in a browser does not have full access to many features of the device. Lower than Native.

Sencha Touch: The Sencha Touch API uses a fairly large (120kb) JavaScript library, this is many times larger than the jQuery Mobile library.

HTML Generated: The HTML generated was not as clean as hand-coded mark-up and features many nested divs and multiple class names.