Frequently Asked jQuery Interview Questions
Q – 1 What are jQuery Selectors?
Ans-
★ jQuery Selectors are used to select one or a group of HTML elements from your web page.
★ jQuery support all the CSS selectors as well as many additional custom selectors.
★ jQuery selectors always start with dollar sign and parentheses: $()
★ There are three building blocks to select the elements in a web document.
Q – 2 Define all the ways to include jQuery in a page?
Ans- Following are the ways to include jQuery in a page:
★ Local copy inside script tag
★ Local copy of script manager control
★ Embedded script using client script object
★ Remote copy of jQuery.com
★ Remote copy of Ajax API
Q – 3 List the advantages of jQuery?
Ans-
★ Just a JavaScript enhancement
★ Coding is simple, clear, reusable
★ Removal of writing more complex conditions and loops
Q – 4 List the basic selectors in jQuery?
Ans- Basic selectors in jQuery:
★ Element ID
★ CSS Name
★ Tag Name
★ DOM hierarchy
Q – 5 jQuery can be used in what scenarios?
Ans- jQuery can be used in following scenarios:
★ Apply CSS static or dynamic
★ Calling functions on events
★ Manipulation purpose
★ Mainly for Animation effects
Q – 6 Is jQuery better than javascript?
Ans- jQuery is great library for developing ajax based application.
It helps the programmers to keep code simple and concise and reusable.
Q – 7 How to read, write and delete cookies in jQuery?
Ans-
★ 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”);
Q – 8 Explain the difference between $(this) and ‘this’ in jQuery?
Ans- Refer the following example:
$(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.
Q – 9 Define slideToggle() effect?
Ans- slideToggle() effect is used to give animated sliding effect to an element.
Syntax:
slideToggle([ duration] [, easing] [, callback])
“duration” is the number specifying how long the animation will run.
“easing” is the string which specify the function for the transition.
“callback” is the function which we want to run once the animation is complete.
If the element is visible then this effect will slide the element up side and make it completely hidden. If the element is hidden then slideToggle() effect will slide it down side and make it visible.
We can specify the toggle speed with this effect.
For example:
$(“#clickme”).click(function(){
$(“#mydiv”).slideToggle(“slow”, function(){
//run after the animation is complete.
});
});
Q – 10 Define each() function in jQuery?
Ans- The each() function specify the function to be called for every matched element.
Syntax:
$(selector).each(function (index, element))
“index” is the index position of the selector.
“selector” specifies the current selector where we can use “this” selector also.
In the case when we need to stop the each loop early then we can use “return false;”
For example:
$(“#clickme”).click(function(){
$(“li”).each(function(){
document.write($(this).text())
});
});
This will write the text for each “li” element.
Q – 11 Derfine width() vs css(‘width’)?
Ans- In jQuery, there are two way to change the width of an element.
One way is using .css(‘width’) and other way is using .width().
For example:
$(‘#mydiv’).css(‘width’,’300px’);
$(‘#mydiv’).width(100);
★ The difference in .css(‘width’) and .width() is the data type of value we specify or return from the both functions.
★ In .css(‘width’) we have to add “px” in the width value while in .width() we don’t have to add.
★ When you want to get the width of “mydiv” element then .css(‘width’) will return ‘300px’ while .width() will return only integer value 300.
Q – 12 Define .siblings() method in jQuery?
Ans- When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.
We filter the elements fetched by an optional selector.
Syntax : .siblings( [selector])
“selector” is the selector expression which specify the matched elements.
For example:
- item 1
- item 2
- item 3
- item 4
Now we want to find the siblings of the element of id “second_item” and change the text color to Blue :
$(‘li.second_item’).siblings().css(‘color’,’blue’);
If we want specific sibling elements for example the elements having class “myitem” then we can pass a optional selector:
$(‘li.second_item’).siblings(‘.myitem’).css(‘color’,’blue’);
Q – 13 Define animate function in jQuery?
Ans- The animate function is used to apply the custom animation effect to elements.
Syntax:
$(selector).animate({params}, [duration], [easing], [callback])
“param” defines the CSS properties on which you want to apply the animation.
“duration” specify how long the animation will run. It can be one of following values : “slow”, “fast”, “normal” or milliseconds
“easing” is the string which specify the function for the transition.
“callback” is the function which we want to run once the animation effect is complete.
For example:
Following is the jQuery to animate opacity, left offset, and height of the mydiv element
$(‘# clickToAnimate’).click(function() {
$(‘#book’).animate({
opacity: 0.30,
left: ‘+=20’,
height: ‘toggle’
}, 3000, function() {
// run after the animation complete.
});
});
Q – 14 How to give face effect in jQuery?
Ans- In jQuery we have three methods to give the fade effect to elements: fadeIn, fadeOut and fadeTo
This methods change the opacity of element with animation.
Syntax:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
“speed” can be one of following values : “slow”, “fast”, “normal” or milliseconds
“opacity” specify the value that allows the fading to given opacity.
“callback” is the function which we want to run once the fading effect is complete.
For example
$(“clickme”).click(function(){
$(“mydiv”).fadeTo(“slow”,0.50);
});
$(“clickme”).click(function(){
$(“mydiv”).fadeOut(3000);
});.
Q – 15 Define the types of selectors in jQuery?
Ans-
★ XPath Selector
★ Custom Selector
★ CSS Selector
Q – 16 How to debug jQuery?
Ans- There are two ways to debug jQuery:
Debugger keyword:
★ Insert a break point after attaching the process
★ Add the debugger to the line from where we have to start debugging and then run Visual Studio in Debug mode with F5 function key.
Q – 17 Why we use chaining in jQuery?
Ans- Chaining is used to connect multiple events and functions in a selector.
Q – 18 Define the script build up by jQuery?
Ans- jQuery is a Javascript file and it is single javascript file that contains common DOM, event effects and Ajax functions.
Q – 19 What is jQuery a client or server scripting?
Ans- jQuery is a client scripting.
Q – 20 Describe the two types of CDNs?
Ans-
★ Google – Load jQuery from Google libraries API
★ Microsoft – Load jQuery from Ajax CDN
Q – 21 Define CDN in jQuery?
Ans- CDN is abbreviated as Content Distribution network and it is said to be a group of companies in different location with network containing copies of data files to maximize bandwidth in accessing the data.
Q – 22 Define jQuery filter?
Ans- The jQuery filter is used to filter the certain values from the object list based on the criteria. Example is to filter certain products from the master list of products in a cart website.
Q – 23 Tell me which program is useful for testing jQuery?
Ans- QUnit is used to test jQuery and it is very easy and efficient.
Q – 24 Explain the difference between size and length of jQuery?
Ans- Size and length both returns the number of element in an object. But length is faster than the size because length is a property and size is a method.
Q – 25 Define the use of each function in jQuery?
Ans- Each function is used to iterate each and every element of an object. It is used to loop DOM elements, arrays and the object properties.