JQuery Interview Questions and answers

In this post you will learn frequently asked JQUERY interview questions for freshers and Experienced candidates.

1. what is jQuery?

ans: JQuery is javascript library or javascript framework which helps in how to traverse HTML documents,to do animations,and add Ajax interaction to any web page. It is mainly used to reduce lines of code as huge code written in javascript,can be done easily with JQuery in few lines.

2. What does $ mean in JQuery?

 ans: Dollar sign is nothing but it's an alias for jQuery. see the below jQuery code

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

here $ sign can be replaced with "jQuery"keyword like
jQuery(document).ready(functioin)
{
}); 

3)What are the advantage of using jQuery?

ans:

• Easy to use and learn.
• Easily expandable.
• Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
• Easy to use for DOM manipulation and traversal.
• Large pool of built in methods.
• AJAX Capabilities.
• Methods for changing or applying CSS, creating animations.
• Event detection and handling.
• Tons of plug-ins for all kind of needs.

4)Why you should be using jQuery?
Ans:
Based on the manipulation of the HTML DOM (Document Object Model) and designed to simplify the client-side scripting of HTML, jQuery incorporates parts of HTML and CSS. Thousands of companies and individuals are on the jQuery bandwagon, and you should be, too.

5)How JavaScript and jQuery are different?
ans:
jQuery is not a programming language but a well written JavaScript code. It is a library/framework built with Javascript. It is very popular because it (nearly universally) abstracts away cross-browser compatibility issues and it emphasises unobtrusive and callback-driven Javascript programming. Javascript is the core programming language.

6)How you will use Jquery means requirement needed for using jquery?
ans:
Nothing more need to do just olny download jquery library(.js file) from any of the jquery site Download jquery and just linked with your html pages like all other javascript file
as follows:
code:
< script src="jquery.js" language="javascript" type="text/javascript">

7)How do you select an item using css class or ID and get the value by use of jquery?
ans:
If an element of html like < div> , < p> or any tag have ID MyId and class used MyClass then we select the element by below jquery code

Code:
$('#MyId') for ID and for classs $('.MyClass')
and for value
Code:
var myValue = $('#MyId').val();
// get the value in var Myvalue by id
Or for set the value in selected item
Code:
$('#MyId').val("print me");
// set the value of a form input

8)How to get the server response from an AJAX request using Jquery?
ans:
When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.
Below an example of making an AJAX call and alerting the response (or error):
Code:
$.ajax({
     url: 'EmpRecords.php',
     success: function(response) {
        alert(response);
     },
     error: function(xhr) {
        alert('Error!  Status = ' + xhr.status);
     }
});

9)What is $(document).ready() function? Why should you use it?
ans:
This is one of the most important and frequently asked jQuery Interview question. The ready() function is used to execute code when document is ready for manipulation. jQuery allows you to execute code, when DOM is fully loaded i.e. HTML has been parsed and DOM tree has been constructed. Main benefit of $(document).ready() function is that, it works in all browsers, jQuery handles cross browser difficulties for you.

10)Difference between JavaScript window.onload event and jQuery ready function?
ans:

Main difference between JavaScript onload event and jQuery ready function is that former not only waits for DOM to be created but also waits until all external resources are fully loaded including heavy images, audios and videos. If loading images and media content takes a lot of time, the user can experience significant delay on execution of code defined in window.onload event.

On the other hand jQuery ready() function only waits for the DOM tree, and does not wait for images or external resource loading, which means faster execution. Another advantage of using jQuery $(document).ready() is that you can use it multiple times in your page, and browser will execute them in the order they appear in HTML page, as opposed to onload technique, which can only be used for a single function. Given this benefits, it’s always better to use jQuery ready() function than JavaScript window.onload event.

11)what are the different types of selectors in JQuery?
ans:
There are 3 types of selectors in jquery
1.css selector
2.XPath selector
3.Custom selector

12)How can you select all elements in a page using jquery?
ANS:
To select all elements in a page,we can use all selectors,for that we need to use * symbol

code:
<script language="javascript" type="text/javascript">
$("*").css("border","2px dotted blue");
</script>

13)What are jQuery Events?
ans:
Events are actions performed on a specific condition that are used for dynamic web pages. When we perform these actions on an HTML page, we can do whatever we want. We use some event handlers to perform the action. Some important handlers are bind(), unbind(), blur(), off(), hover(), on(), one(), ready(), trigger() etc.

14)What are jQuery plugins and what is the advantage of using a plugin?
ans:
A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods. jQuery plugins are quite useful as its piece of code which is already written by someone and re-usable, which saves your development time.

15)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 while remove() method removes set of matched elements from DOM.

.remove(): We use .remove() when we 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.

16)What is the difference between bind() and live() method in jQuery?
ans:
The binding of event handlers are the most confusing part of jQuery for many developers working on jQuery projects. Many of them unsure of which is better to use. In this article we will see the main differences between Bind and Live methods in jQuery.

Bind() Method
The bind method will only bind event handlers for currently existing items. That means this works for the current element.

$(document).ready(function () { 
$('p').bind('click', function () {
alert("Example of Bind Method"); 
e.preventDefault();
  }); 
 
Live() Method
The Live method can bind event handlers for currently existing items or future items.

$(document).ready(function() {
$('P').live('click', function() { 
alert("Example of live method");
e.preventDefault(); 
});
$('body').append(''); });

17)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() returns a DOM element. The method retrieves the DOM elements matched by the jQuery object. But it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can’t be used.