Looking for a JQuery job? JQuery is the cross-platform JavaScript Library which is designed for simplifying the client side scripting of HTML. It is open source and free software using MIT license permissively. Job opportunities are present everywhere for this position. It simplifies the document navigating, creating animations, handling events and also Ajax applications, which also provides features like creating plug-ins to developers on top of JavaScript Library. Very powerful dynamic web pages and Web applications can be created using this modular approach. One can check the availability of the job across cities. Gradjobopenings created interview questions exclusively for the candidates who are in search of job. Do check our page for JQuery job interview questions and answers to get set for the interview.
Question 1. How To Divide A Page Into Parts Using Jquery Mobile?
Answer :
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.
Here’s one way to get the device height:
var viewportHeight = document.documentElement.clientHeight;
Here’s another (that I haven’t tried, but should work) because jQuery Mobile sets the device height as min-height CSS for the page. (And assuming you already have a $page variable with the page.)
var viewportHeight = parseFloat($page.css(‘min-height’));
Then, you can:
$page.height(viewportHeight + ‘px’);
Question 2. Why We Need Jquery Mobile?
Answer :
jQuery Mobile is a touch-optimized web framework (additionally known as a JavaScript library or a mobile framework) 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 PhoneGap, Worklight and more.
Question 3. Explain The Features Of Jquery Mobile?
Answer :
Compatible with all major mobile platforms as well as all major desktop browsers, including iOS, Android, Blackberry, WebOS, Symbian, Windows Phone, and more.
Built on top of jQuery core so it has a minimal learning curve for people already familiar with jQuery syntax.
Theming framework that allows creation of custom themes.
Limited dependencies and lightweight to optimize speed.
The same underlying codebase will automatically scale to any screen
HTML5-driven configuration for laying out pages with minimal scripting
Ajax-powered navigation with animated page transitions that provides ability to clean URLs through pushState.
UI widgets that are touch-optimized and platform-agnostic
Question 4. Tell Me An Example Usage Of Jquery Mobile?
Answer :
$(‘div’).on(‘tap’, function(event)
{
alert(‘You tapped an element’);
});
Question 5. What Is Jquery Mobile Theming?
Answer :
jQuery Mobile provides a powerful theming framework that allows developers to customize color schemes and certain CSS aspects of UI features. Developers can use the jQuery Mobile ThemeRoller application to customize these appearances and create highly branded experiences. After developing a theme in the ThemeRoller application, programmers can download a custom CSS file and include it in their project to use their custom theme.
Question 6. How To Keep The Submit Text From Showing With Jquery Mobile?
Answer :
Suppose we are working on a website that has a submit button and forms and such. On this website we using jQuery Mobile, but to keep its stylesheet from interfering we using some jQuery.
jQuery Mobile is doing a weird thing where it is printing the value of the button, in this case “Submit”, to the page, even though under it there is a button under it that says “Submit” and actually works.
Question 7. How Does Jquery Mobile Theming Work?
Answer :
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.
Question 8. Why Html 5 Inputs Look Different Across Devices And Browsers?
Answer :
jQuery Mobile does not have control over the the UI for most of the newer HTML5 input elements like date, color and number. The keyboards and pickers provided are browser-dependent but will safely fall back to a standard input if it’s not supported. We do apply basic border and color styles to inputs for these elements so there is some visual consistency.
Question 9. Why Are Not Some Scripts And Styles Loading?
Answer :
jQuery Mobile’s AJAX navigation system only loads in the contents of the page wrapper, the scripts and styles in the head are discarded so you need to plan how to load and organize these assets.
Question 10. Why Is Not Dom Ready Working For Jquery Mobile?
Answer :
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.
Question 11. Why Is Only The First Page Of Multi Page Document Loaded?
Answer :
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.
Question 12. How To Control Page Titles In Jquery Mobile?
Answer :
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.
Question 13. Why Content Injected Into A Page Is Not Enhanced?
Answer :
jQuery Mobile has no way to know when you have injected content into a page. To let jQuery Mobile know you have injected content that must be enhanced, you need to either make sure the plugins are called to enhance the new elements or trigger(“create”) on the parent container so you don’t have to call each plugin manually.
Question 14. How To Stop Jqm From Auto-enhancing An Element?
Answer :
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.
Question 15. How To Load A Page Using Jquery Mobile?
Answer :
To load an external page, enhance its content, and insert it into the DOM, use the loadPage method. There are a lot of methods and properties that you can set when loading pages.
Question 16. What Is $(‘div’)?
Answer :
$(‘div’) : This creates a new div element. However this is not added to DOM tree unless you don’t append it to any DOM element.
Question 17. Where Jquery Mobile Works?
Answer :
jQuery Mobile works on all popular smartphones and tablets.
Question 18. Why Do We Use Jquery?
Answer :
Due to following advantages:
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.
AJAX Capabilities.
Methods for changing or applying CSS, creating animations.
Event detection and handling.
Tons of plug-ins for all kind of needs.
Question 19. Can You Please Explain The Difference Between Javascript And Jquery?
Answer :
JavaScript is a language While jQuery is a library built in the JavaScript language that helps to use the JavaScript language.
Question 20. Explain Is Jquery Replacement Of Java Script?
Answer :
No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
Question 21. Tell Me Is Jquery A Library For Client Scripting Or Server Scripting?
Answer :
Client side scripting.
Question 22. Tell Me Is Jquery A W3c Standard?
Answer :
No. jQuery is not a W3C standard.
Question 23. Explain The Basic Need To Start With Jquery?
Answer :
To start with jQuery, one need to make reference of it’s library.
Question 24. Explain The Starting Point Of Code Execution In Jquery?
Answer :
The starting point of jQuery code execution is $(document).ready() function which is executed when DOM is loaded.
Question 25. Tell Me What Does Dollar Sign ($) Means In Jquery?
Answer :
Dollar Sign is nothing but it’s an alias for JQuery.
Take a look at below jQuery code.
$(document).ready(function(){});
Over here $ sign can be replaced with “jQuery” keyword.
jQuery(document).ready(function(){});
Question 26. Tell Me Can We Have Multiple Document.ready() Function On The Same Page?
Answer :
YES. We can have any number of document.ready() function on the same page.
Question 27. Is It Possible To Use Our Own Specific Character In The Place Of $ Sign In Jquery?
Answer :
Yes. It is possible using jQuery.noConflict().
Question 28. Explain Jquery.noconflict?
Answer :
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();
});
Question 29. Can You Please Explain The Difference Between Body Onload() And Document.ready() Function?
Answer :
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.
Question 30. Can You Please Explain The Difference Between .js And .min.js?
Answer :
jQuery library comes in 2 different versions Production and Deployment. The deployment version is also known as minified version. So .min.js is basically the minified version of jQuery library file. Both the files are same as far as functionality is concerned. but .min.js is quite small in size so it loads quickly and saves bandwidth.
Question 31. What Are Two Different Version Of Jquery Library?
Answer :
jQuery library comes in 2 different versions:
Production
Deployment
Question 32. Explain Why There Are Two Different Version Of Jquery Library?
Answer :
The production version is quite useful at development time as jQuery is open source and if you want to change something then you can make those changes in production version. But the deployment version is minified version or compressed version so it is impossible to make changes in it. Because it is compressed, so its size is very less than the production version which affects the page load time.
Question 33. Explain Cdn?
Answer :
A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance.
Question 34. What Are The Popular Jquery Cdn?
Answer :
Microsoft
jQuery
Question 35. What Are The Advantage Of Using Cdn?
Answer :
It reduces the load from your server.
It saves bandwidth. jQuery framework will load faster from these CDN.
The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.
Question 36. Tell Me What Does $(“div”) Will Select?
Answer :
This will select all the div elements on page.
Question 37. What To Do To Select Element Having A Particular Class (“.selected”)?
Answer :
$(‘.selected’). This selector is known as class selector. We need to prefix the class name with “.” (dot).
Question 38. Which Are The Fastest Selectors In Jquery?
Answer :
ID and element selectors are the fastest selectors in jQuery.
Question 39. Tell Me What Are The Slow Selectors In Jquery?
Answer :
class selectors are the slow compare to ID and element.
Question 40. Explain The Use Of Jquery .each() Function?
Answer :
The $.each() function is used to iterate over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array.
Question 41. Tell Me How To Executed Jquery Selectors?
Answer :
Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class “.myCssClass” and after that it will reject all the other elements which are not in “p#elmID”.
Question 42. What Is Jquery.size()?
Answer :
jQuery .size() method returns number of element in the object. But it is not preferred to use the size() method as jQuery provide.
Question 43. What Is .remove()?
Answer :
Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
Question 44. What Is .empty()?
Answer :
This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM.
Question 45. Tell Me How Do You Stop The Currently-running Animation?
Answer :
Using jQuery “.stop()” method.
Question 46. Tell Me How To Disable Jquery Animation?
Answer :
Using jQuery property “jQuery.fx.off”, which when set to true, disables all the jQuery animation. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.
Question 47. What Is Get()?
Answer :
get() return a DOM element. The method retrieve the DOM elements matched by the jQuery object. But as it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can’t be used.
Question 48. What Is Eq()?
Answer :
eq() returns the element as a jQuery object. This method constructs a new jQuery object from one element within that set and returns it. That means that you can use jQuery functions on it.
Question 49. Can You Please Explain The Difference Between Parent() And Parents() Methods In Jquery?
Answer :
The basic difference is the parent() function travels only one level in the DOM tree, where parents() function search through the whole DOM tree.
Question 50. What Is Jquery.length?
Answer :
.length property and which does the same thing. But the .length property is preferred because it does not have the overhead of a function call.
Question 51. What Is .detach()?
Answer :
This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
Question 52. What Is .bind()?
Answer :
This is the easiest and quick method to bind events. But the issue with bind() is that it doesn’t work for elements added dynamically that matches the same selector. bind() only attach events to the current elements not future element. Above that it also has performance issues when dealing with a large selection.
Question 53. Explain .on()?
Answer :
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.
Question 54. Explain .delegate()?
Answer :
The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the selector/event information to the document, you can choose where it is anchored and it also supports chaining.
Question 55. Explain .live()?
Answer :
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.
Question 56. Can You Please Explain The Difference Between Prop And Attr?
Answer :
attr(): Get the value of an attribute for the first element in the set of matched elements. Whereas,.prop(): (Introduced in jQuery 1.6) Get the value of a property for the first element in the set of matched elements.
Attributes carry additional information about an HTML element and come in name=”value” pairs. Where Property is a representation of an attribute in the HTML DOM tree. once the browser parse your HTML code ,corresponding DOM node will be created which is an object thus having properties.
attr() gives you the value of element as it was defines in the html on page load. It is always recommended to use prop() to get values of elements which is modified via javascript/jquery , as it gives you the original value of an element’s current state
Question 57. Tell Me How To Check Data Type Of Any Variable In Jquery?
Answer :
Using $.type(Object) which returns the built-in JavaScript type for the object.
Question 58. Tell Me How To Check If Number Is Numeric While Using Jquery 1.7+?
Answer :
Using “isNumeric()” function which was introduced with jQuery 1.7+.
Question 59. Can You Please Explain The Difference Between Event.preventdefault And “return False”?
Answer :
e.preventDefault() will prevent the default event from occurring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.
Question 60. What Is Event.stoppropagation?
Answer :
event.stopPropagation(): Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. For example, if there is a link with a click method attached inside of a DIV or FORM that also has a click method attached, it will prevent the DIV or FORM click method from firing.
Question 61. Explain Event.preventdefault?
Answer :
The event.preventDefault() method stops the default action of an element from happening. For example, Prevents a link from following the URL.
Question 62. Can We Include Multiple Version Of Jquery?
Answer :
Yes. Multiple versions of jQuery can be included in same page.
Question 63. Explain Chaining In Jquery?
Answer :
Chaining is one of the most powerful feature of jQuery. In jQuery, Chaining means to connect multiple functions, events on selectors. It makes your code short and easy to manage and it gives better performance. The chain starts from left to right. So left most will be called first and so on.
$(document).ready(function(){
$(‘#dvContent’).addClass(‘dummy’);
$(‘#dvContent’).css(‘color’, ‘red’);
$(‘#dvContent’).fadeIn(‘slow’);
});
The above jQuery code sample can be re-written using chaining.
$(document).ready(function(){
$(‘#dvContent’).addClass(‘dummy’)
.css(‘color’, ‘red’)
.fadeIn(‘slow’);
});
Not only functions or methods, chaining also works with events in jQuery
Question 64. Explain Various Methods To Make Ajax Request In Jquery?
Answer :
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 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.
Question 65. Is It Possible To Use Jquery To Make Ajax Request?
Answer :
Yes. jQuery can be used for making ajax request.
Question 66. Tell Me How To Write Browser Specific Code Using Jquery?
Answer :
Using jQuery.browser property, we can write browser specific code. This property contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9.
Question 67. Tell Me How To Use Migrate Jquery Plugin If Possible?
Answer :
with release of 1.9 version of jQuery, many deprecated methods were discarded and they are no longer available. But there are many sites in production which are still using these deprecated features and it’s not possible to replace them overnight. So jQuery team provided with jQuery Migrate plugin that makes code written prior to 1.9 work with it.
So to use old/deprecated features, all you need to do is to provide reference of jQuery Migrate Plugin.
Question 68. Explain Source Maps In Jquery?
Answer :
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.
Question 69. Tell Me Does Jquery 2.0 Supports Ie?
Answer :
No. jQuery 2.0 has no support for IE 6, IE 7 and IE 8.
Question 70. Explain Deferred And Promise Object In Jquery?
Answer :
Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax.
Question 71. Explain Finish Method In Jquery?
Answer :
The .finish() method stops all queued animations and places the element(s) in their final state. This method was introduced in jQuery 1.9.
Question 72. Can You Please Explain The Difference Between Calling Stop(true,true) And Finish Method?
Answer :
The .finish() method is similar to .stop(true, true) in that it clears the queue and the current animation jumps to its end value. It differs, however, in that .finish() also causes the CSS property of all queued animations to jump to their end values, as well.
Question 73. Explain Jquery Plugin?
Answer :
A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods.
Question 74. Can You Please Explain The Difference Between Jquery And Jquery Ui?
Answer :
jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.
Question 75. Explain The Advantage Of Using Plugin?
Answer :
jQuery plugins are quite useful as its piece of code which is already written by someone and re-usable, which saves your development time.
