20+ jQuery interview questions with answers

jQuery is a lightweight, JavaScript library with its moto “Write Less, Do More”

JavaScript is a language for programming whereas jQuery is the library of javascript. There is few lines of code in jQuery as compared to the javascript for doing the same task.

A library is collection of classes or methods while framework defines the structure of application

A framework is more comple as compared to the library.

The main difference is inversion of control. In library there is full control over a method that is called. On the other hand while using framework, framework is in charge of the fllow.

Library is responsible for linking & binding process of program whereas framework is responsible for overall development and deployment of project.

jQuery and reacts are library. Angular is framework.

var window_height = $window.height();   
var window_top_position = $window.scrollTop(); 
var window_bottom_position = (window_top_position + window_height);
$element = jQuery("div");
var element_height = $element.outerHeight(); 
var element_top_position = $element.offset().top;
 if ((element_bottom_position >= window_top_position) &&  $element_top_position <= window_bottom_position)){ 
      $element.addClass('in-view');   
 } else { 
      $element.removeClass('in-view'); 
} 

viewport is the part of the current view of a webpage. viewport size vary from devices to devices. viewport can be set via using meta tag

<metaname="viewport"content= "width=device-width, initial-scale=1.0"> 

for this get window height and its top position.
get div’s top offset
compare when window top position is equal to the div’s top offset animate it.

 var window_top_position = $window.scrollTop(); 
 var element_top_position = $element.offset().top; 
 if ((element_bottom_position >= window_top_position)){
    $("div").css("background","red");
 }

jQuery methods used to handle events. An event is any interaction with the DOM like loading, mouse movements, keyboard events etc.

Mouse Events : scroll, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave

Keyboard Events : keydown, keypress, keyup

Browser Events : load, resize, scroll, unload, error

DOM Element Events : blur, focus, focusin, focusout, change, select, submit

if($.browser.chrome) {    
     console.log("chrome");
} else if ($.browser.mozilla) { 
    console.log("mozzilla");
} else if ($.browser.msie) {    
    console.log("internet explorer"); 
} 

 Object.keys(jQuery.browser)[0] 

jQuery provide some method for animation effects.

animate() : To animate elements.

delay() : to set a delay for queued functions

fadeIn() : to fade an element

hide() : to hide an element

show() : to show an element

toggle() : to set a toggle

 $("#div").delay("slow").fadeIn();   

jQuery works on client side. It is used to interact with the DOM via events and methods. Server side task can not be performed via jQuery.

css() method is used to set css on element.

 $("p").css("color", "red"); 

html() method is used to change the html content of element.

 $("p").html("Hello <strong>world</strong>!"); 

text() : It is used to set the text of element.

$("p").html("Hello world!"); 

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

Both are used to find or traverse the children element.

find() : It search through the matched elements’ child, grandchild, great-grandchild..

children(): It search through the matched elements’ child only at one level

selectors are used to select an element. They can be of following types

Class or Id Seletor : For example

$(".wrapper .item") // class based
$("#item1") // id based 

Tag name Selector. For example

$("ul") // tag based

pseudo Selector. For example

 $("p:first")  // pseudo selectors
 $("p:last")  // pseudo selectors 
 $("p:even")  // pseudo selectors 
 $("p:odd")  // pseudo selectors 
 $("p: nth-last-child(2)")  // pseudo selectors  

universal selector. For example

$("*") // to select all elements
$(":input") // to select all input elements
$(":disabled") // to select all disabled elements.

To add class using jQuery

$('div').addClass("show");

To remove class

 $('div').removeClass("hide"); 

CDN is content delivery network is geographically distributed network of proxy server and their data centers. The main goal is to provide fast deliver of data on internet.

CDN is of two types push and pull.

CDN provides high definition content with high Quality of Service, low costs, and low network load

They both are used to get or set the value of attribute.

jQuery.attr() : It gets the value of an attribute for the first element in the set of matched elements.

jQuery.prop() : It get the value of a property for the first element in the set of matched elements. It gives the original value of an element’s current state.

For Example

$(input).attr("value"); // it will give the same value as set
$(input).prop("value"); // it will give the current value entered by the user.

jQuery Ajax is used to load the content of a part of webpage without its reloading.

$.ajax({
       url: "demo_test.txt", 
       success: function(result){
             $("#item").html(result);
       }
});

jQuery mobile requires jQuery to run. It is written to focus on mobile devices, tables and smart phones.

jQuery UI is a library used for GUI widgets, animated visual effects, and themes. It is implemented with the jQuery.

remove() : It removes the matched element from the DOM completely.

detach() : It works same as remove() except it keeps all jQuery data associated with the removed elements. This method can be used when removed elements are to be reinserted into the DOM at a later time.

No, jQuery HTML only works for HTML documents not for XML Documents.

They both are same. jQuery min is just a compressed version of jQuery hence load faster.

They both give the same results but length is slightly faster. Also from jQuery 1.8 version size is deprecated.

jQuery provides a function to select element using selector for example

jQuery('h1')

Also this can be written using $ also in a more convenient way.

$('h1')

This is used to store the values.

Cick here to see example.

Id is a fast selector because it is unique.

Document Object Model is basically cross platform and language independent interface that treats HTML/XML as tree structure where each node of the tree is a part of the document.