jQuery Interview Questions – Top 100 Answers

jQuery Interview Questions – Top 100 Answers
The below jQuery Interview Questions with answers will help you to succeed every job interview. These interview questions are divided into 4 parts:
  • 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

jQuery is a JavaScript helper, a library to be more specific, that is made to perform JavaScript operations quickly and easily. With jQuery you can move from one element of the DOM to another very easily. You can also do DOM manipulations with little efforts. The AJAX operations are easy to perform with 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

The $ sign is a shortcut of jQuery. If you have some other JavaScript framework that uses $ sign then jQuery will not operate in the website. Therefore noConflict() method is used. The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. You can also create a shortcut of jQuery with noConflict() method.
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?

The command $.fn.jquery can be run on the console window of any browser and it will show the version of jQuery you are using.

8. What are jQuery selectors

They are used to select elements. These can be:

1. Id selectors

2. Class selectors

3. Parent, child, siblings selectors

4. Hierarchy selector

5. Index selector.

See the complete list of jQuery selector.

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

Yes we can by using .ajax() method of 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?

My favourite DOM method in jQuery is jQuery Find method as it can find any html element located on the DOM without any restriction.

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']" )
This code is DOM Traversal method of using multiple selectors at once. It retrieves any div element with the id as ‘first’, plus all div elements with the class called ‘first’, plus all elements that are children of the li element having id as ‘items’ and whose name attribute ends with the string “first”. The function will return a jQuery object containing the results of the query.

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?

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to communicate and exchange data with the server without a browser page refresh. The jQuery helps us to create rich AJAX based applications using it’s popular methods which are very easy to use.

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.

There are 6 major ways to use this .ajax() method:
  • 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?

The jQuery library includes events which will be fired based on the state of the Ajax request, these are called Ajax events. We can use these events to show custom message to users, or do other operations like error logging.

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?

JSON stands for JavaScript Object Notation. In AJAX, it is used to exchange data between a browser and a server in human-readable text. It consists of attribute–value pairs and array data types (or any other serializable value). It is easy to understand, and data exchange is faster than XML. It supports array, object, string, number, and value.

Example of JSON:

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

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

The callback function passes a function as a parameter to another function. In order to perform various AJAX tasks on a website, we can create one function for executing XMLHttpRequest and a callback function to execute each AJAX task.
Understand Callback function by learning jQuery Post Method

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?

The .on() method can attach multiple events on an element. This is shown by the below code:
$("#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:

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

The .animate() function is extensively used to create custom animations on CSS properties. Some examples include:
  • “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?

jQuery UI is a collection of GUI widgets, animated visual effects, and themes implemented with jQuery, Cascading Style Sheets, and HTML. Example – jQuery Datepicker.

6. What is jQuery Datepicker in jQuery?

If you want to let your users to select a ‘date’ from a calendar then use jQuery Datepicker plugin. The Datepicker will show in a small popup (a calendar to choose a date), when an input control (textbox) gets the focus.

7. Have you used jQuery with Server Side Language?

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

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.

Then we will show the result in the ul & li tags. How to create jQuery Autocomplete Feature Step by Step.

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?

A jQuery Timer is created with JavaScript methods – setInterval() and setTimeout(). We can easily create Image Slider, time clock, stop watch and random background color changing effect on our website.

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

By using Select2 jQuery plugin which gives us a highly customizable jQuery Multiselect control with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

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?

Showing parents and their children in the form of a tree is done by creating Treeview. There are 2 nodes – ‘+’ & ‘-‘ which on clicking opens or closes the treeview.
Conclusion

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.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "ASP.NET Core, jQuery, EF Core, SEO, jQuery, HTML" and more.

Leave a Reply

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