Friday, 15 September 2017

Basic jQuery interview questions


Q)  Which command will give a version of jQuery?

The command $.ui.version returns jQuery UI version.

Q)  In what scenarios jQuery can be used?

jQuery can be used in following scenarios:

- Apply CSS static or dynamic
- Calling functions on events
- Manipulation purpose
- Mainly for Animation effects

Q) What is the difference between find and children methods?

find method is used to find all levels down the DOM tree but children find single level down the DOM tree.

Q) What is jQuery connect?

A ‘ jQuery connect’  is a plugin used to connect or bind a function with another  function. Connect is used to execute function from any other function or plugin is executed.

Q)  How to use connect?

Connect can be used by downloading jQuery connect file from jQuery.com and then include that file in the HTML file. Use $.connect function to connect a function to another function.

Q) What are the browser related issues for jQuery?

Browser compatibility of jQuery plugin is an issue and needs lot of time to fix it.

Q) Whether we need to add jQuery file in both Master and Content page?

jQuery file should be added to the Master page and can use access from the content page directly without having any reference to it.

Q) What are the basic selectors in jQuery?

Following are the basic selectors in jQuery:

- Element ID
- CSS Name
- Tag Name
- DOM hierarchy

Q) What is the use jQuery.data method?

jQuery.data methods is used to associate the data with the DOM nodes and the objects. This data method makes the jQuery code clear and concise.

Q) What is the use of each function in jQuery?

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.

Q) What is the difference between size and length of jQuery?

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) Can we add more than one ‘document.ready’ function in a page?

Yes, we can add more than one document.ready function in a page. But, body.onload can be added once in a page.

Q) What is the use of jQuery load method?

jQuery load method is a powerful AJAX method which is used to load the data from a server and assign the data into the element without loading the page.

Q) Whether our own specific characters are used in place of $ in jQuery?

Yes, We can use our own variable in place of $ by using the method called no Conflict () method.

var sample = $.noConflict()

Q) What is the use of jQuery filter?

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) Which program is useful for testing jQuery?

QUnit is used to test jQuery and it is very easy and efficient.

Q) What is the script build up by jQuery?

jQuery is a Javascript file and it is single javascript file that contains common DOM, event effects and Ajax functions.

Q) How can we debug jQuery?

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

Q) What are all the ways to include jQuery in a page?

Following are the ways to include jQuery in a page:

- Local copy inside script tag
- Remote copy of jQuery.com
- Remote copy of Ajax API
- Local copy of script manager control
- Embedded script using client script object

Q) What is the use of jQuery.ajax method ()?

jQuery.ajax method is used for asynchronous HTTP requests.

Q) Is jQuery is a replacement of JavaScript?

No, jQuery is not a replacement of JavaScript.

Q) What is called chaining?

Chaining is used to connect multiple events and functions in a selector.

Q) What is the difference between onload() and document.ready()?

In a page, we can have only one onload function but we can have more than one document.ready function. Document.ready function is called when DOM is loaded but body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.

Q) How method can be called inside code behind using jQuery?

$.ajax can be called and by declaring WebMethod inside code behind using jQuery.

Q) Which is the fastest selector in jQuery?

ID and Element are the fastest selectors in jQuery.

Q) What is the slowest selector in jQuery?

Class selectors are the slowest selectors in jQuery.

Q) What is the difference between .js and .min.js?

Ans: jQuery library comes in 2 different versions Development and Production/Deployment. The deployment version is also known as minified version. So .min.js is basically the minified version of jQuery library file. Both the files are same as far as functionality is concerned. but .min.js is quite small in size so it loads quickly and saves bandwidth.

Q) Why there are two different version of jQuery library?

Ans: 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 version is minified version or compressed version so it is impossible to make changes in it. Because it is compressed, so its size is very less than the production version which affects the page load time.

Q) What does $("div.parent") will select?

Ans: All the div element with parent class.

Q) How jQuery selectors are executed?

Ans: Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".

$("p#elmID .myCssClass");

Q) Which is fast document.getElementByID('txtName') or $('#txtName').?

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

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

Ans: 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);
  });
});

Q) How do you check if an element is empty?

Ans: 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
  }
});  

Q) What is the difference between $('div') and $('<div/>') in jQuery?

Ans: $('<div/>') : This creates a new div element. However this is not added to DOM tree unless you don't append it to any DOM element.

$('div') : This selects all the div element present on the page.

Q) What is the difference between parent() and parents() methods in jQuery?

Ans: The basic difference is the parent() function travels only one level in the DOM tree, where parents() function search through the whole DOM tree.

Q) What is the difference between eq() and get() methods in jQuery?

Ans: eq() returns the element as a jQuery object. This method constructs a new jQuery object from one element within that set and returns it. That means that you can use jQuery functions on it.

get() return a DOM element. The method retrieve the DOM elements matched by the jQuery object. But as it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can't be used. 

Q) How do you implement animation functionality?

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

Syntax is:

(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.
Simple use of animate function is,

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

Q) How to disable jQuery animation?

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

Q) How do you stop the currently-running animation?

Ans: Using jQuery ".stop()" method.

Q) What is the difference between .empty(), .remove() and .detach() methods in jQuery?

Ans: All these methods .empty(), .remove() and .detach() are used for removing elements from DOM but they all are different.

.empty(): This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM.

.remove(): Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

.detach(): This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

Q) What is wrong with this code line "$('#myid.3').text('blah blah!!!');"

Ans: The problem with above statement is that the selectors is having meta characters and to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").
So the correct syntax is,

$('#myid\\.3').text('blah blah!!!');

Q) How to check data type of any variable in jQuery?

Ans: Using $.type(Object) which returns the built-in JavaScript type for the object.

No comments:

Post a Comment