Interview Questions - jQuery

              

1. What is $() in jQuery library?    

Answer:
The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love it's brevity.

$() function is used to wrap any object into jQuery object, which then allows you to call various method defined jQuery object.

You can even pass a selector string to $() function, and it will return jQuery object containing an array of all matched DOM elements.

I have seen this jQuery asked several times, despite it's quite basic, it is used to differentiate between developer who knows jQuery or not.

2. Order these selectors in fastest to slowest:
- id (#myid),
- class (.myclass),
- tag (input)    

Answer:


tag > id > class



Tag selectors are fastest in jQuery. It only needs to scan all tag names Ex. body, title, span, input

Id selectors need to scan all elements and their id property.

Class selectors scans all elements and their all properties.

Click here for more about optimization of selectors.

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

Answer:

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.


4. What is the difference between event.stopPropagation and event.stopImmediatePropagation?

Answer:

event.stopPropagation() allows other handlers on the same element to be executed,
while event.stopImmediatePropagation() prevents every event from running. For example, see below jQuery code block.


1
2
3
4
5
6
7
8
$("p").click(function(event){
   event.stopImmediatePropagation();
});
  
$("p").click(function(event){
   // This function won't be executed
   $(this).css("background-color", "#f00");
});


If event.stopPropagation was used in previous example, then the next click event on p element which changes the css will fire,

but in case event.stopImmediatePropagation(), the next p click event will not fire.

5. What are 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.

6. Explain following jquery selectors.
. # |= *= ~= $ ^ : >

Answer:

Refer: https://api.jquery.com/category/selectors


7. What are Call and Apply in Javascript? - Most imp question for js devs

Answer:

In JavaScript, functions are objects. JavaScript functions have properties and methods.

call() and apply() are predefined JavaScript function methods. Both methods can be used to invoke a function, and both methods must have the owner object as first parameter.


1
2
3
4
5
6
7
8
function myFunction(a, b) {
   return a * b;
}
myObject = myFunction.call(myObject, 10, 2);
   // Will return 20
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);
   // Will also return 20


Both methods take an owner object as the first argument. The only difference is that call() takes the function arguments separately, and apply() takes the function arguments in an array.

In JavaScript strict mode, the first argument becomes the value of this in the invoked function, even if the argument is not an object.

In "non-strict" mode, if the value of the first argument is null or undefined, it is replaced with the global object.

P.S. With call() or apply() you can set the value of this, and invoke a function as a new method of an existing object.


8. What is prototype property?

Answer:

The JavaScript prototype property allows you to add new properties to an existing prototype:


1
2
3
4
5
6
7
8
9
10
function Person(first, last, age, eyecolor) {
   this.firstName = first;
   this.lastName = last;
   this.age = age;
   this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
Person.prototype.name = function() {
   return this.firstName + " " + this.lastName;
};


Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects.


9. Explain and contrast the usage of event.preventDefault() and event.stopPropagation(). Provide an example.

Answer:

Event.stopPropagation() stops an event from bubbling up the event chain, whereas event.preventDefault() only precludes the browser’s default action on that event from occurring, but the event still propogates up the event chain.

For example, consider the following code snippet:


1
2
3
4
5
6
7
8
// in this example, 'foo' is a div containing button 'bar'
$("#foo").click(function() {
   // mouse click on div 'foo'
});
$("#bar").click(function(e) {
   // mouse click on button 'bar'
   e.stopPropagation();
});


Due to the call to stopPropagation() in the button’s click handler, the event never propogates to the div so its click handler never fires.

It effectively stops parent elements from knowing about an event on their children.

In contrast, if you replaced the above call to stopPropagation() with a call to preventDefault(), only the browser’s default action would be precluded, but the div’s click handler would still fire.

(Note: Although the stopPropagation() and preventDefault() methods are mostly used in jQuery event handling implementations, they apply to plain JavaScript as well.)


10. Difference between onload() and document.ready() function used in jQuery?

Answer:

We can add more than one document.ready() function in a page.

we can have only one onload function.

Document.ready() function is called as soon as DOM is loaded.

body.onload() function is called when everything (DOM, images)gets loaded on the page.