Top jQuery Interview Questions and Answers

By Dhananjay yadav March 26, 2018
What is jQuery?
jQuery is a Javascript library which uses usage of Javascript very easy.We can handle events, manage CSS properties, DOM element, animation and many more utilities using jQuery library.It is an opensource. It is used by Microsoft, Google, IBM and almost the big players in software industries.

What are selectors?
jQuery selectors are the tool to identify the HTML elements and to manipulate properties. for example:
$(".name") : Class selector
$('#logo') : ID selector
$("button") : tag selector
$(this) : current dom selector

What are the selectors that we use in jQuery?
We use the following selectors in jQuery:
-Tag
-Class
-Id
-all (*)
We can derive more selectors using these main selectors.

What is an event?
An event is a user action. When a user interacts using UI it has to make many clicks, drag, drop, mouse over, change drop down, keypress actions, these actions are recognized by jQuery.

What are the common events that user make?
Most common events make by users are :
-click
-mouseover
-keypress
-keydown
-change
-input
-drag
-drop
-blur
-dblclick (double click)
-mouseenter


What is toggle()?
toggle() is a function which provides switching functionality between two actions, functions, properties etc. Suppose we can show and hide an element using toggle function.

What is callback?
A callback is a function which is called after when execution finished. We have to specify which function we have to call after a particular execution.

What is alert()?
alert() is used as a callback to show some warning, notification or error.

$("button").click(function(){
        alert("Clicked on button");
});

What is chaining in jQuery?
Chaining is calling of multiple functions in a single statement. for example :
$(".button").css("color", "#ececec").slideUp(1000).slideDown(2000).hide();

How to get value or text of an HTML element?
Since we know jQuery can manipulate HTML DOM, we can use functions to get value, text or html block inside an HTML element. For example

$('.first_name').val();  //geting value in input box having class as first_name

$('p').html();   //getting html inside a 'p' tag

$('textarea').text();  //getting text inside a textarea


How can we set values or HTML element?
very similar to getting the value, we can set values to elements. For example:

$('.first_name').val('Interview Sortout Blogs');  //geting value in input box having class as first_name

$('p').html('My blog is based on interview');   //getting html inside a 'p' tag

$('textarea').text('This blog is awesome. You are doing a verygood job,Interview Sortout');  //getting text inside a textarea


How to add or remove class from a HTML element?
jQuery have functions to add or to remove classes from an HTML elements. Please see the following examples:

$('button').addClass('btn-danger');
$('button').removeClass('btn-danger');


How to check that an element has a class?
We can use function hasClass().If class found it returns true, other wise returns false.

if($('button').hasClass('btn-danger')){
 alert('Button class is btn-danger');
}


What append() and prepend() functions do?
append() function , adds an HTML block after(at the end) a selector. For example :
$('p').append('Interview Sortout');

prepend() method, adds a block before or at the beginning of the selector. Example:

$('p').prepend('

Interview Sortout

');

What does parent() method do?
parent() method select the direct parent or immediate ancestor that is next to selector.

What does parents() method do?
parents() select all ancestors , the elements including parent of parent.

What childre() do?
children() method select the immediate child of the selector.

What does find() method do?
find() method search for the selector passed and selects from all the children of selector.

What does siblings() method do?
sibling() method returns all the elements having parralle relationship with selector. We can call them siblings.

How to call AJAX in jQuery?
An AJAX call example in jQuery:

var $post = $.ajax({
  url: "example.php",
  type: "POST",
  data: {id : product_id, product_name:product_name},
  dataType: "json"
});

$post.done(function(msg) {
  $("#log").html( msg );
});

$post.fail(function() {
  alert( "Request failed: Request Has been failed" );
});


More Java Script Related Interview questions and answers
  1. JSON Interview Questions and Answers
  2. Basic Java Script Interview Questions and Answers

No Comment to " Top jQuery Interview Questions and Answers "