Explore topic-wise InterviewSolutions in .

The code INSIDE window.onload event won't RUN until the browser finishes loading entire elements includes IMAGES, frames, objects etc.. but document ready RUNS as soon as the HTML document is loaded and DOM is ready.

The basic structure of ready() function looks like this:

The basic structure of window.onload function looks like this:

.hasClass(className) determines if the ELEMENT contains class name. It RETURNS true if the element contains the class name OTHERWISE returns false.

The following statement determines if the element has class name “X”.

.children([SELECTOR]) is to get all the children elements of an element and the selector can be to select className of the element. The following statement is to get all the children with CLASS NAME “X”.

Yes, there is a selector called “: contains” which selects the elements that contains the specified text.

Here is the syntax:

Let's consider the following EXAMPLE which contains a SET of div elements contains text.

The following STATEMENT filters all the elements contains text "John" and underlines them.

When an ajax request made, if you want to HANDLE when the request completes then .always() will come in handy. .always() is a PROMISE callback method ADDED in jQuery 1.6 and it's a replacement for the deprecated .complete() method.

For example, if you want show a loading indicator when a request made and hide the loading indicator when the request complete, in this case, .always() HANDLER can be useful.

The following is the example:

There are two WAYS to stop a form

• Return false inside function which is been called on form submit.

The sample CODE:

• By USING EVENT. preventDefault() to stop the default action on the event.

The sample code:

Deffered() method is used if you write your own FUNCTION and want to provide a promise to the calling code. A deferred object can create a promise and can change its STATE to RESOLVED or rejected.

The following is the example of how simple Deffered object works.

A PROMISE about future VALUE. You can attach callbacks to it to get that value. The promise was "given" to you and you are the receiver of the future value.

If we request a resource from another website, the result of a LONG calculation EITHER from server or from a JavaScript function, or the response of a REST service, and we perform other tasks while we await the result. When the latter becomes available (the promise is resolved/fulfilled) or the request has failed (the promise is failed/rejected), we act accordingly.

In Jquery, $.ajax, .fadeOut().promise(),  .fadeIn().promise() returns promise objects.

The most common way to write a for loop to create ONE array from another, or an array from an OBJECT. JQuery makes it even EASIER with the $.map utility function.

The syntax:

Yes, The $.GREP() method finds the elements of an ARRAY which SATISFY a filter function. In this case, the original array is not affected.

The following condition FILTERS numbers above 0 and RETURNS [1,2].

The following returns [0] because invert set as true.

If you have to call several functions that return promises and take an ACTION only when all are completed then $.when can be used. It provides a way to EXECUTE callback functions based on zero or more Thenable objects, usually DEFERRED objects that represent asynchronous events.

The following is the syntax:

Look at the following example:

The ARGUMENTS passed to the thenCallbacks PROVIDE the resolved values for each of the Deferreds and matches the order the Deferreds were passed to jQuery.when().

filter() is ONE of the jQuery DOM traversal methods which constructs a new jQuery object from a subset of the matching elements.

The following code is to select all the links in the page whose host name is DIFFERENT than the SITE host name and then applies css CLASS name “external”

To select 2nd element from UL element, you can use NTH-child() function and it looks like this:

To find nth element from the list then you can pass the index 'N' to it.

The following CODE finds 2nd element from the list and HANDLES a mouseover event.

jQuery’s hover() function works just like any other event, except that instead of taking one function as an argument, it accepts TWO functions.

The first function runs when the MOUSE travels over the element and the second function runs when the mouse moves off the element.

The basic structure looks like this:

For EXAMPLE, when mouses over a LINK with an ID of menu, you want a submenu with an ID of submenu to appear.

Moving the mouse off of the link hides the submenu again. The following jQuery code will do the trick.

jQuery provides a way to filter selections based on certain characteristics like even or add.

To find every even row of a table, the selector looks like this:

Let’s SAY If the table has ID 'users' then you can do like this:

Similarly :odd SELECTS every odd row.

Jquery.AJAX() method contains a setting called “cache”, by default it TAKES true and false for ‘script’ and ‘jsonp’. If set it to false, it will force request not to be cached by the browser. It WORKS by appending timestamp to the parameters.

The following is the syntax:

The above code always loads test.html from the server but never gets loaded from the browser cache.

The main problem here is that calling APPEND() in a loop is costly and slow.

To optimize it, append them all at once rather than one at a time in the loop as shown below.

In the above CODE, the list of all list items html is prepared within each loop and then UPDATES the html at the END.

As of JQUERY 1.5, Jquery AJAX() returns jqXHR object which implements the Promise interface, the promise includes a callback method CALLED jqXHR.FAIL();

Ex:

• JQUERY .each() method is to iterate over the ELEMENTS in a jQuery collection without the need for the for loop syntax.
• For arrays, array-like OBJECTS, and objects, jQuery provides a function named $.each().

The syntax looks like:

As of JQUERY 1.6, the .prop() method provides a way to explicitly retrieve PROPERTY values, while .attr() retrieves attributes.

Consider a DOM ELEMENT defined by the HTML markup

• The .off() METHOD REMOVES event handlers that were attached with .on().
• Calling .off() with no ARGUMENTS removes all handlers attached to the elements.

The following removes all delegated click handlers from all paragraphs:

The following removes just one previously bound handler by passing it as the third argument:

$('body').off('click', 'p', FOO); // ... Foo will no longer be called.

Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event OCCURS.  A call to .trigger() executes the handlers in the same ORDER they would be if the event were triggered NATURALLY by the user.

The following statement is to submit the FIRST form without using the submit() function.

.on() method attach an event handler function for one or more EVENTS to selected elements.

In the following code, the event handler function is attached to all the <TR&GT; elements in the table with id “#DATATABLE” on both click and mouseover events.

It ALSO delegates the events to the elements dynamically added to the page, in this case, the event handler function will be attached to the dynamically added <TR> elements.

• $(‘#menu’) is to select menu element with ID ‘menu’
• $(‘#menu’).mouseover() is to attach mouseover event.

The FOLLOWING is the way to WRITE a anonymous FUNCTION inside mouseover() to SHOW submenu.

In JQUERY, most DOM EVENTS have an equivalent jQuery function.

To assign an event to an element, ADD a period, the event name and a SET of parentheses.

Ex:

The following line add a mouseover event to every link on a page.

The following line add a click event to every with an ID of menu.

jQuery(":checkbox") is to SELECT all the checkbox elements, as all the CHECKBOXES are of INPUT elements it is good practice prefix it with type of element like $('input:checkbox'). The FOLLOWING is the query to select all the checkboxes in a form.

jqXHR stands for jQuery XMLHTTPREQUEST.

As of jQuery 1.5, $.ajax() METHOD returns the jqXHR object, which is a superset of the XMLHTTPRequest object.

jqXHR object implements the Promise INTERFACE and provides the following methods to HANDLE ajax requests.

1. Jquery CORE api is thoroughly verified and tested in all the mostly popular BROWSERS hence jquery eliminates most of the browser compatibility issues with client-side scripting.
2. Jquery provides css3 selectors to find elements
3. With Jquery, DOM traverse and manipulation takes LESS code COMPARED to javascript code.
4. Jquery AJAX() api simplifies the ajax calls and the way response is handled.

As of FEB 2019, the latest version is v.3.3.1. There are two ways to include jquery in html page. The first one is to download the compressed version of jquery file from https://jquery.com/download/ and save it in the scripts directory of the project and then include in html page through <SCRIPT> tag.

The following is the example.

The code inside window.onload event won't run until the browser finishes loading entire elements includes images, FRAMES, objects etc.. but document ready runs as soon as the HTML document is loaded and DOM is ready.

The BASIC structure of ready() function looks like this:

The basic structure of window.onload function looks like this:

.hasClass(CLASSNAME) determines if the element CONTAINS CLASS NAME. It returns true if the element contains the class name OTHERWISE returns false.

The following statement determines if the element has class name “X”.

.children([selector]) is to get all the children ELEMENTS of an element and the selector can be to SELECT className of the element. The following statement is to get all the children with CLASS NAME “X”.