jQuery Interview questions for experienced Candidates
Dear Reader, As we realize that, jQuery is so much intriguing and extremely alluring to all engineers, as it has entirely adaptable and staggering functionalities with exceptionally fast and shortcode prerequisite for fostering an exceptionally enormous and required functionalities. Like assuming you need to play with AJAX then you will lean toward the jQuery in the spot of JavaScript without a doubt.
Allow us to see the code scrap:-
AJAX bring in JavaScript:-
<script>
function loadDoc()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == XMLHttpRequest.DONE) // XMLHttpRequest.DONE == 4
{
if (xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
else if (xmlhttp.status == 400)
{
alert('There was an error 400');
}
else
{
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
} </script>
AJAX bring in jQuery:-
<script>
var data_string = "id=" + id;
$.ajax({
method : 'POST',
url : 'ajax_info.php',
data : data_string,
error : function()
{
alert('error');
},
success: function()
{
alert('success');
}
});
</script>
Extremely sweet and basic code piece in jQuery.
In spite of the fact that we will give more depiction about AJAX in next article. Also, presently let us focus on Interview questions, so here we go:-
What is jQuery?
Ans: jQuery is quick, lightweight and element rich customer side JavaScript Library/Framework which helps in to navigate HTML DOM, make livelinesss, add Ajax collaboration, control the page content, change the style and give cool UI impact. It is one of the most well known customer side libraries and according to a study it runs on consistently site.
For what reason do we utilize jQuery?
Ans: Due to following benefits.
Simple to utilize and learn.
Effectively expandable.
Cross-program support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
Simple to use for DOM control and crossing.
The huge pool of implicit techniques.
AJAX Capabilities.
Strategies for changing or applying CSS, making livelinesss.
Occasion recognition and dealing with.
Huge loads of modules for all sort of requirements.
How JavaScript and jQuery are unique?
Ans: JavaScript is a language While jQuery is a library implicit the JavaScript language that assists with utilizing the JavaScript language.
Clarify what the accompanying code will do:
$( div#first, div.first, ol#items > [name$=first] )
Ans: This code plays out a question to recover any
<div> component with the id first, in addition to all <div> components with the class first, in addition to all components which are offspring of the <ol id=items> component and whose name property closes with the string first. This is an instance of utilizing various selectors without a moment's delay. The capacity will return a jQuery object containing the aftereffects of the inquiry.
Is jQuery substitution of JavaScript?
Ans: No. jQuery isn't a substitution for JavaScript. jQuery is an alternate library which is composed on top of JavaScript. jQuery is a lightweight JavaScript library that accentuates communication among JavaScript and HTML.
Whats the arrangement with the $in jQuery? What is it and what does it mean?Also, how might jQuery be utilized related to another JavaScript library that additionally utilizes $for naming? Reward credit in case you can give two replies.
Ans: Since $ has no exceptional importance in JavaScript, it is allowed to be utilized in object naming. In jQuery, it is essentially utilized as a nom de plume for the jQuery article and jQuery() work.
Notwithstanding, jQuery has no syndication on the utilization of $, so you might experience circumstances where you need to utilize it related to another JS library that likewise utilizes $, which would, along these lines, bring about a naming clash. jQuery gives the jQuery.noConflict()method to simply this explanation. Calling this strategy makes it important to utilize the fundamental name jQuery rather than ensuing references to jQuery and its capacities.
Heres a model from the jQuery documentation:
$(document).ready(function(){
// code
});
Then again, you can likewise utilize a conclusion rather than the $.noConflict() technique; e.g.:
$(document).ready(function(){
// code
});
Is jQuery a library for customer prearranging or server prearranging?
Ans. Customer side prearranging.
Is jQuery a W3C standard?
Ans: No. jQuery isn't a W3C standard.
What is the fundamental need to begin with jQuery?
Ans: To begin with jQuery, one need to make reference of its library. The most recent rendition of jQuery can be downloaded from jQuery.com.
Which is the beginning stage of code execution in jQuery?
Ans: The beginning stage of jQuery code execution is $(document).ready() work which is executed when DOM is stacked.
What does dollar sign ($) implies in jQuery?
Ans: Dollar Sign is only its a moniker for JQuery. Investigate jQuery code.
$(document).ready(function(){
// code
});
More than here $ sign can be supplanted with jQuery watchword.
jQuery(document).ready(function(){
// code
});
Would we be able to have different documents.ready() work in total agreement?
Ans: YES. We can have quite a few document.ready() work in total agreement.
Given the accompanying HTML:
<div id=expander></div>
what's more, the accompanying CSS:
div#expander{ width: 100px; tallness: 100px; foundation tone: blue; }
Compose code in jQuery to enliven the #expander div, extending it from 100 x 100 pixels to
200 x 200 pixels throughout the span of three seconds.
Ans: This should be possible in jQuery as follows:
$( "#expander" ).animate(
{
width: "200px",
height: "200px",
},
3000 );
Would we be able to utilize our own particular person in the spot of $ sign in jQuery?
Ans: Yes. It is conceivable utilizing jQuery.noConflict().
Is it conceivable to utilize other customer side libraries like MooTools, Prototype alongside jQuery?
Ans: Yes.
What is jQuery.noConflict?
Ans: As other customer side libraries like MooTools, Prototype can be utilized with jQuery and they additionally use $() as their worldwide capacity and to characterize factors. The present circumstance makes struggle as $() is utilized by jQuery and one more library as their worldwide capacity. To defeat from such circumstances, jQuery has presented jQuery.noConflict().
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
You can likewise utilize your own particular person in the spot of $ sign in jQuery.
var $j = jQuery.noConflict();
// Use jQuery via jQuery(...)
$j(document).ready(function(){
$j("div").hide();
});
Is there any contrast between body onload() and document.ready() work?
Ans: document.ready() work is unique in relation to body onload() work for 2 reasons.
We can have more than one ready()function in a page where we can have just one body onload work.
ready()function is called when DOM is stacked where body.onload() work is called when everything gets stacked on the page that incorporates DOM, pictures and all related assets of the page.
What is the distinction among .js and .min.js?
Ans: jQuery library comes in 2 unique renditions Development and Production/Deployment. The sending rendition is otherwise called the minified adaptation. So .min.js is fundamentally the minified adaptation of the jQuery library record. Both the documents are same, all things considered. however, .min.js is tiny in size so it stacks rapidly and saves data transmission.
Why there are two unique form of the jQuery library?
Ans: jQuery library comes in 2 unique variants.
Advancement
Creation/Deployment
The improvement adaptation is very helpful at advancement time as jQuery is open source and assuming you need to change something then you can roll out those improvements in the improvement rendition. Yet, the organization rendition is the minified form or compacted form so it is difficult to make changes in it. Since it is packed, so its size is exceptionally not exactly the creation adaptation which influences the page load time.
What is a CDN?
Ans: A substance conveyance organization or content dissemination organization (CDN) is a huge appropriated arrangement of servers sent in various server farms across the Internet. The objective of a CDN is to serve content to end-clients with high accessibility and elite execution.
Which are the famous jQuery CDN? what's more, what is the upside of utilizing CDN?
Ans: There are 3 well known jQuery CDN.
Google.
Microsoft
jQuery.
A benefit of utilizing CDN.
It lessens the heap on your server.
It saves transmission capacity. jQuery system will stack quicker from these CDN.
The main advantage is it will be reserved assuming that the client has visited any site which is utilizing jQuery structure from any of these CDN
How to stack jQuery from CDN?
Ans: Below is the code to stack jQuery from every one of the 3 CDNs.
Code to stack jQuery Framework from Google CDN
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Code to stack jQuery Framework from Microsoft CDN
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>
Code to stack jQuery Framework from jQuery Site(EdgeCast CDN)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
How to stack jQuery locally when CDN falls flat?
Ans: It is a decent way to deal with consistently utilize CDN yet now and again imagine a scenario in which the CDN is down (uncommon chance however) yet you never know in this world as anything can occur.
Underneath given jQuery code checks whether or not jQuery is stacked from Google CDN, in case not then it references the jQuery.js document from your envelope.
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
It first loads the jQuery from Google CDN and afterward checks the jQuery object. In case jQuery isn't stacked effectively then it will reference the jQuery.js record from hard drive area. In this model, the jQuery.js is stacked from Scripts organizer.
What are selectors in jQuery and what number of sorts of selectors are there?
Ans: To work with a component on the website page, first we really want to track down them. To track down the HTML component in jQuery we use selectors. There are many sorts of selectors however essential selectors are:
Name: Selects all components which match with the given component Name.
#ID: Selects a solitary component which matches with the given ID
.Class: Selects all components which match with the given Class.
General (*): Selects all components accessible in a DOM.
Various Elements E, F, G: Selects the consolidated aftereffects of the multitude of determined selectors E, F or G.
Characteristic Selector: Select components dependent on its property estimation.
How would you choose component by ID in jQuery?
Ans: To choose component use ID selector. We want to prefix the id with # (hash image). For instance, to choose component with ID txtName, the linguistic structure would be,
$('#txtName');
What does $(div) will choose?
Ans: This will choose all the div components on the page.
How to choose component having a specific class (.chose)?
Ans: $(.selected). This selector is known as a class selector. We really want to prefix the class name with . (dab).
What does $(div.parent) will choose?
Ans: All the div component with the parent class.
What are the quickest selectors in jQuery?
Ans: ID and component selectors are the quickest selectors in jQuery.
What are the lethargic selectors in jQuery?
Ans: class selectors are the lethargic contrasted with ID and component.
How are jQuery selectors executed?
Ans: Your last selectors is constantly executed first. For instance, in underneath jQuery code, jQuery will initially track down every one of the components with class .myCssClass and after that it will dismiss the wide range of various components which are not in p#elmID.
$("p#elmID .myCssClass");
Which is quick document.getElementByID(txtName) or $(#txtName).?
Ans: Native JavaScipt is in every case quick. jQuery technique to choose txtName $(#txtName) will inside settles on a decision to document.getElementByID(txtName). As jQuery is composed on top of JavaScript and it inside utilizes JavaScript just So JavaScript is in every case quick.
Contrast among $(this) and this in jQuery?
Ans: this and $(this) alludes to a similar component. The main distinction is how they are utilized. this is utilized in the conventional sense, when this is enclosed by $() then, at that point, it turns into a jQuery item and you can utilize the force of jQuery.
$(document).ready(function(){
$('#spnValue').mouseover(function(){
alert($(this).text());
});
});
In underneath model, this is an article however since it isn't enclosed by $(), we cannot utilize jQuery strategy and utilize the local JavaScript to get the worth of range component.
$(document).ready(function(){
$('#spnValue').mouseover(function(){
alert(this.innerText);
});
});
How would you check assuming that a component is unfilled?
Ans: There are 2 methods for checking on the off chance that a component is vacant or not. We can really look at utilizing : void selector.
$(document).ready(function(){
if ($('#element').is(':empty')){
//Element is empty
}
});
Also, the subsequent way is utilizing the $.trim() technique.
$(document).ready(function(){
if($.trim($('#element').html())=='') {
//Element is empty
}
});
How would you check assuming a component exists or not in jQuery?
Ans: Using jQuery length property, we can guarantee whether or not a component exists.
What is the utilization of jquery .each() work?
Ans: The $.each() work is utilized to repeat over a jQuery object. The $.each() capacity can be utilized to repeat over any assortment, regardless of whether it is an item or a cluster.
What is the contrast among jquery.size() and jquery.length?
Ans: jQuery .size() strategy returns number of component in the article. Yet, it isn't liked to utilize the size()method as jQuery give .length property and which does likewise. Yet, the .length property is favored on the grounds that it doesn't have the overhead of a capacity call.
What is the contrast among $(div) and $(<div/>) in jQuery?
Ans: $(<div/>) : This makes a new div component. Anyway this isn't added to DOM tree except if you dont add it to any DOM component.
$(div) : This chooses all the div component present on the page.
What is the contrast among parent() and guardians() techniques in jQuery?
Ans: The essential contrast is the parent() work voyages just one level in the DOM tree, where guardians() work search through the entire DOM tree.
What is the contrast among eq() and get() techniques in jQuery?
Ans: eq() returns the component as a jQuery object. This technique builds another jQuery object from one component inside that set and brings it back. That implies that you can utilize jQuery works on it.
get() return a DOM component. The strategy recovers the DOM components coordinated by the jQuery object. Be that as it may, as it is a DOM component and it's anything but a jQuery-wrapped item. So jQuery capacities cannot be utilized.
How would you execute movement usefulness?
Ans: The .invigorate() technique permits us to make activity consequences for any numeric CSS property. This strategy changes a component starting with one state then onto the next with CSS styles. The CSS property estimation is changed continuously, to make a vivified impact.
Punctuation is:
(selector).animate({styles},speed,easing,callback)
styles: Specifies at least one CSS properties/qualities to enliven.
length: Optional. Determines the speed of the activity.
facilitating: Optional. Determines the speed of the component in various places of the movement. The default esteem is swing.
callback: Optional. A capacity to be executed after the movement finishes.
Basic utilization of the energize work is,
$("btnClick").click(function(){
$("#dvBox").animate({height:"100px"});
});
How to incapacitate jQuery activity?
Ans: Using jQuery property jQuery.fx.off, which when set to valid, incapacitates all the jQuery activity. At the point when this is done, all activity techniques will quickly set components to their last state when called, rather than showing an impact.
How would you stop the presently running activity?
Ans: Using jQuery .stop() technique.
What is the distinction between .void(), .eliminate() and .isolate() techniques in jQuery?
Ans: All these strategies .vacant(), .eliminate() and .separate() are utilized for eliminating components from DOM yet they all are unique.
.void(): This technique eliminates all the kid component of the coordinated with component where eliminate() strategy eliminates set of coordinated with components from DOM.
.eliminate(): Use .eliminate() when you need to eliminate the actual component, just as everything inside it. Notwithstanding the actual components, every bound occasion and jQuery information related with the components are eliminated.
.disconnect(): This strategy is as old as(), .then again, actually .isolate() keeps all jQuery information related with the eliminated components. This technique is valuable when taken out components are to be reinserted into the DOM sometime in the not too distant future.
Clarify .tie() versus .live() versus .delegate() versus .on()
Ans: All these 4 jQuery techniques are utilized for appending occasions to selectors or components. In any case, they all are unique in relation to one another.
<a href=http://jquerybyexample.blogspot.com/2010/06/jquery-tie work exampledemo.html>.bind()</a>: This is the least demanding and fast technique to tie occasions. Yet, the issue with tie() is that it doesnt work for components added progressively that coordinates with a similar selector. tie() just append occasions to the current components, not a future component. Over that, it likewise has execution issues when managing an enormous determination.
<a href=http://jquerybyexample.blogspot.com/2010/06/jquery-live-work exampledemo.html>.live()</a>: This strategy beats the drawback of tie(). It works for progressively added components or future components. In view of its horrible showing on enormous pages, this strategy is expostulated as of jQuery 1.7 and you should quit utilizing it. Fastening isn't as expected upheld utilizing this technique.
<a href=http://jquerybyexample.blogspot.com/2010/08/jquery-delegate-work exampledemo.html>.delegate()</a>: The .delegate() strategy acts along these lines to the .live() technique, however rather than joining the selector/occasion data to the archive, you can pick where it is moored and it likewise upholds affixing.
.on(): Since live was censured with 1.7, so new strategy was presented named .on(). This technique gives all the decency of past 3 strategies and it brings consistency for appending occasion controllers.
What's up with this code line $(#myid.3).text(blah blah!!!);
Ans: The issue with above explanation is that the selectors is having meta characters and to utilize any of the meta-characters (, for example, !#$%&'()*+,./:;<=>?@[\]^'{|}~ ) as a strict piece of a name, it should be gotten away with two oblique punctuation lines: \\. For instance, a component with id=foo.bar, can utilize the selector $(#foo\\.bar).
So the right punctuation is,
$('#myid\\.3').text('blah blah!!!');
How to make a clone of any article utilizing jQuery?
Ans: jQuery gives clone() strategy which plays out a profound duplicate of the arrangement of coordinated with components, implying that it duplicates the coordinated with components just as the entirety of their relative components and text hubs.
$(document).ready(function(){
$('#btnClone').click(function(){
$('#dvText').clone().appendTo('body');
return false;
});
});
Does occasions are likewise duplicated when you clone a component in jQuery?
Ans: As clarified in the past question, utilizing clone() technique, we can make a clone of any component yet the default execution of the clone() strategy doesnt duplicate occasions except if you tell the clone() technique to duplicate the occasions. The clone() strategy takes a boundary, assuming you pass genuine then it will duplicate the occasions too.
$(document).ready(function(){
$("#btnClone").bind('click', function(){
$('#dvClickme').clone(true).appendTo('body');
} });?
What is the distinction among prop and attr?
Ans: attr(): Get the worth of a characteristic for the primary component in the arrangement of coordinated with components. Whereas,.prop(): (Introduced in jQuery 1.6) Get the worth of a property for the primary component in the arrangement of coordinated with components.
Ascribes convey extra data about a HTML component and come in name=value sets. Where Property is a portrayal of a trait in the HTML DOM tree. when the program parses your HTML code , relating DOM hub will be made which is an article accordingly having properties.
attr() provides you with the worth of component as it was characterized in the HTML on page load. It is constantly prescribed to utilize prop() to get upsides of components which is changed by means of javascript/jquery, as it provides you with the first worth of a components present status.
What is occasion PreventDefault?
Ans: The event.preventDefault() technique stops the default activity of a component from occurring. For instance, Prevents a connection from following the URL.
What is the distinction between occasion? PreventDefault and event.stopPropagation?
Ans: event.preventDefault(): Stops the default activity of a component from occurring.
event.stopPropagation(): Prevents the occasion from rising the DOM tree, keeping any parent controllers from being advised of the occasion. For instance, assuming there is a connection with a tick strategy appended within a DIV or FORM that likewise has a tick technique joined, it will forestall the DIV or FORM click technique from terminating.
What is the distinction between occasion? PreventDefault and return bogus?
Ans: e.preventDefault() will keep the default occasion from happening, e.stopPropagation() will keep the occasion from rising and return bogus will do both.
What is the distinction among event.stopPropagation and event.stopImmediatePropagation?
Ans: event.stopPropagation() permits different controllers on a similar component to be executed, while event.stopImmediatePropagation() keeps each occasion from running. For instance, see underneath jQuery code block.
$("p").click(function(event){
event.stopImmediatePropagation();
});
$("p").click(function(event){
// This function won't be executed
$(this).css("background-color", "#f00");
});
On the off chance that event.stopPropagation was utilized in past model, then, at that point, the following snap occasion on p component which changes the css will fire, yet in the event that event.stopImmediatePropagation(), the following p click occasion won't fire.
