JQuery Interview Questions

Introduction:-

                     Interview Questions on jQuery. Some of this i have faced in several interviews and some question i have collected and gathered for my viewer.

Description:-

                     Most of the interviewer test your knowledge on jQuery by asking some basic questions i have provided below.Here i have provided few basic question and answer what a interviewer wants to listen from you.

Let us start from the fundamentals

Q.1:-What do you mean by jQuery?

 Ans:-The best answer for this question should be  jQuery is a lightweight JavaScript library which  emphasizes interaction between JavaScript and HTML.

Q-2:-Can you explain the use of "$ function" in jquery with a suitable example.

Ans:-You can answer like this,

Type of this function is "function". and like that there are a lot of anonymous functions available in jQuery.

Q-3:-Can you explain what is jQuery Selectors and give some example.

Ans:-Your answer should be

• From your webpage  jQuery Selectors are used to select one or a group of HTML elements.

• Always it starts with dollar sign and parentheses like $()

• jQuery also supports all the CSS selectors as well as additional custom selectors.

• In three way you can select the elements in a web document i.e.

                      1.By tag name    Example: $(div)   

                           This will select all the div elements present in that document.

                      2.By class

                           Example: $(".anyclassname")

                           This will select all the elements having same class name.

                      3.By id

                          Example: $("#anyid")

                          This will select  single element which has an ID of  anyid

Q-4:- Difference between width() and css('width').

 Ans:- In jQuery we can change the width of an element in two ways that is by

 .css('width') and the other way is using .width().

• The only difference between .css('width') and .width() is the data type of value we specify or return from the both functions.

• Example

    $('#divid').css('width','100px');   

    $('#divid').width(100);   

• In .width() we don't have to add "px" but we have to add in .css('width').

• If you want to return the width of  "divid" element then .width() will return only ineger value as 100 and .css('width') will return as '100px'.  

               

Q-5:- In jQuery how many methods are there for fade effects to element  and explain it in briefly.

 Ans:- In jQuery  we have three methods for fade effects  to elements: fadeIn,fadeOut,fadeTo.This will change the opacity of element with different animation.

Syntax:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

Example:

$("#clickme").click(function(){

$("#divid").fadeIn("slow",0.10);

});

$("#clickme").click(function(){

$("#divid").fadeOut(1000);

});.

Q-6:- What do you mean by .siblings() method in jQuery?

Ans:- If we want to fetch siblings of every elements in the set of matched elements then we can use this method.We can fetched elements by an optional selector.

Syntax:

.siblings([selector])

Here selector specify the matched elements

Example:

<ul>

<li> content 1 </li>

<li id="content2"> content 2 </li>

<li class="contentclass"> content 3 </li>

<li class="contentclass"> > content 4 </li>

</ul>

Let's say i want to find the siblings of the element of id "content2" change the text color to Red,then we have to write like this

 $('li.content2').siblings().css('color','red');

If we want to change the text color of the element having class as "contentclass",then we have to write by passing a optional selector like this

$('li.content2').siblings('.contentclass').css('color','red');

Q-7:- In which scenario we will use jQuery?

 Ans:- We can use jQuery when we want to apply some CSS or call functions on events or incase traverse the documents etc.

If you want to make ajax based application,then jquery library is the best approach for development.

Q-8:- What are the advantages of using jQuery?

 Ans:- Thease are some advantages of jQuery

• Without learning any new syntax we can enhancement javascript.

• We can reuse the same code in every where that is reusable.

• The codes are very simple,clear and readable.

• We can call DOM scripting library calls and complex loops.

Q-9:- How bind() ,live() and delegate() method works?

 Ans:-Here is some difference between these three

• The bind() method will only attach events to those elements which are added before DOM loaded But delegate() and live() will attach to the elements which are added after DOM loaded also.

• live() function will not work in chaining.It will work only on an element or a selector But delegate() method supports chaining.

• Example of a delegate with chaining

    $(document).ready(function(){

    $("#mydiv")children("table").delegate("tr","click",function(){

    alert($(this).text());

    });

    });

Q-10:- Which one is better jQuery or javascript and why?

 Ans:-Defenietly jQuery is better than javascript because for developing ajax based application jQuery libray is the best approach.As you know jaquery is simple ,clear ,readable as well as reusable, so it helps a programmers a lot during development.

Q-11:- Give an example of jQuery.data().

 Ans:-jQuery.data() is used to set or return arbitrary data to or from an element.

Syntax:

jQuery.data(element, key, value)

Example:

jQuery.data(span, “itm”, { value1: 10, value2: "someitem" });

Q-12:- What is resize() function in jQuery and How can we use it?

 Ans:-Whenever the browser size is changed the resize() function will call and this event can be only used with $(window).

Example:

$(window).resize(function() {

$('#mylabel).text('current window size is ' + $(window).width() + 'x' + $(window).height());

});

Q-13:- What is animate() function in jQuery and How can we use it?

 Ans:-This function is used to apply custom animation to elements.

Syntax:

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

Example:

<div id="Animate">

Click here to animate

</div>

<div id="animatediv" style="width:100px; height:100px;background-color:blue; position: relative; right: 10px;border-width:5px;">

</div>

Here is the jQuery code to animate the  div element "animatediv"

$('# Animate').click(function() {

$('#animatediv').animate({

opacity: 0.50,

left: '+=40',

height: 'toggle'

}, 1000, function() {

// do some code here want to execute after the animation

});

});

Q-14:- What is slideToggle() effect in jQuery and How to use?

 Ans:-It gives sliding effect to an element.

Syntax:

slideToggle([ duration] [, easing] [, callback])

Example:

$("#Animate").click(function(){

$("#animatediv").slideToggle("fast", function(){

//do some coding after this animation

});

});

Q-15:- Difference between $(this) and 'this' in jQuery?

 Ans:-Both are references the same element but "this" is used in traditional way while "this" is used with $() it becomes a jQuery object on which we can use the jquery functions.

If  "this" keyword is used in $() then to get the text of the element we can use jQuery function text() else we can get the text by using this.innerText.

Following example give you some clarity

$(document).ready(function(){

$('#animate').click(function(){

alert(this.innerText);

alert($(this).text());

});

});

Q-16:- What is each() function in jQuery?

 Ans:-This function will called for every matched element.

Syntax:

$(selector).each(function (index, element))

Example:

$("#animate").click(function(){

$("div").each(function(){

document.write($(this).text());

});

});

 This will write text for all div element.

Q-17:- Difference between attr and prop?

Ans:-These are some similarities and differences between prop() and attr()

Both are used to get or set the value of specified property of an element. But the difference is prop() will always returns the current value of property while attr() will returns the default value of the property.

Q-18:- What is param() method in jQuery?

Ans:-This is a method which is used to represent an object/array in serialize manner.When we want to make an ajax request we can use these serialize values as query strings of that URL.

    Example:

    objemp=new emp();

                objemp.id="1";

        objemp.name="shibashish";

    $("#animate").click(function(){

    $("span").text($.param(objemp));

    });

Q-19:- What is the difference between document.ready() and window.onload?

 Ans:- Both are called while page is loaded but these are some diffences

• window.onload() is a javascript function while document.ready() is a jQuery event.

•   document.ready() is called after the DOM is loaded without waiting for the contents to get loaded but window.onload() waits for it.

• document.ready() executes faster than window.onload().

Q-20:- What do you mean by jQuery.holdReady() function?

 Ans:-By using this function we can hold or release the execution of jQuery's ready event.Hence we have to call this method before we run ready event.To hold the ready event,we have to call jQuery.holdReady(true);  and false for release.

Q-21:- How can you read,write and delete cookies in jQuery?

 Ans:-For this we have to use Dough cookie plugin.

Example:

• Create cookie

    $.dough("mycookie", "cookievalue");

• Read cookie

    $.dough("mycookie");

• Delete cookie

    $.dough("mycookie", "remove");

Q-22:- What are .empty(), .remove() and .detach()?

Ans:-

• .empty():-This  method is used to remove all the child elements from matched elements.

• .remove():-This method is used to remove all the matched elementas well as will remove all the jQuery data associated with the matched element.

• .detach():-This  method is same as .remove() method but the .detach() method doesn’t remove jQuery data associated with the matched elements.

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

Thanks Shibashish Mohanty