Top 10 jQuery Interview Questions

20
2437

This post is all about the Top most jQuery questions which are mostly covered in any interview on jQuery. Along with the Questions, answers have been shared as well and the appropriate code samples to explain the concept better.

What is jQuery?

jQuery – a  fast, lightweight and feature-rich client side JavaScript Library/Framework which helps in to traverse HTML DOM, make animations, event handling, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect across a multiple of browsers. It was created by John in 2006 with a motto − Write less, do more.

Difference in JavaScript and jQuery and is it safe to safe JQuery replaced Java Script?

The main difference is that JavaScript is a programming language, while jQuery is a library which is built in the JavaScript language that helps to use the JavaScript language. jQuery is not a replacement of JavaScript. JQuery is a different library which is written on top of JavaScript. JQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. Also, it should be mentioned that browsers parse html /css files/ JS scripts. Hence, all JavaScript frameworks (jQuery, AngularJS, etc) are written in JavaScript. They provide you the framework to write fewer lines of codes but under the hood, they are all written in JavaScript.

Which is the starting point of code execution in jQuery? What is $ function in JQuery?

The starting point of jQuery code execution is $(document).ready () function which is executed when DOM is loaded. We can have any number of $(document).ready () function on the same page.

$(document).ready (function () {
   // do stuff when DOM is ready
});

Code Example :

$(document).ready(function() {
   $("div").click(function() {
      alert("Welcome to world of Goyal’s Bit!!");
   });
});

<html><head>
      <title>The jQuery Example</title>
      <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
      </script>
     </head>
  
    <body>
      <div id="div">
         Click on this to see a dialogue box.
      </div> 
   </body> 
</html>

The $() function is an alias of jQuery () function. It is used to wrap any object into jQuery object which later facilitates you to call various methods defined jQuery object. You can pass a selector string to $() function and it will return jQuery object which contains an array of all matched DOM elements.

Can we specify our own symbol instead of $ sign in jQuery?

Yes. It is possible by using jQuery.noConflict(). There are many libraries which use $ as there keyword, so if we use some other lib with JQuery then this can create confusion. So JQuery comes up with a solution by providing noConflict() method. This method release the use of $ and allows you to define your own symbol or identifier.

$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("myid").text("Welcome to goyals bit!");
    });
});

OR

var mySym = jQuery.noConflict();
mySym (document).ready(function(){
   mySym ("button").click(function(){
       mySym ("myid ").text("Welcome to goyals bit!");
    });
});

Coooool isn’t it?

Difference between onload() and document.ready() function?

  1. There can be multiple document.ready() function in a page as compare to only one onload().
  2. document.ready() function is called as soon as DOM is loaded where as body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.
  3. body.onload() cares about both HTML structure and associated resources where as document.ready() cares only about the HTML structure.

What are the methods used to provide effects?

There are many methods provided by Jquery to provide animation and effects on a webpage, to name a few we have .animate(), .delay(), .slow(), .fadein(), .fadeOut(), .fadeTo(), .hide(), .show() etc.

What is jQuery connect?

‘jQuery connect’  is a plugin used to connect or bind a function with another  function. This plugin allows a user to add a handler in a function. When an event is triggered, the even handler gets executed. We can connect more than one function using this.

Which is the fastest and slowest selector in jQuery?

ID and Element are the fastest selectors in jQuery. Class selectors are the slowest selectors in jQuery.

What is jQuery.holdReady() function?

By using jQuery.holdReady() function we can hold or release the execution of jQuery’s ready event.This method should be called before we run ready event. It is useful in dynamically loading scripts.

What is Jquery .each() function?

The jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi-element DOM manipulation, looping arrays and objects properties. Example:

var numberArray = [0,1,2,3,4,5];
jQuery.each(numberArray , function(index, value){
console.log(index + ‘:’ + value);
});

How do you select an item using css class or ID and get the value by use of jquery?

If html element has ID for example: MyId and class as GoyalsBitClass then we select the element by below jquery code:

$(‘#MyId’) for ID
$(‘. GoyalsBitClass’) for Class
var myValue = $(‘#MyId’).val();
$(‘#MyId’).val(“print me”);

What is .siblings() method in jQuery?

When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.

<ul>

<li> GoyalsBit Title 1 </li>
<li id=myId> GoyalsBit Title 2 </li>
<li class=myClass> GoyalsBit Title 3 </li>
<li class= myClass> GoyalsBit Title 4 </li>
</ul>

In case we have a requirement to modify the siblings of the element of id “myId” and change the text color to Red :

$(‘li. myId’).siblings().css(‘color’,red);

If we want specific sibling elements :

$(‘li. myId’).siblings(‘.myClass’).css(‘color’,’black’);

What is the difference in .empty() vs .remove() vs .detach().

.empty() method is used to remove all the child elements from matched elements whereas .remove() method is used to remove all the matched element. This method will remove all the jQuery data associated with the matched element. This is faster then others.
.detach() method is same as .remove() method with only difference that it doesn’t remove the data.

$(selector).empty();

$(selector).remove();

$(selector).detach();

Reference

http://jquery.com/

Previous articleHow Big Data is shaping up Ecommerce Industry
Next article5 Vital Reasons to Set Goals
Rahul Goel has 8+ years of experience in IT industry working on design & development of web based applications in Java /JEE technology stack. He posses various business domains knowledge like HealthCare, Banking & Finance, E Commerce, Retail, and Security. Rahul is passionate about cricket, traveling and his technical writing.

20 COMMENTS

  1. Thanks a bunch for sharing this with all folks you really recognise what
    you are talking approximately! Bookmarked. Please additionally talk over with my website =).
    We will have a link change contract between us

  2. This post is extremely attractive to people just like me.
    It’s not just thought-provoking, it draws you in right from the start.
    This is well-written content. The views here are
    also encouraging to me. Thank you so much.

  3. I’m really enjoying the theme/design of your blog.

    Do you ever run into any web browser compatibility issues?

    A number of my blog readers have complained about my site not working
    correctly in Explorer but looks great in Chrome.
    Do you have any suggestions to help fix this problem?

  4. Greetings! This is my first visit to your blog! We are a team of
    volunteers and starting a new initiative in a community in the
    same niche. Your blog provided us useful information to work on. You have done a
    outstanding job!

  5. When I originally commented I clicked the “Notify me when new comments are added” checkbox
    and now each time a comment is added I get three e-mails with the same
    comment. Is there any way you can remove me from that service?

    Bless you!

Comments are closed.