JQUERY Interview Questions and Answers

1.What is jQuery?

A.jQuery is fast, lightweight and feature-rich client side JavaScript Library/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. It is one of the most popular client side library and as per a survey it runs on every second website.

2.Why do we use jQuery?

A.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.

3.How JavaScript and jQuery are different?

A. JavaScript is a language While jQuery is a library built in the JavaScript language that helps to use the JavaScript language.

4.Is jQuery replacement of Java Script?

A.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.

5.Is jQuery a library for client scripting or server scripting?

A.Client side scripting.

6.Does jQuery follow W3C recommendations?

A.No.

7.Which is the starting point of code execution in jQuery?

A.The starting point of jQuery code execution is $(document).ready() function which is executed when DOM is loaded.

8.Can we have multiple document.ready() function on the same page?

A.YES. We can have any number of document.ready() function on the same page.

9.Can we use our own specific character in the place of $ sign in jQuery?

A.Yes. It is possible using jQuery.noConflict().

10.Is it possible to use other client side libraries like MooTools, Prototype along with

A.Yes.

11.What is jQuery.noConflict?

A. 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(); });

12.What is jQuery?

A. jQuery is fast, lightweight and feature-rich client side JavaScript Library/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. It is one of the most popular client side library and as per a survey it runs on every second website.

13.Is there any difference between body onload() and document.ready() function?

A.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.

14.What is the difference between .js and .min.js?

A.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.

15.Why there are two different version of jQuery library?

A. jQuery library comes in 2 different versions. Production and Deployment. 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.

16. What is a CDN?

A.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.

17. What is the difference between .js and .min.js?

18.Which are the popular jQuery CDN? and what is the advantage of using CDN?

A.There are 3 popular jQuery CDNs. 1. Google. 2. Microsoft 3. jQuery.

19.Why there are two different version of jQuery library?

A. jQuery library comes in 2 different versions. : Production and Deployment

20.What is a CDN?

21.How to load jQuery from CDN?

A.Code to load jQuery Framework from Google CDN Code to load jQuery Framework from Microsoft CDN Code to load jQuery Framework from jQuery Site(EdgeCast CDN) view sourceprint?

22.Which are the popular jQuery CDN? and what is the advantage of using CDN?

A.There are 3 popular jQuery CDNs : Google, Microsoft and JQuery.

23.How to load jQuery locally when CDN fails?

A.It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though) but you never know in this world as anything can happen.

24.What are selectors in jQuery and how many types of selectors are there?

A. To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. There are many types of selectors but basic selectors are: Name: Selects all elements which match with the given element Name. #ID: Selects a single element which matches with the given ID .Class: Selects all elements which match with the given Class. Universal (*): Selects all elements available in a DOM. Multiple Elements E, F, G: Selects the combined results of all the specified selectors E, F or G. Attribute Selector: Select elements based on its attribute value.

25. What does $("div") will select?

A.This will select all the div elements on page.

26.What does $("div.parent") will select?

A. All the div element with parent class.

27.What are the fastest selectors in jQuery?

A. ID and element selectors are the fastest selectors in jQuery.

28.What are the slow selectors in jQuery?

A.class selectors are the slow compare to ID and element.

29.How jQuery selectors are executed?

A.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". $("p#elmID .myCssClass");

30.How to disable jQuery animation?

A.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.

31.How do you stop the currently-running animation?

A. Using jQuery ".stop()" method.

32. What is the use of jquery .each() function?

A.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.

33. What is the difference between jquery.size() and jquery.length?

A.jQuery .size() method returns number of element in the object. But it is not preferred to use the size() method as jQuery provide .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.

34.What is the difference between parent() and parents() methods in jQuery?

A.The basic difference is the parent() function travels only one level in the DOM tree, where parents() function search through the whole DOM tree.

35.How do you implement animation functionality?

A.The .animate() method allows us to create animation effects on any numeric CSS property. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.Syntax is: (selector).animate({styles},speed,easing,callback) styles: Specifies one or more CSS properties/values to animate. duration: Optional. Specifies the speed of the animation. easing: Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". callback: Optional. A function to be executed after the animation completes. Simple use of animate function is, view sourceprint? $("btnClick").click(function(){ $("#dvBox").animate({height:"100px"}); });

36.How to disable jQuery animation?

37.How do you stop the currently-running animation?

A.Using jQuery ".stop()" method.

38. What is the difference between .empty(), .remove() and .detach() methods in jQuery?

A.All these methods .empty(), .remove() and .detach() are used for removing elements from DOM but they all are different. .empty(): This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM. .remove(): 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. .detach(): 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.

39.What is event.PreventDefault?

A.The event.preventDefault() method stops the default action of an element from happening. For example, Prevents a link from following the URL.

40.What is the difference between event.PreventDefault and event.stopPropagation?

A.event.preventDefault(): Stops the default action of an element from happening. 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.

41.What is the difference between event.PreventDefault and "return false"?

A.e.preventDefault() will prevent the default event from occurring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.

42.When Jquery founded and by whome?

A.It was released in January 2006 at BarCamp NYC by John Resig(Jquery founder).

43.What scripting language is jQuery written in?

A. JavaScript

44.How to check if number is numeric while using jQuery 1.7+?

A.Using "isNumeric()" function which was introduced with jQuery 1.7.

45.What are the fastest selectors in Jquery?

A.ID and element selectors are the fastest selectors

46.How to check data type of any variable in jQuery?

A. Using $.type(Object) which returns the built-in JavaScript type for the object.

47.Can you include multiple version of jQuery? If yes, then how they are executed?

A.Yes. Multiple versions of jQuery can be included in same page.

48.How do you attach a event to element which should be executed only once?

A.Using jQuery one() method. This attaches a handler to an event for the element. The handler is executed at most once per element. In simple terms, the attached function will be called only once. view sourceprint? $(document).ready(function() { $("#btnDummy").one("click", function() { alert("This will be displayed only once."); }); });

49.What are the slower selecoters in Jquery?

A.Class selectors are slower

50.Which one is faster Jquery ID selector or JavaScript getElementById()?

A.JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector.

51. Is it possible to hold or delay document.ready execution for sometime?

A.Yes, its possible. With Release of jQuery 1.6, a new method "jQuery.holdReady(hold)" was introduced. This method allows to delay the execution of document.ready() event. document.ready() event is called as soon as your DOM is ready but sometimes there is a situation when you want to load additional JavaScript or some plugins which you have referenced. $.holdReady(true); $.getScript("myplugin.js", function() { $.holdReady(false); });

52.How to write browser specific code using jQuery?

A.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.

53.Can we use jQuery to make ajax request?

A.Yes. jQuery can be used for making ajax request.

54.Where Jquery code execute? On client browser or server browser?

A.On client browser.

55.Name the Jquery method which is used to hide selected elements?

A.hide().

56.What are deferred and promise object in jQuery?

A.Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax

57.Can we execute/run multiple Ajax request simultaneously in jQuery? If yes, then how?

A.Yes, it is possible to execute multiple Ajax request simultaneously or in parallel. Instead of waiting for first ajax request to complete and then issue the second request is time consuming. The better approach to speed up things would be to execute multiple ajax request simultaneously. Using jQuery .when() method which provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

58.Can you call C# code-behind method using jQuery? If yes,then how?

A.Yes. We can call C# code-behind function via $.ajax. But for do that it is compulsory to mark the method as WebMethod.

59.Which is the latest version of jQuery library?

A.The latest version (when this post is written) of jQuery is 1.10.2 or 2.0.3. jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.

60.Does jQuery 2.0 supports IE?

A.No. jQuery 2.0 has no support for IE 6, IE 7 and IE 8.

61.What is the use of attr() method in Jquery?

A.The attr() method sets or returns attributes and values of the selected elements. When this method is used to return the attribute value, it returns the value of the first matched element. When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.

62. What are source maps in jQuery?

A.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.

63.Can we use both jQuery and AJAX together?

A.Yes we can use both JQuery and AJAX.

64.How do you stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements?

A. It can be done via calling .stop([clearQueue ] [, jumpToEnd ]) method and by passing both the parameters as true.

65.What is finish method in jQuery?

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

66.Tell the name of jQuery method which is used to perform an asynchronous HTTP request?

A.jQuery.ajax()

67. What is the difference between calling stop(true,true) and finish method?

A.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.

68.Consider a scenario where things can be done easily with javascript, would you still prefer jQuery?

A.No. If things can be done easily via CSS or JavaScript then You should not think about jQuery. Remember, jQuery library always comes with xx kilobyte size and there is no point of wasting bandwidth.

69.What is jQuery plugin and what is the advantage of using plugin?

A.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. jQuery plugins are quite useful as its piece of code which is already written by someone and re-usable, which saves your development time.

70.What is jQuery UI?

A. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library that can be used to build interactive web applications.

71.What is the difference between jQuery and jQuery UI?

A.jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.

72.Can we use our own specific charactor in the place of $ sigh in Jquery?

A.Yes, You can also create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use

73.What is Jquery $.ajax() method?

A.The Jquery ajax() method is used to perform an AJAX (asynchronous HTTP) request.

74.Is jQuery a W3C standard?

A.jQuery is not a W3C standard.

75.What are jQuery Selectors?

A.Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.

76.Does the jQuery html() method work for both HTML and XML documents?

A.jQuery html() only works for HTML.

77.Which sign does jQuery use as a shortcut for jQuery?

A.$(dollar) sign

78.What does $("div") will select?

A.It will select all the div element in the page.

79.What does $("div.parent") will select?

A.All the div element with parent class.

80.what is jQuery connect?

A.It is a jquery plugin which enables us to connect a function to another function. It is like assigning a handler for another function. This situation happens when you are using any javascript plugins and you want to execute some function when ever some function is executed from the plugin. This we can solve using jquery connect function.

81.How to use jQuery.connect?

A.Download jquery.connect.js file include this file in your html file. and use $.connect function to connect a function to another function.

82.jQuery uses CSS selectors to select elements?

A.true

83.Which sign does jQuery use as a shortcut for jQuery?

A.$

84. Is jQuery a library for client scripting or server scripting?

A.Client Side Scripting

85.Is it possible to use jQuery together with AJAX?

A.Yes.

86.The jQuery html() method works for both HTML and XML documents

A.False

87.With jQuery, look at the following selector: $("div.intro"). What does it select?

A.All div elements with class="intro"

88.Which jQuery method is used to hide selected elements?

A.hide()

89.What is the correct jQuery code for making all div elements 100 pixels high?

A.$("div").height(100)

90.What scripting language is jQuery written in?

A.JavaScript

91.Which jQuery function is used to prevent code from running, before the document is finished loading?

A.$(document).ready()

92.Which jQuery method is used to switch between adding/removing one or more classes (for CSS) from selected elements?

A.toggleClass()

93.Does jQuery uses CSS selectors and XPath expressions to select elements?

A.Yes.

94.Is it possible to use jQuery together with AJAX?

A.Yes.

95.$("span.intro"). What does it select?

A. All span elements with class="intro"

96.Which jQuery method used to set one or more style properties for selected elements?

A.css()

97.Which jQuery method is used to perform an asynchronous HTTP request?

A.jQuery.ajax().

98.Advantages of jQuery?

A.The advantages of using jQuery are: JavaScript enhancement without the overhead of learning new syntax, Ability to keep the code simple, clear, readable and reusable and Eradication of the requirement of writing repetitious and complex loops and DOM scripting library calls.

99.Why is jQuery better than javascript?

A.jQuery is great library for developing ajax based application, It helps the programmers to keep code simple and concise and reusable, jQuery library simplifies the process of traversal of HTML DOM tree andjQuery can also handle events, perform animation, and add the ajax support in web applications.

100.When can you use jQuery?

A.Jquery can be used to for developing ajax based applications like : It can be used to keep the code simple, concise and reusable. It simplifies the process of traversal of HTML DOM tree. It can also handle events, perform animation, and add the ajax support in web applications.

101.What js and css file we need to reference while developing Jquery Mobile application?

A.Below are the generalised version of js and css file we need to reference while developing Jquery Mobile application: jquery.mobile-x.x.x.min.css , jquery-x.x.x.min.js and jquery.mobile-x.x.x.min.js

102.What is the use of data-role attribute of div in Jquery Mobile?

A.data-role attribute of div in Jquery Mobile generally assigned the following values to start with(However other values are there too): <div data-role="page"> ,<div data-role="header"> and <div data-role="content">

103.What is a callback function in Jquery?

A. A callback function is nothing but a function to be passed as an argument to another function and it runs after its parent function has executed.

104.Which is the starting point of code execution in jQuery?

A.The starting point of jQuery code execution is $(document).ready() function which is executed when DOM is loaded.

105.How does caching helps and how to use caching in jQuery?

A.Caching is an area which can give you awesome performance, if used properly and at the right place. While using jQuery, you should also think about caching. For example, if you are using any element in jQuery more than one time, then you must cache it.

106.Can we use jQuery to make ajax request?

A.Yes. jQuery can be used for making ajax request.

107.What are deferred and promise object in jQuery?

A.Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax.

108.Can we execute/run multiple Ajax request simultaneously in jQuery? If yes, then how?

109.Can you call C# code-behind method using jQuery? If yes,then how?

A.Yes. We can call C# code-behind function via $.ajax. But for do that it is compulsory to mark the method as WebMethod.

110.Which is the latest version of jQuery library?

A.The latest version (when this post is written) of jQuery is 1.10.2 or 2.0.3. jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.

111.Does jQuery 2.0 supports IE?

A.No. jQuery 2.0 has no support for IE 6, IE 7 and IE 8.

112.What are source maps in jQuery?

A. 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.

113.What is finish method in jQuery?

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

114.What is the difference between calling stop(true,true) and finish method?

A. 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.

115.Consider a scenario where things can be done easily with javascript, would you still prefer jQuery?

116.How do I compress my code?

A.Generally the best way to do it is to use the Google Closure Compiler (used by jQuery) or YUI compressor. jQuery provides a pre-minified version of jQuery for your convenience.

117.How do I submit a bug report?

A.You can submit a bug report through the jQuery bug tracker.

118.How to use the tablesorter plugin ?

A.The tablesorter plugin allows sorting of tables on the client side. You include jQuery, and the plugin, and tell the plugin which tables you want to sort.

119.What is Callback and Functions ?

A.A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes.