I hope these questions and answers will help you to crack your jQuery Interview. These interview questions have been taken from our newly 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 lightweight JavaScript library that gives a short and easy method for HTML DOM traversing and manipulation, its occasion coping with,its client-side animations,and so on. One of the great characteristics of jQuery is that jQuery supports an efficient way to put in force AJAX applications because of its mild weight nature and make normalize and efficient net programs.
2. How is frame onload() function isn't like document.Ready() characteristic used in jQuery?
Document.Ready() characteristic isn't like body onload() feature because off 2 reasons.
We can have multiple document.Ready() feature in a web page where we are able to have only one onload feature.
Document.Ready() characteristic is called as quickly as DOM is loaded where frame.Onload() feature is referred to as while everything gets loaded on the page that includes DOM, pics and all associated assets of the page.
3. What are the functions of JQuery or what can be done the usage of JQuery?
Features of Jquery
4. What is the different forms of selectors in Jquery?
There are 3 varieties of selectors in Jquery
There are many advantages to JQuery. Some of them are :
6. Why jQuery?
JQuery could be very compact and properly written JavaScript code that increases the productiveness of the developer by using enabling them to achieve essential UI capability by means of writing very less amount of code.
It enables to
Improve the performance of the application
Develop maximum browser compatible net web page
Implement UI related crucial capability without writing masses of lines of codes
Fast
Extensible — jQuery may be extended to put into effect customized behavior
Other blessings of jQuery are
No want to learn sparkling new syntax’s to apply jQuery, knowing simple JavaScript syntax is enough
Simple and Cleaner code, no need to write several lines of codes to achieve complicated capability.
7. What is jQuery Selectors? Give a few examples
jQuery Selectors are used to select one or a group of HTML factors from your net page.
JQuery support all of the CSS selectors in addition to many extra custom selectors.
JQuery selectors continually start with greenback sign and parentheses: $()
There are three building blocks to pick the elements in an internet document.
1. Select elements by way of tag name
Example
$(div)
It will choose all the div elements inside the document.
2. Select factors through 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 of the elements having elegance xyzClass.
8. Explain width() vs css(‘width’)
In jQuery, there are way to change the width of an element. One way is the use 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 data kind of cost we specify or return from the both features.
In .Css(‘width’) we should add “px” in the width value whilst in .Width() we don’t should add.
When you want to get the width of “mydiv” element then .Css(‘width’) will return ‘300px’ while .Width() will go back simplest integer cost 300.
9. Explain bind() vs stay() vs delegate() techniques.
The bind() technique will now not attach occasions to those factors which can be brought after DOM is loaded at the same time as live() and delegate() techniques attach activities to the destiny elements also.
The distinction among live() and delegate() strategies is stay() feature will now not work in chaining. It will paintings simplest on an selector or an detail at the same time as delegate() approach can work in chaining.
For example
$(document).Ready(function() $("#myTable").Find("tr").stay("click",function() alert($(this).text()); ); );
Above code will now not work using live() technique. But using delegate() method we will accomplish this.
$(document).Ready(characteristic() $("#dvContainer")children("table").Delegate("tr","click",characteristic() alert($(this).text()); ); );
10. What is the use of param() approach.
The param() method is used to represent an array or an object in serialize manner.
While making an ajax request we can use those serialize values inside the query strings of URL.
Syntax:
$.Param(item item item to be serialized.
“boolValue” specifies whether to apply the traditional style of param serialization or now not.
Example pers Object(); empObject.Name="Ravi"; empObject.Age="28"; empObject.Dept="IT"; $("#clickme").Click(characteristic() $("span").textual content($.Param(empObject)); );
It will set the text of span to “name=Ravi&age=28&dep=IT”
11. What is the distinction among jquery.Size() and jquery.Length?
JQuery .Size() technique returns variety of element within the item. But it isn't always desired to use the size() method as jQuery provide .Length belongings and which does the same thing. But the .Length assets is desired as it does no longer have the overhead of a feature call.
12. How to read, write and delete cookies in jQuery?
To address cookies in jQuery we should use the Dough cookie plugin.
Dough is straightforward to apply and having powerful capabilities.
Create cookie:
$.Dough(“cookie_name”, “cookie_value”);
Read Cookie:
$.Dough(“cookie_name”);
Delete cookie:
$.Dough(“cookie_name”, “get rid of”);
13. What is difference among $(this) and ‘this’ in jQuery?
$(document).Ready(feature() $(‘#clickme’).Click(feature() alert($(this).textual content()); alert(this.InnerText); ); );
this and $(this) references the identical detail but the distinction is that “this” is utilized in traditional way but when “this” is used with $() then it becomes a jQuery object on which we will use the capabilities of jQuery.?
In the example given, while only “this” key-word is used then we will use the jQuery text() function to get the textual content of the element, as it isn't jQuery object. Once the “this” keyword is wrapped in $() then we will use the jQuery feature text() to get the textual content of the detail.
14. What are the diverse ajax features ?
Ajax allows the consumer to exchange information with a server and update elements of a page without reloading the complete page. Some of the capabilities of ajax are as follows:
$.Ajax(): This is taken into consideration to be the most low stage and simple of features. It is used to send requests . This feature can be accomplished without a selector.
$.AjaxSetup(): This feature is used to define and set the options for numerous ajax calls.
For example.
$.AjaxSetup( "type":"POST", "url":"ajax.Php", "success":function(information) $("#bar") .Css("background","yellow") .Html(data); );
Shorthand ajax techniques: They comprise of certainly the wrapper function that call $.Ajax() with sure parameters already set.
$.GetJSON(): that is a special sort of shorthand function that is used to accept the url to which the requests are sent. Also elective statistics and optionally available callback functions are viable in such capabilities.
15. Explain .Empty() vs .get rid of() vs .Detach().
.Empty() approach is used to remove all of the child factors from matched factors.
.put off() technique is used to take away all of the matched detail. This approach will remove all the jQuery statistics associated with the matched element.
.Detach() technique is equal as .dispose of() technique besides that the .Detach() technique doesn’t take away jQuery information related to the matched factors.
.dispose of() is faster than .Empty() or .Detach() technique.
Syntax:
$(selector).Empty(); $(selector).cast off(); $(selector).Detach();
16. How can events be avoided from stopping to work after an ajax request?
There are ways to address this issue:
Document.Ready() characteristic isn't like body onload() feature because off 2 reasons.
We can have multiple document.Ready() feature in a web page where we are able to have only one onload feature.
Document.Ready() characteristic is called as quickly as DOM is loaded where frame.Onload() feature is referred to as while everything gets loaded on the page that includes DOM, pics and all associated assets of the page.
3. What are the functions of JQuery or what can be done the usage of JQuery?
Features of Jquery
- One can easily offer effects and may do animations.
- Applying / Changing CSS.
- Cool plugins.
- Ajax support
- DOM selection activities
- Event Handling
4. What is the different forms of selectors in Jquery?
There are 3 varieties of selectors in Jquery
- CSS Selector
- XPath Selector
- Custom Selector
There are many advantages to JQuery. Some of them are :
- It is more like a JavaScript enhancement so there is no overhead in learning a brand new syntax.
- It has the potential to maintain the code easy, readable, clear and reusable.
- Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
- It might eliminate the requirement for writing complex loops and DOM scripting library calls.
- Event detection and coping with.
- Tons of plug-ins for all kind of needs.
6. Why jQuery?
JQuery could be very compact and properly written JavaScript code that increases the productiveness of the developer by using enabling them to achieve essential UI capability by means of writing very less amount of code.
It enables to
Improve the performance of the application
Develop maximum browser compatible net web page
Implement UI related crucial capability without writing masses of lines of codes
Fast
Extensible — jQuery may be extended to put into effect customized behavior
Other blessings of jQuery are
No want to learn sparkling new syntax’s to apply jQuery, knowing simple JavaScript syntax is enough
Simple and Cleaner code, no need to write several lines of codes to achieve complicated capability.
7. What is jQuery Selectors? Give a few examples
jQuery Selectors are used to select one or a group of HTML factors from your net page.
JQuery support all of the CSS selectors in addition to many extra custom selectors.
JQuery selectors continually start with greenback sign and parentheses: $()
There are three building blocks to pick the elements in an internet document.
1. Select elements by way of tag name
Example
$(div)
It will choose all the div elements inside the document.
2. Select factors through 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 of the elements having elegance xyzClass.
8. Explain width() vs css(‘width’)
In jQuery, there are way to change the width of an element. One way is the use 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 data kind of cost we specify or return from the both features.
In .Css(‘width’) we should add “px” in the width value whilst in .Width() we don’t should add.
When you want to get the width of “mydiv” element then .Css(‘width’) will return ‘300px’ while .Width() will go back simplest integer cost 300.
9. Explain bind() vs stay() vs delegate() techniques.
The bind() technique will now not attach occasions to those factors which can be brought after DOM is loaded at the same time as live() and delegate() techniques attach activities to the destiny elements also.
The distinction among live() and delegate() strategies is stay() feature will now not work in chaining. It will paintings simplest on an selector or an detail at the same time as delegate() approach can work in chaining.
For example
$(document).Ready(function() $("#myTable").Find("tr").stay("click",function() alert($(this).text()); ); );
Above code will now not work using live() technique. But using delegate() method we will accomplish this.
$(document).Ready(characteristic() $("#dvContainer")children("table").Delegate("tr","click",characteristic() alert($(this).text()); ); );
10. What is the use of param() approach.
The param() method is used to represent an array or an object in serialize manner.
While making an ajax request we can use those serialize values inside the query strings of URL.
Syntax:
$.Param(item item item to be serialized.
“boolValue” specifies whether to apply the traditional style of param serialization or now not.
Example pers Object(); empObject.Name="Ravi"; empObject.Age="28"; empObject.Dept="IT"; $("#clickme").Click(characteristic() $("span").textual content($.Param(empObject)); );
It will set the text of span to “name=Ravi&age=28&dep=IT”
11. What is the distinction among jquery.Size() and jquery.Length?
JQuery .Size() technique returns variety of element within the item. But it isn't always desired to use the size() method as jQuery provide .Length belongings and which does the same thing. But the .Length assets is desired as it does no longer have the overhead of a feature call.
12. How to read, write and delete cookies in jQuery?
To address cookies in jQuery we should use the Dough cookie plugin.
Dough is straightforward to apply and having powerful capabilities.
Create cookie:
$.Dough(“cookie_name”, “cookie_value”);
Read Cookie:
$.Dough(“cookie_name”);
Delete cookie:
$.Dough(“cookie_name”, “get rid of”);
13. What is difference among $(this) and ‘this’ in jQuery?
$(document).Ready(feature() $(‘#clickme’).Click(feature() alert($(this).textual content()); alert(this.InnerText); ); );
this and $(this) references the identical detail but the distinction is that “this” is utilized in traditional way but when “this” is used with $() then it becomes a jQuery object on which we will use the capabilities of jQuery.?
In the example given, while only “this” key-word is used then we will use the jQuery text() function to get the textual content of the element, as it isn't jQuery object. Once the “this” keyword is wrapped in $() then we will use the jQuery feature text() to get the textual content of the detail.
14. What are the diverse ajax features ?
Ajax allows the consumer to exchange information with a server and update elements of a page without reloading the complete page. Some of the capabilities of ajax are as follows:
$.Ajax(): This is taken into consideration to be the most low stage and simple of features. It is used to send requests . This feature can be accomplished without a selector.
$.AjaxSetup(): This feature is used to define and set the options for numerous ajax calls.
For example.
$.AjaxSetup( "type":"POST", "url":"ajax.Php", "success":function(information) $("#bar") .Css("background","yellow") .Html(data); );
Shorthand ajax techniques: They comprise of certainly the wrapper function that call $.Ajax() with sure parameters already set.
$.GetJSON(): that is a special sort of shorthand function that is used to accept the url to which the requests are sent. Also elective statistics and optionally available callback functions are viable in such capabilities.
15. Explain .Empty() vs .get rid of() vs .Detach().
.Empty() approach is used to remove all of the child factors from matched factors.
.put off() technique is used to take away all of the matched detail. This approach will remove all the jQuery statistics associated with the matched element.
.Detach() technique is equal as .dispose of() technique besides that the .Detach() technique doesn’t take away jQuery information related to the matched factors.
.dispose of() is faster than .Empty() or .Detach() technique.
Syntax:
$(selector).Empty(); $(selector).cast off(); $(selector).Detach();
16. How can events be avoided from stopping to work after an ajax request?
There are ways to address this issue:
- Use of event delegation: The occasion delegation technique works on principle via exploiting the occasion bubbling. It uses occasion effervescent to capture the events on factors which can be present anywhere in the domain item model. In jquery the person can make use of the live and die strategies for the occasions delegation which incorporates a subset of event types.
- For example. dealing with even delegation, dealing with of clicks on any detail:
- $('#mydiv').Click(feature(e) if( $(e.Target).Is('a') ) fn.Call(e.Target,e); ); $('#mydiv').Load('my.Html')
- Event rebinding usage: When this approach is used it calls for the user to name the bind method and the added new elements.
0 Comments