jQuery interview questions and answers – Part14

131. Can you include multiple version of jQuery? If yes, then how they are executed?
Yes. Multiple versions of jQuery can be included in same page.

132. In what situation you would use multiple version of jQuery and how would you include them?
Well, it is quite possible that the jQuery plugins which are used are dependent on older version but for your own jQuery code, you would like to use newer version. So because of this dependency, multiple version of jQuery may required sometimes on single page.
Below code shows how to include multiple version of jQuery.

<script type='text/javascript' src='js/jquery_1.9.1.min.js'></script>
<script type='text/javascript'>
var $jq = jQuery.noConflict();
<script type='text/javascript' src='js/jquery_1.7.2.min.js'></script>

By this way, for your own jQuery code use “$jq”, instead of “$” as “$jq” refers to jQuery 1.9.1, where “$” refers to 1.7.2.

133. Is it possible to hold or delay document.ready execution for sometime?
Yes, its possible. With Release of jQuery 1.6, a new method “jQuery.holdReady(hold)” was introduced. This method allows to delay the execution of document.ready() event. document.ready() event is called as soon as your DOM is ready but sometimes there is a situation when you want to load additional JavaScript or some plugins which you have referenced.
$.getScript(“myplugin.js”, function() {

134. How does caching helps and how to use caching in jQuery?
Caching is an area which can give you awesome performance, if used properly and at the right place. While using jQuery, you should also think about caching. For example, if you are using any element in jQuery more than one time, then you must cache it. See below code.

$("#myID").css("color", "red");
//Doing some other stuff......
$("#myID").text("Error occurred!");

Now in above jQuery code, the element with #myID is used twice but without caching. So both the times jQuery had to traverse through DOM and get the element. But if you have saved this in a variable then you just need to reference the variable. So the better way would be,

var $myElement = $("#myID").css("color", "red");
//Doing some other stuff......
$myElement.text("Error occurred!");

So now in this case, jQuery won’t need to traverse through the whole DOM tree when it is used second time. So in jQuery, Caching is like saving the jQuery selector in a variable. And using the variable reference when required instead of searching through DOM again.

135. How can we give face effect in jQuery?
• 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.
• “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



136. Explain the animate function.
-The animate function is used to apply the custom animation effect to elements.

$(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

<div id="clickToAnimate">
Click Me
<div id="mydiv" style=”width:200px; height:300px; position: relative; right: 20px;">

Following is the jQuery to animate opacity, left offset, and height of the mydiv element

$('# clickToAnimate’).click(function() {
opacity: 0.30,
left: '+=20',
height: 'toggle'
}, 3000, function() {
// run after the animation complete.

137. What is .siblings() method in jQuery?
• 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

<li> item 1 </li>
<li id=”second_item”> item 2 </li>
<li class=”myitem”> item 3 </li>
<li class=”myitem”> item 4 </li>

Now we want to find the siblings of the element of id “second_item” and change the text color to Blue :
If we want specific sibling elements for example the elements having class “myitem” then we can pass a optional selector:

138. Explain width() vs css(‘width’).
• 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
• 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.

139. Explain bind() vs live() vs delegate() methods.
-The bind() method will not attach events to those elements which are added after DOM is loaded while live() and delegate() methods attach events to the future elements also.
-The difference between live() and delegate() methods is live() function will not work in chaining. It will work only on an selector or an element while delegate() method can work in chaining.
For example


Above code will not work using live() method. But using delegate() method we can accomplish this.


140. Explain the each() function.
-The each() function specify the function to be called for every matched element.
$(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


This will write the text for each “li” element.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Get Alert

    Enter your email address:

  • Categories

  • Twitter

Subscribe Now!
Sign-up for our email newsletter and get free job alerts, current affairs and GK updates regularly.

Subscribe Here

Popup Dialog Box Powered By : XYZScripts.com
  • RSS
  • Facebook
  • Google+
  • Twitter