I hope these questions and answers will help you to crack your jQuery Interview. These interview Questions have been taken from our new released eBook jQuery Interview Questions and Answers.
This eBook has been written to make you confident in jQuery with a solid foundation. Also, this will help you to turn your front-end skills into your profession.
1. What is jQuery?JQuery is a mild weight JavaScript library which offers short and simple method for HTML DOM traversing and manipulation,its event dealing with,its client facet animations,and so on. One of the first-rate characteristic of jQuery is that jQuery helps an efficient way to enforce AJAX applications because of its mild weight nature and make normalize and efficient net programs.
2. How is body onload() feature is different from document.Ready() function utilized in jQuery?
Document.Ready() feature isn't like body onload() function because off 2 reasons.
We can have multiple document.Ready() characteristic in a web page where we are able to have best one onload feature.
Document.Ready() function is referred to as as quickly as DOM is loaded where frame.Onload() feature is known as whilst everything receives loaded on the web page that consists of DOM, pics and all associated sources of the web page.
3. What are capabilities of JQuery or what can be done the use of JQuery?
Features of Jquery
One can easily offer effects and may do animations.
Applying / Changing CSS.
Cool plugins.
Ajax support
DOM selection occasions
Event Handling
4. What are the different sort of selectors in Jquery?
There are 3 types of selectors in Jquery
CSS Selector
XPath Selector
Custom Selector
5. What are the advantages of JQuery ?
There are many advantages with JQuery. Some of them are :
It is more like a JavaScript enhancement so there is no overhead in mastering a brand new syntax.
It has the ability to preserve the code easy, readable, clear and reusable.
Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
It could remove the requirement for writing complex loops and DOM scripting library calls.
Event detection and handling.
Tons of plug-ins for all type of needs.
6. Why jQuery?
JQuery could be very compact and well written JavaScript code that will increase the productiveness of the developer via enabling them to achieve essential UI capability with the aid of writing very much less quantity of code.
It facilitates to
Improve the performance of the application
Develop maximum browser compatible net web page
Implement UI related crucial capability without writing loads of strains of codes
Fast
Extensible — jQuery can be prolonged to enforce custom designed behavior
Other blessings of jQuery are
No want to learn clean new syntax’s to apply jQuery, knowing simple JavaScript syntax is enough
Simple and Cleaner code, no want to write numerous lines of codes to achieve complex functionality.
7. What is jQuery Selectors? Give some examples
jQuery Selectors are used to choose one or a set of HTML elements from your net page.
JQuery support all the CSS selectors in addition to many extra custom selectors.
JQuery selectors constantly start with greenback signal and parentheses: $()
There are three building blocks to pick the factors in an internet document.
1. Select elements by tag name
Example
$(div)
It will select all the div factors in the document.
2. Select factors by means of ID
Example
$(“#abc”)
It will select single element that has an ID of abc.
3. Select elements via Class
Example
$(“.XyzClass”)
It will select all the factors having class xyzClass.
8. Explain width() vs css(‘width’)
In jQuery, there are two manner to exchange the width of an detail. One way is the usage of .Css(‘width’) and other way is the usage of .Width().
For example
$('#mydiv').Css(‘width’,’300px’); $('#mydiv').Width(100);
The distinction in .Css(‘width’) and .Width() is the facts kind of price we specify or return from the both capabilities.
In .Css(‘width’) we should add “px” within the width price at the same time as in .Width() we don’t ought to add.
When you need to get the width of “mydiv” detail then .Css(‘width’) will go back ‘300px’ even as .Width() will go back only integer cost 300.
9. Explain bind() vs stay() vs delegate() techniques.
The bind() method will no longer attach events to those factors which are introduced after DOM is loaded while live() and delegate() techniques attach occasions to the destiny elements also.
The difference among stay() and delegate() techniques is live() characteristic will not paintings in chaining. It will work most effective on an selector or an element whilst delegate() technique can paintings in chaining.
For example
$(document).Ready(function() $("#myTable").Find("tr").stay("click",characteristic() alert($(this).text()); ); );
Above code will now not paintings the use of live() approach. But using delegate() method we will accomplish this.
$(document).Ready(function() $("#dvContainer")children("table").Delegate("tr","click",characteristic() alert($(this).text()); ); );
10. What is using param() method.
The param() method is used to represent an array or an object in serialize manner.
While making an ajax request we will use these serialize values within the query strings of URL.
Syntax:
$.Param(object item array” specifies an array or an object to be serialized.
“boolValue” specifies whether to use the traditional fashion of param serialization or now not.
Example pers Object(); empObject.Name="Ravi"; empObject.Age="28"; empObject.Dept="IT"; $("#clickme").Click(function() $("span").text($.Param(empObject)); );
It will set the text of span to “name=Ravi&age=28&dep=IT”
11. What is the distinction between jquery.Size() and jquery.Length?
JQuery .Size() technique returns range of detail inside the item. But it is not preferred to apply the size() technique as jQuery provide .Length property and which does the identical thing. But the .Length belongings is desired as it does now not have the overhead of a characteristic call.
12. How to read, write and delete cookies in jQuery?
To cope with cookies in jQuery we need to use the Dough cookie plugin.
Dough is easy to use and having powerful capabilities.
Create cookie:
$.Dough(“cookie_name”, “cookie_value”);
Read Cookie:
$.Dough(“cookie_name”);
Delete cookie:
$.Dough(“cookie_name”, “dispose of”);
13. What is difference between $(this) and ‘this’ in jQuery?
$(document).Ready(feature() $(‘#clickme’).Click(function() alert($(this).text()); alert(this.InnerText); ); );
this and $(this) references the same detail however the distinction is that “this” is used in traditional manner but whilst “this” is used with $() then it becomes a jQuery object on which we are able to use the functions of jQuery.?
In the example given, whilst handiest “this” keyword is used then we are able to use the jQuery textual content() function to get the textual content of the element, because it is not jQuery item. Once the “this” keyword is wrapped in $() then we are able to use the jQuery function text() to get the textual content of the detail.
14. What are the diverse ajax functions ?
Ajax allows the person to exchange statistics with a server and update parts of a page with out reloading the whole web page. Some of the features of ajax are as follows:
$.Ajax(): This is considered to be the maximum low level and primary of features. It is used to send requests . This feature can be achieved with out a selector.
$.AjaxSetup(): This function is used to define and set the alternatives for various ajax calls.
For example.
$.AjaxSetup( "type":"POST", "url":"ajax.Php", "success":characteristic(information) $("#bar") .Css("background","yellow") .Html(data); );
Shorthand ajax methods: They incorporate of truly the wrapper characteristic that call $.Ajax() with sure parameters already set.
$.GetJSON(): that is a special sort of shorthand function which is used to just accept the url to which the requests are sent. Also elective facts and non-compulsory callback functions are viable in such functions.
15. Explain .Empty() vs .remove() vs .Detach().
.Empty() technique is used to eliminate all the child factors from matched factors.
.remove() technique is used to cast off all the matched detail. This method will cast off all of the jQuery information associated with the matched element.
.Detach() approach is same as .dispose of() method besides that the .Detach() method doesn’t eliminate jQuery statistics related to the matched factors.
.do away with() is quicker than .Empty() or .Detach() approach.
Syntax:
$(selector).Empty(); $(selector).do away with(); $(selector).Detach();
16. How can events be avoided from stopping to paintings after an ajax request?
There are two ways to address this issue:
Use of event delegation: The event delegation approach works on precept through exploiting the event bubbling. It makes use of occasion effervescent to seize the activities on factors which might be present everywhere inside the domain object model. In jquery the person can make use of the stay and die techniques for the occasions delegation which includes a subset of occasion types.
For example. managing even delegation, coping with of clicks on any detail:
$('#mydiv').Click(characteristic(e) if( $(e.Target).Is('a') ) fn.Call(e.Target,e); ); $('#mydiv').Load('my.Html')
Event rebinding usage: When this technique is used it requires the person to call the bind method and the delivered new elements.
$('a').Click(fn); $('#mydiv').Load('my.Html',function() $('#mydiv a').Click(fn); );
0 Comments