JQuery Interview Questions

JQuery Interview Questions | Freshers & Experienced

  • Calvin
  • 24th Nov, 2019
  • 856 Followers

JQuery Interview Questions

Q1. What is Jquery?Why it is used?

Jquery is a fast, lightweight, cross-platform Javascript library that simplified the traversal and manipulation of DOM.

It is also capable of performing event handling, CSS animation, validation, and Ajax. Jquery is design by John Resig and available as a free, open-source library under a permissive MIT License.

Jquery is widely used for

  • Creating Javascript Plugins
  • Manipulation of DOM
  • Performing client-side validation
  • Updating content asynchronously using AJAX.
  • Doing CSS Animations

Q2. What is used of is() function in jQuery?

Q3. Is jquery case sensitive?

Yes, Jquery case sensitive library. You must take care of the case while using functions, variables, and other identifiers.

For example

“date()” and “Date()” is not the same.

Q4. Enlist Major features of jQuery?

jQuery is a library of Java which is lightweight and user can do more with it by writing less amount of code. The goal of jQuery is to ease the usage of Javascript for any user’s website to a great extent.jQuery renders another benefit of streamlining a large number of complicated things of the Javascript, for example, AJAX calls, DOM manipulation and many more.

The jQuery, a library of Javascript contains the below-mentioned features:

  • HTML/DOM manipulation
  • HTML event methods
  • AJAX
  • CSS manipulation
  • Utilities
  • Effects and animations

Q5. How can you add jQuery in your project?

There are two main ways to add a jQuery to your project

Download the jQuery package from the jQuery official website and store it in your applications folder. Then, use the following script to include jQuery in your application.

<head> 
<script src="jquery-3.4.1.min.js"></script> 
</head> 
The second way is to include jQuery from a CDN like Google, Microsoft, etc. 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  //Google CDN 
</head> 

Q6. What is Document ready event?

The $(document).ready() is a listener that is executed whenever the document is loaded and the page DOM is ready to be executed. The method is loaded only after the whole DOM is ready but before all the images, and other resources are loaded in the document. A document can have multiple document ready listeners.

//syntax 
$(document).ready(function() { 
   //DOM manipulation code 
}); 

Q7. Enlist the common DOM events for jQuery Event Methods?

Some of the common DOM event handling methods are,

  • Onclick – to handle when a DOM element is clicked.
  • Ondblclick – to handle when a DOM element is double-clicked.
  • Onload – to handle when a document is loaded.
  • Onerror() - to handle the browser error event.
  • Onsubmit – to handle when a form is submitted.
  • Onselect – to handle when an element is selected in form.

Q8. How to stop event bubbling in JQuery?

Bubbling is a scenario in which if an event is called for a child element, the parent element will also be called if it is set up with an event as well. To stop this propagation, jQuery has an inbuilt method called as event.stopPropagation(). This method stops popup for other elements other than the selected element.

//syntax 
Event.stopPropagation() 

Q9. What symbol JQuery syntax starts?

jQuery statement always starts with ‘$’ sign. It is an alias for jQuery that defines the jQuery.

//syntax 
$(selector).action() 
//example 
$("p").hide()  //hides the paragraph. 

Q10. What is the difference between $p and $(p)?

$ is an alias for jQuery. It is an object that has jQuery properties and we can use it to call it.

For eg: $.Ajax() - used to perform AJAX requests.

$() is an alias for jQuery(). It is a function to converts the DOM elements into a jQuery objects by searching the DOM to match the provided selector.

For eg: $(“#id”) - It finds the DOM object matching the selector ‘id’ and converts to jQuery object for further manipulation in JavaScript.

Q11. What is the format for a compound selector in Jquery?

The compound selector in jQuery is used to select multiple elements using a single select expression. Any number of selectors can be provided to the jQuery statement separated by comma to get a single combined result.

//format 
jQuery( "selector1, selector2, selectorN" ); 
//example 
$( "div, span, h2" ).css( "border" ); //here the border is applied to two elements. 

Q12. What is the difference between .empty() and .remove()?

Empty() method and remove() method are both used to remove elements with one difference.

Empty() method deletes the content of the selection.

Remove() method deletes the content of the selection with selection also.

//example 
<p><h1>hello</h1></p> 
$(‘p’).empty(); deletes only the h1 tag. 
$(‘p’).remove(); deletes both the selected p tag and its child h1 tag. 

Q13. What is the double click event handler?

The double click method in jQuery is used to handle when an element is double clicked. The dbclick() triggers the double click event in for an element. A function can be attached to it to implement further process when an element is double clicked.

//syntax 
$(selector).dblclick() 
$(selector).dblclick(function) //function is optional. 
 
//example 
<script> 
$("p").dblclick(); 
</script> 
<body> <p ondbclick = “alert(‘dbclick event’)”>Paragraph</p> 

In the above example, the paragraph is linked with the double click event. So, when it is double clicked the ‘dbclick event’ will be displayed.

Q14. What are jQuery Selectors? Give some examples

Selectors in the jQuery are used to select and manipulate HTML elements. It selects the HTML elements based on their name, id, classes, types, attributes, and much more.

Example 
$(“p”) -> Here the element is selected based on its name. 
$(“#id”) -> Here the element is selected based on its id. ‘#’ is used to imply the id. 
$(“.className”) -> It selects the element based on its class. ‘.’ is used to imply the class name. 

Q15. What is difference between .detach() and .remove()?

Remove() and detach() are both used to delete the elements with a small difference in implementation. Remove method deletes the content, and data with the selected element. The deleted element or the data cannot be restored as the elements are removed from the DOM element. Detach method is like the remove method is deleting but it keeps the data and element without removing completely. The detached elements can be reinserted by using the appendTo method.

Example 
$(‘p’).remove(); //removes the element completely. 
Var p = $(‘p’).detach(); //removes the element but it is stored in variable ‘p’. 
p.appendTo(‘body’); //the removed data and the element can be reinserted at any time. 

Q16. Explain the difference between bind() and live()?

The bind method is used to register the type of event and event handler to the DOM element that matches the given selector. It registers the event handler to all the DOM elements that match the selector given. It will not add the event handler to the future element created that has the matching selector.

//example 
$( "img" ).bind( "click", function( e ) {/* statements */} ); //Here the event handler is registered to only the current DOM elements that are matched with “img”.

The live method works same as bind method but it registers the event handler to current matching elements, as well as future element that you add.

//example 
$('img').live('click', function() { /* Statements*/ }); //here img is the selector that is matched to all the curent and future DOM elements. 

Q17. What is the use of jQuery filter?

The filter method in the jQuery is used to filters the elements based on the criteria given to the function.

//syntax 
$(selector).filter(criteria, function(index)) 

Here, the elements that match the criteria is given to the function to run further logic on it.

//example 
$(“li”).filter(“#id1”).css(“color”, “blue”); 

In the above example, the list element with id1 is filtered from the list and is applied with the css function to change its color.

Q18. What is difference between this and $(this) in JQuery?

‘this’ is a DOM object that is, it a reference to the HTML DOM element. You can call DOM methods with this object but not jQuery methods.

$(this) is a jQuery wrapper around the DOM object to use the jQuery method on it. You cannot call DOM methods with $(this).

Q19. How to select all elements using jQuery?

jQuery(“*”) is used to select all the elements in the document. You can do all the jQuery methods on this selector. So, it applies the method to all the elements in the document.

//example 
$(“*”).hide() -> it hides every element in the document. 

Q20. List few jquery form filters?

Some jQuery filters used in the form are,

Find() function filter the element that match with the specified selector.

//example
$("form").each(function(){
    $(this).find(':input') // -> it returns all the inputs in the specified forms.
});
Contains() function selects only the elements containing the specified string.

Q21. Which function in jquery is used to check an element has a class or not?

The hasClass() method is used to check if the element has a class name or not. If the specified element has a class name, then it returns true or false.

//syntax 
$(selector).hasClass(classname) 
 
//example 
<p class="className">paragraph.</p> 
$("p").hasClass("intro"); //this function returns true as the ‘p’ tag has class name. 

About Author :

  • Author of JQuery Interview Questions

    Calvin Carlo

    Calvin is a Senior web developer, a Javascript enthusiast, and a technical writer. He is very interested in learning new technologies and writing technical blogs on It. He loves playing Cricket, watching Hollywood action movies and is big fan of Michael Douglas.

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.