JQuery Mobile Interview Questions and Answers -We highlight some common questions you might be asked during a job interview for JQuery Mobile related positions.
JQuery Mobile is a touch-optimized web framework (or mobile framework), more specifically a JavaScript library, currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is compatible with other mobile app frameworks and platforms such as Phone Gap, Work light and more.
JQuery Mobile is built upon the existing jQuery core, meaning that if you understand the jQuery syntax, then you will have no problems getting JM to work. The framework is compatible with all major mobile and desktop applications including iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, Opera Mobile/Mini, Firefox Mobile and all modern desktop browsers. Its lightweight size (about 20K compressed) makes it a speed freak and the fact that it uses minimal image dependencies also speeds it up ridiculously. Its Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms. As if that is not enough, automatic initialization by using HTML5 data-role attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page and accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. Voiceover in iOS) and other assistive technologies.
JQuery Mobile's API supports not only Touch events, but also the usual Mouse events usually associated with jQuery, making it completely cross-browser and platform compatible. Built in controls are not only themable by the built in UI, but the Touch Optimized interface is completely supported by the UI. As an extra measure, jQuery Theme roller can also build custom widget designs for you to use.
What is JQuery Mobile?
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.

Why JQuery Mobile?
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.

What are the features of JQuery Mobile?
  • 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.
What is difference JQuery vs JQuery UI and JQuery Mobile?
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.

Why is not DOM ready working for jQuery mobile?
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.

Explain Jquery.noconflict?
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().
// Use jQuery via jQuery(...)

Give me example usage of JQuery Mobile?
$('div').on('tap', function(event)
alert('You tapped an element');

What to do to select element having a particular class (".selected")?
$('.selected'). This selector is known as class selector. We need to prefix the class name with "." (dot).

Explain various methods to make Ajax request in jQuery?
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.

What are the few HTML tags used in jQuery Mobile?
  • 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
Which are the fastest selectors and lowest selectors in jQuery?
In jQuery, ID and element selectors are the fastest selectors and class selectors are the slow compare to ID and element.

What is Plugin?
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.

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

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

How does jQuery mobile theming work?
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.

How to divide a page into parts using jQuery mobile?
  • 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.
How to load a page using jQuery mobile?
 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.

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

Can you explain control page titles in jQuery mobile?
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.

Why is only the first page of multi-page document loaded?
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.

What is column toggle?
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.

What is CDN?
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.

What are the CDN files which are used with jQuery Mobile?
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>

What is Source Maps in jQuery?
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.

How to set the icon and icon position in the button?
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.

Can you please explain the difference between body onload () and document. Ready () function?
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. 

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

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

Explain .on ()?
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.

Explain .live()?
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.

How to stop JQM from auto-enhancing an element?
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.

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

What arte the advantages of jQuery?
  • 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.
What are the cons of jQuery Mobile?
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.
Request to Download PDF


Vestibulum bibendum felis sit amet dolor auctor molestie. In dignissim eget nibh id dapibus. Fusce et suscipit orci. Aliquam sit amet urna lorem. Duis eu imperdiet nunc, non imperdiet libero.

Post A Comment: