get the app get the app       get the app       get the app

jQuery Interview

Exam NamejQuery Interview
DescriptionjQuery Interview contains the questions from various interview of IT industry.These questions are helpful to crack the IT interview.
Exam TypePUBLIC
Authenticity2
creatorrahul(223)

Back to Parent Category
Create Question   Practise  
.
Question: What is jQuery?

Answer:jQuery is fast, lightweight and feature-rich client side JavaScript Library/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. It is one of the most popular client side library and as per a survey it runs on every second website.


Question: What is CDN?

Answer: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.


Question: How can we debug jQuery?

Answer:There are two ways to debug jQuery:

Debugger keyword

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.

Insert a break point after attaching the process


Question: What does dollar sign ($) means in jQuery?

Answer:Dollar Sign is nothing but it's an alias for JQuery. Take a look at below jQuery code.

$(document).ready(function(){
});


Over here $ sign can be replaced with "jQuery" keyword.

jQuery(document).ready(function(){
});



Question: Can we have multiple document.ready() function on the same page?

Answer:YES. We can have any number of document.ready() function on the same page.


Question: What is jQuery.noConflict?

Answer:As other client side libraries like MooTools, Prototype can be used with jQuery and they also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other library as their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict().

jQuery.noConflict();
// Use jQuery via jQuery(')
jQuery(document).ready(function(){
jQuery("div").hide();
});

You can also use your own specific character in the place of $ sign in jQuery.

var $j = jQuery.noConflict();
// Use jQuery via jQuery(')
$j(document).ready(function(){
$j("div").hide();
});



Question: Is there any difference between body onload() and document.ready() function?

Answer:document.ready() function is different from body onload() function for 2 reasons.

1)We can have more than one document.ready() function in a page where we can have only one body onload function.

2)document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.


Question: How do you check if an element is empty?

Answer:There are 2 ways to check if element is empty or not. We can check using ":empty" selector.

$(document).ready(function(){
if ($('#element').is(':empty')){
//Element is empty
}
});

And the second way is using the "$.trim()" method.

$(document).ready(function(){
if($.trim($('#element').html())=='') {
//Element is empty
}
});



Question: How do you check if an element exists or not in jQuery?

Answer:$(document).ready(function(){
if ($('#element').length > 0){
//Element exists
}
});



Question: Is jQuery replacement of Java Script?

Answer:No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.


Question: Is jQuery a W3C standard?

Answer:No. jQuery is not a W3C standard.


Question: Why there are two different version of jQuery library?

Answer:jQuery library comes in 2 different versions.

  • Development
  • Production/Deployment

    The development version is quite useful at development time as jQuery is open source and if you want to change something then you can make those changes in development version. But the deployment/production version is minified version or compressed version so it is impossible to make changes in it(compress by removing all white spaces and reducing the size of vaiable names). Because it is compressed, so its size is very less than the development version which affects the page load time.



  • Question: What are selectors in jQuery and how many types of selectors are there?

    Answer:To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. There are many types of selectors but basic selectors are:

  • Name: Selects all elements which match with the given element Name.
  • #ID: Selects a single element which matches with the given ID
  • .Class: Selects all elements which match with the given Class.
  • Universal (*): Selects all elements available in a DOM.
  • Multiple Elements E, F, G: Selects the combined results of all the specified selectors E, F or G.
  • Attribute Selector: Select elements based on its attribute value.



  • Question: Which is fast document.getElementByID('txtName') or $('#txtName').?

    Answer:Native JavaScipt is always fast. jQuery method to select txtName "$('#txtName')" will internally makes a call to document.getElementByID('txtName'). As jQuery is written on top of JavaScript and it internally uses JavaScript only So JavaScript is always fast.


    Question: Difference between $(this) and 'this' in jQuery?

    Answer:this and $(this) refers to the same element. The only difference is the way they are used. 'this' is used in traditional sense, when 'this' is wrapped in $() then it becomes a jQuery object and you are able to use the power of jQuery.

    $(document).ready(function(){
    $('#spnValue').mouseover(function(){
    alert($(this).text());
    });
    });


    In below example, this is an object but since it is not wrapped in $(), we can't use jQuery method and use the native JavaScript to get the value of span element.

    $(document).ready(function(){
    $('#spnValue').mouseover(function(){
    alert(this.innerText);
    });
    });



    Question: How do you implement animation functionality?

    Answer:The .animate() method allows us to create animation effects on any numeric CSS property. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.

    (selector).animate({styles},speed,easing,callback)

  • styles: Specifies one or more CSS properties/values to animate.
  • duration: Optional. Specifies the speed of the animation.
  • easing: Optional. Specifies the speed of the element in different points of the animation. Default value is "swing".
  • callback: Optional. A function to be executed after the animation completes.

    $("btnClick").click(function(){
    $("#dvBox").animate({height:"100px"});
    });



  • Question: How to disable jQuery animation?

    Answer:Using jQuery property "jQuery.fx.off", which when set to true, disables all the jQuery animation. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.


    Question: How to create clone of any object using jQuery?

    Answer:$(document).ready(function(){
    $('#btnClone').click(function(){
    $('#dvText').clone().appendTo('body');
    return false;
    });
    });



    Question: Does events are also copied when you clone any element in jQuery?

    Answer:Using clone() method, we can create clone of any element but the default implementation of the clone() method doesn't copy events unless you tell the clone() method to copy the events. The clone() method takes a parameter, if you pass true then it will copy the events as well.

    $(document).ready(function(){
    $("#btnClone").bind('click', function(){
    $('#dvClickme').clone(true).appendTo('body');
    });



    Question: What is event.PreventDefault?

    Answer:The event.preventDefault() method stops the default action of an element from happening. For example, Prevents a link from following the URL.