This post is first article in the series of Interview Questions about jQuery. This post is comprehensive collection of 20 jQuery Interview Questions from beginner level to experience level. Let’s start reading with first simple question, what is jQuery?
jQuery Interview Questions – I
Q1. What is jQuery?
Ans. jQuery is not a language, but it is a well written JavaScript code. It is a fast, small, and feature-rich JavaScript library which works across a multitude of browsers and makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API.
Q2. Is jQuery a library for client scripting or server scripting?
Ans. jQuery is client scripting library.
Q3. Is jQuery a W3C standard?
Ans. jQuery is not a W3C standard.
Q4. $(selector).action() What does this jQuery syntax format do?
Ans. This syntax selects an HTML element form DOM and performs some action on it.
Q5. What are jQuery Selectors?
Ans. Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.
Q6. What does the dollar ($) sign in jQuery statement do?
Ans. This $ sign is just an alias for JQuery or is used to define or access jQuery.
Q7. There is some code below. Why do we place all jQuery methods inside this code?
1 2 3 4 5 | $(document).ready(function(){ // Code }); |
Ans. We run jQuery code on document ready to prevent jQuery code from running before the document is fully loaded.
Q8. $(“#temp”).action() What type of selector is used in the above jQuery syntax?
Ans. Id selector is used as a hash (#) sign represents selection of element by its id.
Q9. Which jquery method is used for swapping classes?
Ans. toggleClass() method is used for swapping class.
Q10. What will $(“div”) select?
Ans. It will select all the div element in the page.
Q11. What will $(“div.parent”) select?
Ans. All the div elements with parent class.
Q12. How to stop an anchor element to move on its link on click?
Ans. You can use anchor’s click event and place return false; there but the easiest way is to do it is: <a href=”javascript:void(0)”>Click Me</a>
Q13. The code below won’t work on content which are loaded dynamically. Why? And write the correct code to let them work.
1 2 3 4 5 | $(document).ready(function(){ $('a.ajax-loaded').click( function() // Some code to perform }); }); |
Ans. The click event won’t get fired because it’s already bind with anchor elements having class ajax-loaded which are already loaded at the time of page load and exist in DOM during jQuery’s document ready. The correct way to bind and fire the click event is:
1 2 3 4 5 | $(document).ready(function(){ $(document).on('click','a.ajax-loaded', function(){ // Some code to perform }); }); |
Q14. How do we select odd li elements?
Ans. $(‘li:odd’) will select odd elements but in particular, note that it is always 0-based indexing, means that, counter-intuitively, :odd selects the second li element, fourth li element, and so on within the matched set. So to select first, third and further so on, use $(‘li:even’).
Q15. What is the name of jQuery method used for an asynchronous HTTP request?
Ans. jQuery.ajax().
Q16. How can we load html content from a file residing at server dynamically?
Ans. jQuery.load() method is quite handy at this time. We can write as follow: $(‘#element’).load(‘htmlfile.htm’);
Q17. What are differences between jQuery version 2.x and 1.x?
Ans. Version 2.x doesn’t support older versions of IE 6/7/8 and it’s also less in size (2.0.0 is 12% smaller than 1.9.1). Further you can reduce size more by excluding modules among 12 different modules.
Q18. What are the advantage of loading jQuery framework from CDN?
Ans. Always load your jQuery framework from either Google, Microsoft or jQuery CDN (Content Delivery Network). As it provides several advantages.
1. It reduces the load from your server.
2. You always use the latest jQuery framework.
3. It saves bandwidth. jQuery framework will load faster from these CDN.
4. The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN, browser won’t need to load the library again from your server.
Q19. Write down the code to load jQuery Framework from Google CDN.
Ans.
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
Q20. How would you load jQuery locally when CDN fails?
Ans. Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script>window.jQuery || document.write('<script src="script/jquery-2.1.3.min.js"></script>')</script> |
It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will reference the jQuery.js file from hard drive location. In this example, the jQuery-2.1.3.js is loaded from scripts folder.