jQuery Interview Questions – Top 100 Answers

• a. General Interview Questions
• b. DOM Traversal & Manipulation Questions
• c. AJAX Interview Questions
• d. jQuery Method & events Questions
• e. Advanced Interview Questions

jQuery General Interview Questions

1. What is jQuery

Moreover jQuery is:

• All browser friendly.
• Easy to learn & use.
• Has thousands of plugins that do simple to complex tasks. These plugins can be used in your website.
• There are millions of websites currently using jQuery.
• jQuery is over 10 years old and still there is no drop in its craze.

2. What is jQuery noConfict

var myShortCut = $.noConflict();
myShortCut(document).ready(function(){
   myShortCut("button").click(function(){
        alert("button is clicked");
    });
});

3. Is jQuery works for XML documents?

No jQuery does not works for XML it works only for HTML.

4. What is jQuery minified?

jQuery minified is a compressed version of jQuery which is upto 80% smaller in size than the un-compressed version. You should only use minified version on the production server.

5. Which operating system is compatible with jQuery?

All operating systems – windows, linux, mac are fully compatible with jQuery.

6. Which browsers are compatible with jQuery?

All browsers systems – IE, Chrome, Mozilla, Opera, Edge are fully compatible with jQuery.

7. How to check which version of jQuery you are using in a website?

8. What are jQuery selectors

1. Id selectors

2. Class selectors

3. Parent, child, siblings selectors

4. Hierarchy selector

5. Index selector.

9. Can we call server side language methods with jQuery?

10. Can we connect with Database with jQuery?

No we cannot, since jQuery runs on the client and not on server.

11. Can we implement APIs with jQuery?

Yes we can implement any external APIs with jQuery.

DOM Traversal & Manipulation Questions

1. Difference between parent() and parents() methods in jQuery

The parent() method will return the direct parent of the selected element.

The parents() method will return all ancestor elements (parent, grandparent, great grandparent, etc upto the document root HTML).

2. What is your favourite DOM method?

3. Why can’t I access dynamically added HTML element?

The reason is, probably, you did not used the jQuery On method. This method is also used to attach event handlers to future created elements.

4. Explain the working of $( “div#first, div.first, li#items > [name$=’first’]” )

$( "div#first, div.first, li#items > [name$='first']" )

5. Explain jQuery DOM Manipulation with code

DOM = Document Object Model: The DOM defines a standard for accessing HTML and XML documents.

One very important part of jQuery is the possibility to manipulate the DOM. The jQuery comes with a bunch of DOM Manipulation related methods that make it easy to access and manipulate elements and attributes.

Three simple, but useful, jQuery methods for DOM manipulation are:

• text() – Sets or returns the text content of selected elements
• html() – Sets or returns the content of selected elements (including HTML markup)
• val() – Sets or returns the value of form fields

6. What is the difference between ’empty’ & ‘remove’?

When I want to remove an element from the DOM then I use jQuery Remove Method. It removes elements along with all it’s children.

If I want to simply empty the element then I use the jQuery Empty method.

AJAX Interview Questions

1. What is the difference between jQuery.get() and jQuery.ajax()?

The .get() is an AJAX method that makes only HTTP Get request.

The .ajax() method can make both HTTP Get and HTTP Post request.

2. What is jQuery Ajax?

3. What does ajax() method do?

This method sends an asynchronous HTTP request to the server. It receives back the response from the server in JSON format. It’s syntax is:

$.ajax({name:value, name:value, .. })

The ‘name:values’ are used to configure the AJAX request.

• 1. jQuery AJAX Method to Fetch Contents of a Text File
• 2. jQuery AJAX Method to Fetch Contents of a HTML File
• 3. Fetch JSON from jQuery AJAX
• 4. Fetch XML file contents
• 5. jQuery AJAX to Call a Server Side Page like .aspx, .php, .cshtml, etc
• 6. jQuery AJAX method to Read data from Database, Inert data to database, Update or Delete data

4. How to fetch only sections of specific HTML areas from an external page using AJAX?

The best way to do this is by using jQuery Load Method. Here I provide the ‘id’ of the element after the file name, in the jQuery load method’s systax, like this:

$("#htmlData").load("file.html #second");

5. What are the jQuery Ajax Events?

6. What are the real web applications of AJAX you implemented?

I implemented TheMovieDB/(TMDB) API in AJAX. I made AJAX call to the API to search for any actor (like Tom Cruise, Nicole kidman, Tom Hanks, etc). The actor results are shown in an HTML page.

7. What is the purpose of XMLHttpRequest?

• It sends data in the background to the server.
• It requests data from the server.
• It receives data from the server.
• It updates data without reloading the page.

8. What is JSON?

Example of JSON:

{
  "id": 1,
  "room": "main bedroom",
  "items": [ "bed", "chest of drawers" ]
}

9. What is the role of the callback function in AJAX?

10. How you debug AJAX code?

I use  Chrome Developer Tools to Debug Ajax call and it saves a significant amount of time in debugging. Open it by pressing F10 key in the chrome browser.

jQuery Method & events Questions

1. How to attach more than 1 event handlers to elements?

$("#somebutton").on("click mouseleave", function () {
    alert("The button is clicked or mouseleave occurred");
});

2. How to provide effects?

The jQuery library has a set of methods to provide different effects within the website. Some of the jQuery methods include:

• jQuery .fadeIn() & .fadeOut() Methods
• Animations with .animate()
• .toggle()

3. Explain the exact purpose of the animate function in jQuery

• “Show”, “hide” or “toggle” with animations.
• Animation with different speeds.
• Animation on mutiple CSS properties.

The syntax for this function is as follows:

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

4. Explain how the jQuery stores data related to an element

The .data() is used to attach unlimited data on HTML elements, and also used to retrieve data attached to these elements.

There is also jQuery removeData method to removes the data previously attached to elements.

5. What is jQuery UI?

6. What is jQuery Datepicker in jQuery?

7. Have you used jQuery with Server Side Language?

Yes, with ASP.NET Core framework. I created a number of feature like:

• Select2 jQuery plugin in ASP.NET CORE
• Call Web API in jQuery
• jQuery AJAX method to call an Action method in ASP.NET Core

8. How to load jQuery from CDN and what happens when CDN fails?

The jQuery CDN helps to load jQuery from online server. We just need to add the script tag on the page head. This script contains the location of jQuery file on the online server.

There are many CDNs like that from Google, Microsoft, Cloudflare, etc, and these can be used for loading jQuery.

Check the below code that uses Google CDN to load jQuery:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

When CDN fails (which is very rare) then we fall Back to Local Copy of jQuery present on the Website. Check the below code that does this work:

// First try loading jQuery from CDN
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
// If the CDN fails then Fallback to a local copy of jQuery 
<script>
    window.jQuery || document.write('<script src="/js/jquery-3.2.1.min.js"><\/script>'))
</script>

9. Explain common optimization techniques used in jQuery

• Selecting elements efficiently: Select elements by Id (“#someId”) more often as it is fastest.
• Use latest version of jQuery, minified version, and from CDN
• Load jQuery not from page head but from the Body end for performance
• Never select elements again and again. Instead, you should cache it in a variable
• Filter element of the array with .grep() Method

10. Difference between event.preventDefault() & event. stopPropagation()?

The event.preventDefault() prevents the default action of an element from happening.

The event .stopPropagation() prevents the event from bubbling up the event chain.

Advanced Interview Questions

1. How to create jQuery Autocomplete?

To create autocomplete feature in jQuery we will use jQuery AJAX to call sever side method. This method will fetch results from the database and return them to the jQuery method that called it.

2. What is Web Scraper and how to implement it?

A Web Scraper is a software that helps in extracting data from websites. It is used to extract typical information like emails, telephone numbers, addresses, etc from different URL.

I created a Web Scraper in ASP.NET MVC with jQuery. This Scraper extracted all emails and telephone numbers from a specified URL.

3. What is a jQuery Timer?

4. How to create an eye catchy Multiselect in jQuery?

5. You are asked to implement auto paging, how you will proceed?

Auto Paging (not link-based paging) works like this – when a user scrolls down to the bottom, the next page’s content are automatically loaded.

Here new contents are loaded by calling a C# function, (as I have implemented in ASP.NET Core), when the user scrolls down to the bottom of the page, and this continues until all the contents are loaded.

The main thing is to find out when the user scrollbar touches the bottom of the page. I can use the Window Scroll Event to check this.

6. How to implement Sticky Ads in your website?

Sticky Ads are those that follows you when you are scrolling down a page. They are a good way to increase ADs clicks on our website and so the website’s revenue.

We can use Sticky Kit which is a jQuery plugin for creating sticky elements in the website. It allows us to apply stickiness to any HTML element like a div, span, etc.

7. Explain Treeview and it’s working procedure?

The question listed here are the most important ones, and they will definitely help you to ace your jQuery interview.

Please share these tutorials with your developer friends to.