JQUERY INTERVIEW QUESTIONS ANSWERS

jQuery is a fast, lightweight, feature-rich client-side JavaScript library. It is cross-platform and supports different types of browsers. It has provided a much-needed boost to JavaScript. Before jQuery, JavaScript codes were lengthy and bigger, even for smaller functions. It makes a website more interactive and attractive.

Document.ready() function is different from body onload() function because off 2 reasons.

  • We can have more than one document.ready() function in a page where we can have only one 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.

The difference between the jQuery and the JavaScript can simply be explained. 
JavaScript can simply be interpreted as a high-level application language whereas, jQuery can be interpreted as a library which is built within the JavaScript language & helps in the better functioning of JavaScript.

jQuery can be interpreted as an internally built library which is being used in the JavaScript. 
And jQuery is strictly been designed with the functionality of client-side scripting. jQuery is not compatible with server-side scripting. 

In order to get begin with the jQuery, all that one needs to do at the beginning is to make a reference to its complete library. After this, you will be having access to all the application files which are present within the library. jQuery latest version can now get downloaded from jQuery.com

  • It is very easy to learn and use.
  • It is used to develop browser compatible web applications.
  • It improves the performance of an application.
  • It is very fast and extensible.
  • It facilitates you to write minimal lines of codes for UI related functions.
  • It provides cross-browser support.

The $() function is an alias of jQuery() function. It is used to wrap any object into jQuery object which later facilitates you to call the various method defined jQuery object. You can pass a selector string to $() function, and it returns a jQuery object which contains an array of all matched DOM elements.

Syntax:

  1. $(document).ready(function() {  
  2. $(“p”).css(“background-color”“pink”);  
  3. }); 

Some of the effects methods are:

  • Show()
  • Hide()
  • Toggle()
  • FadeIn() and
  • FadeOut()

JQuery Ajax method makes use of four different parameters which include
* URL – The URL must be clearly specified in order to send the request. 
* type – Specifies the type of request(Get or Post)
* data – Specifies data to be sent to the server
* Cache – This tells if the browser should index the specific page or not. 

The jQuery toggle() is a particular type of method which is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.

Syntax: 

  1. $(selector).toggle();  
  2. $(selector).toggle(speed, callback);  
  3. $(selector).toggle(speed, easing, callback);  
  4. $(selector).toggle(display);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of toggle() effect.

display: If true, it displays an element. If false, it hides the element.

Just like they are used in the CSS, both ID selector and Class selector are used for the same functioning .

In order explain the functioning of both the concepts in simpler words, ID selector uses ID while class selector makes use of a class to select the different elements.

In the case where you are needed to select only one element then we have to go with the ID selector. And if you want to select a group of elements, then we have to go with the class selector.

Following are the basic selectors in jQuery:

  • Element ID
  • CSS Name
  • Tag Name
  • DOM hierarchy

Chaining is used to connect multiple events and functions in a selector.

The animate function is extensively being used in the jQuery. It is an advanced concept which is well received by the audience. Well, the main feature of the animation function in jQuery is to apply the custom animation effect to different elements. 

The syntax for this function is as follows
Syntax:

$(selector).animate({params}, [duration], [easing], [callback])  

Here,
* “param” defines the CSS properties where are intended to apply the animation.
* “duration” it simply depicts for what exact period of time the animation will run. Its values are:   “slow”, “fast”, “normal” or it can even be milliseconds.
* “easing” is the string which specifies the function for the transition.
* “callback” it is the function with the help of which we can call an action upon the completion of the animation. 

The jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded in, it makes them faded out, and if they are faded out, it makes them faded in.

Syntax: 

  1. $(selector).fadeToggle();  
  2. $(selector).fadeToggle(speed,callback);   
  3. $(selector).fadeToggle(speed, easing, callback);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of fadeToggle() effect.

The jQuery delay() method is used to delay the execution of functions in the queue. It is the best method to make a delay between the queued jQuery effects. The jQUery delay () method sets a timer to delay the execution of the next item in the queue.

Syntax: 

  1. $(selector).delay (speed, queueName)    

speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.

queueName: It is also an optional parameter. It specifies the name of the queue. Its default value is “fx” the standard queue effect.

jQuery library has two different versions Development and Production. The other name for the deployment version is minified version. 

Considering the functionality, both the files they are much similar to each other. Being smaller in size, the  .min.js   gets loaded quickly saving the bandwidth.

The bind() method will not attach events to those elements which are added after DOM is loaded while live() and delegate() methods attach events to the future elements also.

The difference between live() and delegate() methods is live() function will not work in chaining. It will work only on an selector or an element while delegate() method can work in chaining.

For example

$(document).ready(function(){
$("#myTable").find("tr").live("click",function(){
alert($(this).text());
});
});

Above code will not work using live() method. But using delegate() method we can accomplish this.

$(document).ready(function(){
$("#dvContainer")children("table").delegate("tr","click",function(){
alert($(this).text());
});
});

The param() method is used to represent an array or an object in serialize manner.
While making an ajax request we can use these serialize values in the query strings of URL.

Syntax:

$.param(object | array, boolValue)

“object | array” specifies an array or an object to be serialized.

“boolValue” specifies whether to use the traditional style of param serialization or not.

Example

personObj=new Object();
empObject.name="Saurabh";
empObject.age="27";
empObject.dept="webinfratech.com";
$("#clickme").click(function(){
$("span").text($.param(empObject));
});

It will set the text of span to “name=Saurabh&age=27&dep=webinfratech.com”

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.

To deal with cookies in jQuery we have to use the Dough cookie plugin.

Dough is easy to use and having powerful features.

  • Create cookie:
    $.dough(“cookie_name”, “cookie_value”);
  • Read Cookie:
    $.dough(“cookie_name”);
  • Delete cookie:
    $.dough(“cookie_name”, “remove”);
$(document).ready(function(){
$('#clickme').click(function(){
 alert($(this).text());
 alert(this.innerText);
});
});

this and $(this) references the same element but the difference is that “this” is used in traditional way but when “this” is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.?

In the example given, when only “this” keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the “this” keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

The jQuery html() method is used to change the entire content of the selected elements. It replaces the selected element content with new contents.

Syntax: 

  1. $(document).ready(function(){    
  2.     $(“button”).click(function(){    
  3.         $(“p”).html(“Hello <b>Javatpoint.com</b>“);    
  4.     });    
  5. }); 

The jQuery CSS() method is used to get (return)or set style properties or values for selected elements. It facilitates you to get one or more style properties. The jQuery CSS() provides two ways:

Return a CSS property

It is used to get the value of a specified CSS property. 

  1. $(document).ready(function(){    
  2.     $(“button”).click(function(){    
  3.         alert(“Background color = ” + $(“p”).css(“background-color”));    
  4.     });    
  5. });    

Set a CSS property

This property is used to set a specific value for all matched element. 

  1. $(document).ready(function(){    
  2.     $(“button”).click(function(){    
  3.         $(“p”).css(“background-color”, “violet”);    
  4.     });    
  5. });  
  • .empty() method is used to remove all the child elements from matched elements.
  • .remove() method is used to remove all the matched element. This method will remove all the jQuery data associated with the matched element.
  • .detach() method is same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.

.remove() is faster than .empty() or .detach() method.

Syntax:

$(selector).empty();
$(selector).remove();
$(selector).detach();

Yes, instead of $ (dollar sign) we can use jQuery as a function name. For example: 

  1. jQuery(document).ready(function() {    
  2. jQuery(“p”).css(“background-color”“pink”);    
  3. }); 

attr(): It gets the value of an attribute for the first element in the set of matched element.

prop(): it gets the value of a property for the first element in the set of matched elements. It is introduced in jQuery 1.6.

The animate function is used to apply the custom animation effect to elements. Syntax: 

  1. $(selector).animate({params}, [duration], [easing], [callback])  

Here,

  • “param” defines the CSS properties on which you want to apply the animation.
  • “duration” specify how long the animation run. It can be one of the following values: “slow,” “fast,” “normal” or milliseconds
  • “easing” is the string which specifies the function for the transition.
  • “callback” is the function which we want to run once the animation effect is complete.

The term CDN relates to the concept of Content Delivery Network. In general, CDN can be interpreted as a large system of servers that are deployed in multiple data centers across the internet. 

CDN is mainly aimed at delivering the content to the end-users by enabling them to have high availability and high performance

The benefits of CDN are quite effective in relation to the working functionality of the jQuery.
Some of the benefits of the CDN include

* CDN greatly diminishes the load from your server.
* Saving the bandwidth CDN helps the jQuery to load faster than the usual time
* The most prominent feature of the CDN is that it if any user visits a website which is running on jQuery it caches it.

The main differentiating factor of onload() and document.ready() is that

At max, a page supports the existence of only one onload function, & all the other onload functions will be getting terminated

While coming to the document.ready function, a page can have more than one document.ready function. 
 
Also, the document.ready function is called when the DOM gets loaded and whereas the onload function gets called only when the DOM images get loaded on the page.

Leave a Reply