In the previous article, I have mentioned Top HTML Interview questions and Top Front-end interview questions with answers, now in this article, I am going to provide you useful jQuery interview questions with answer, which is every jQuery or Javascript front-end developer should know.
What is jQuery?
jQuery is lightweight, fast and feature-rich, client side library using which you can manipulate DOM easily without writing long Javascript code. It is cross-platform and supports different types of browsers.
What is the difference between jQuery and Javascript?
Here are few differences between jQuery and Javascript:
- Javascript is scripting language used to manipulate HTML DOM objects and makes website interactive, while jQuery is library built using Javascript to make HTML objects manipulation and client-side validation etc easier.
- JavaScript uses more lines of code as we have to write our own code while jQuery uses less lines of code for same functionality.
- JavaScript can be difficult for some developers sometimes while jQuery is more development friendly.
What are features of jQuery?
Here are some features of jQuery
- Lightweight library.
- Cross-browser compatibility.
- Easy DOM manipulation.
- Event handling & AJAX support.
- Built-in effects and animations.
- Supports CSS3, basic XPath, HTML5.
What is difference between on alert() and confirm()?
Alert()
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Confirm()
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
What is jQuery Ajax?
Ajax (Asynchronous JavaScript and XML) is a method which can be used to send asynchronous HTTP requests to the server and receives the data from the server.
Ajax() method is valuable as it offers the ability to specify both success and failure callbacks.
How to show/hide an element using jQuery?
You can use .fadeToggle() which display or hide the matched elements by animating their opacity.
$('#BtnToShowHide').click(function(){
$('#div2').fadeToggle();
});How to check if element exists or not in HTML using jQuery?
You can check the length of the selector, if it returns you any value greater than 1, then the element exists else not.
Suppose, you want to check if "div" with id "#ele" exists in HTML or not
if($('#ele').length > 0)
{
// it exists
}Differentiate between find() and children() methods
.find() and .children() both are used to locate child elements of the matched DOM elements
.find() travels to any level down, whereas .children() travels a single level down to locate the element.
Explain the difference between the .detach() and remove() methods in jQuery.
The detach() and remove() methods are the same, except that .detach() retains all jQuery data associated with the removed elements and .remove() does not.
detach() is therefore useful when removed elements may need to be reinserted into the DOM later.
Explain the difference between $(this) and this in jQuery?
$() is the jQuery constructor function, whereas this is a reference to the DOM element.
For jQuery methods, we use $(this).
What is .ready() function in jQuery?
The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.
This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins.
When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added.
What are various ajax methods in jQuery?
$.ajax()- Used for async request$.ajaxsetup()- It is to set default value of variables before sending Ajax request to server$.ajaxTransport()- Used for object transmission$.get()- Perform Http GET request and returns data$.ajaxPrefilter()- handle custom solutions$.getJSON()- loads JSON data
What is the difference between .width() and .outerWidth()?
width() returns the computed width of the element, while outerWidth() returns the width plus all the margins and paddings.
How to check whether a checkbox is checked in jQuery?
You can simply use "is(":checked")", example
if ($("#checkCheckbox").is(":checked")) {
// do something if the checkbox is checked
}