jQuery Interview Questions

Learning cutting-edge-web-development standards is required to developers who want to be stay ahead in industry. As I mentioned in my previous blog that technology level is being increased day by day. Now almost everyone know how to use cellphone no matter how much educated he is. So, are customers, they want the solutions that can be used or extended for future problems also. If you are unable to meet their expectations, you are out.

As the new trend in software solutions, a developer must be proficient with client-side (scripting) coding apart from his server side coding skills. JavaScript usage with web solutions are de-facto or say common. jQuery is widely being used for client side scripting. Big companies like Microsoft has accepted it and using it.

If still you are thinking that you are very good on C# or server side coding and you don't care client side scripting, you are doing a big mistake. Just start grooming yourself with jQuery. Don't be left behind.

So, how to start with jQuery? There are many resources on internet in form of documents to videos. Try to stand-out from the rest of crowd by learning new trends technologies like MVC, jQuery, HTML5, Signal R, WCF/Web API etc.

So why to go for jQuery?

Power of jQuery?

How to start using jQuery?

How it works?

Refer : Starting With jQuery


What is jQuery Object?

How chaining is happen in jQuery?

Refer : What is jQuery Object?


Difference between jQuery $.each and $.fn.each ?

Difference between $ and $() ?

Difference between $ Namespace and $.fn namespace?

jQuery Core methods and Object Methods ?

Refer: $.each vs $.fn.each


How can we migrate from jQuery old version to new version ?

Refer: jQuery migrate to new version


Can you categories the jQuery's different methods/APIs ?

There are mainly 10 categories on the basis of their behavior/purpose. They are as –

1)     Core type :  $(), each, size, length, eq, get, index, data, queue, extend, $.fn.extend, jQuery.noConflict etc.

2)     Utilities :  trim, each etc.

3)     Selectors : Attribute, element, class etc.

4)     Attributes : attr, addClass, hasClass, removeClass, val etc. 

5)     Traversing : closest, children, parent, next, prev, siblings, eq, is, not, slice etc. 

6)     Manipulation : insert, empty, remove, clone, wrap, html, text, append, before, after etc.

7)     CSS : css, scrollTop, height, width,  inner height, innerWidth etc.

8)     Events : ready, click, dbclick, focus, error, keyup, mouseup, scroll, select, unload etc,

9)     Effects : show, hide, animate, slideUp etc.

10)  AJAX : ajax, get, post, load etc.


What is jQuery Plugin?

We can package our re-usable jQuery code. This package will require jQuery core as base to run. So we refer these packaged jQuery code as Plugins. There are many thousands famous free plugins over the internet.



Have you ever used any Plugin?

Yes, I have used tablesorter, jAlert. (here you can name what you have used/known)



Which selector you prefer, ID based or class based and why?

I prefer using efficient selector and prefer ID based if possible. Class based selector can yield me object array while ID based will give the exact one.



What is default context if we not supply?

Default context is the DOM/ Document.

The syntax is $( selector , context )  and if we omit context, Document  is consider as the context.


How can we load an aspx page inside a DIV element on other aspx page?

$.load( url_of_aspx_page);


What is difference between width()  and outerWidth() ?

width() gives the only content-area's width while outerWidth() gives the actual content-area width plus area occupied by border and padding Refer : http://www.c-sharpcorner.com/UploadFile/bc1c71/display-message-box-in-center-of-window-using-jquery/


What is jQuery event bubbling?  


What is jQuery event Propagation?

When an event is fired on a child element, it get propagate to its parents for handling the same. This is known as event bubbling. jQuery support this. We can stop event Propagation by –

a)     checking the actual target ex. e.target == this

b)    using e.stopPropagation();

Refer: http://www.c-sharpcorner.com/uploadfile/satisharveti/jquery-event-propagation/



Is there any difference between window.onload event & $(document),ready event?

jQuery has a ready event which automatically triggered when Document becomes ready(still images may be being loaded but DOM is ready for operations). So code written inside this ready event comes in action only after the document is ready. This DOM ready wait, ensures that referring element is able to access and avoid the null or undefined/non-existence problem. If we still want more wait until everything is fully loaded including banner-images then load event can be used instead of ready event. In native JavaScript, there is also a 'window.onload' event which happen when document is fully loaded including banner images etc.