Learn and master jQuery with Top 50 Interview Questions and Answers often asked in technical interviews.
1. What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library designed to simplify HTML document traversal, event handling, and animation.
2. How do you include jQuery in a web page?
You can include jQuery by adding the following `<script>` tag to your HTML file:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>3. What is the difference between jQuery selectors and DOM selectors?
jQuery selectors are more concise and powerful compared to traditional DOM selectors. jQuery allows you to select elements using CSS-like syntax and provides additional filtering options.
4. How do you select elements with a specific class using jQuery?
You can select elements with a specific class using the class selector `.` followed by the class name. For example, to select all elements with the class “myClass”, you can use:
$('.myClass')5. How do you select elements with a specific ID using jQuery?
We can select elements with a specific ID using the ID selector `#` followed by the ID name. For example, to select the element with the ID “myElement”, you can use:
$('#myElement')6. How do you select multiple elements using jQuery?
We can select multiple elements using any valid CSS selector. For example, to select all `<p>` elements with the class “myClass”, you can use:
$('p.myClass')7. How do you select the first element using jQuery?
We can use the `:first` selector to select the first element. For example, to select the first `<p>` element, you can use:
$('p:first')8. How do you select the last element using jQuery?
We can select the last element from the `:last` selector. For example, to select the last `<p>` element, you can use:
$('p:last')9. How do you select all elements of a specific type using jQuery?
We can select all elements of a specific type using the element selector. For example, to select all `<p>` elements, you can use:
$('p')10. How do you select elements based on their attribute values using jQuery?
We can select elements based on their attribute values using the attribute selector. For example, to select all `<a>` elements with the `href` attribute starting with “https://”, you can use:
$('a[href^="https://"]')11. How do you select the parent element of a specific element using jQuery?
We can use the `parent()` method to select the parent element of a specific element. For example, to select the parent element of a `<span>` element, you can use:
$('span').parent()12. How do you select all direct children of an element using jQuery?
We can use the `children()` method to select all direct children of an element. For example, to select all direct children of a `<div>` element, you can use:
$('div').children()13. How do you select the next sibling of an element using jQuery?
We can use the `next()` method to select the next sibling of an element. For example, to select the next sibling of a `<div>` element, you can use:
$('div').next()14. How do you select all elements that contain a specific text using jQuery?
We can use the `:contains()` selector to select all elements that contain a specific text. For example, to select all `<p>` elements that contain the text “Hello”, you can use:
$('p:contains("Hello")')15. How do you modify the text content of an element using jQuery?
We can use the `text()` method to modify the text content of an element. For example, to change the text of a `<p>` element to “Hello”, you can use:
$('p').text('Hello')16. How do you modify the HTML content of an element using jQuery?
We can use the `html()` method to modify the HTML content of an element. For example, to change the HTML of a `<div>` element, you can use:
$('div').html('<p>New content</p>')17. How do you modify the CSS properties of an element using jQuery?
We can use the `css()` method to modify the CSS properties of an element. For example, to change the background color of a `<div>` element to red, you can use:
$('div').css('background-color', 'red')18. How do you add a class to an element using jQuery?
You can use the `addClass()` method to add a class to an element. For example, to add the class “highlight” to a `<p>` element, you can use:
$('p').addClass('highlight')19. How do you remove a class from an element using jQuery?
We can use the `removeClass()` method to remove a class from an element.
For example, to remove the class “highlight” from a `<p>` element, you can use:
$('p').removeClass('highlight')20. How do you toggle a class on an element using jQuery?
We can use the `toggleClass()` method to toggle a class on an element. For example, to toggle the class “active” on a `<div>` element, you can use:
$('div').toggleClass('active')21. How do you hide an element using jQuery?
We can use the `hide()` method to hide an element. For example, to hide a `<p>` element, you can use:
$('p').hide()22. How do you show a hidden element using jQuery?
We can use the `show()` method to show a hidden element. For example, to show a hidden `<p>` element, you can use:
$('p').show()23. How do you fade in an element using jQuery?
We can use the `fadeIn()` method to fade in an element. For example, to fade in a `<div>` element, you can use:
$('div').fadeIn()24. How do you fade out an element using jQuery?
We can use the `fadeOut()` method to fade out an element. For example, to fade out a `<div>` element, you can use:
$('div').fadeOut()25. How do you slide down an element using jQuery?
You can use the `slideDown()` method to slide down an element. For example, to slide down a `<div>` element, you can use:
$('div').slideDown()26. How do you slide up an element using jQuery?
You can use the `slideUp()` method to slide up an element. For example, to slide up a `<div>` element, you can use:
$('div').slideUp()27. How do you create a new element using jQuery?
You can use the `$(‘<element>’)` syntax to create a new element. For example, to create a new `<p>` element, you can use:
$('<p>')28. How do you append an element to another element using jQuery?
We can use the `append()` method to append an element to another element.
For example, to append a `<p>` element to a `<div>` element, you can use:
$('div').append('<p>New element</p>')29. How do you remove an element using jQuery?
We can use the `remove()` method to remove an element. For example, to remove a `<p>` element, you can use:
$('p').remove()30. How do you bind a click event to an element using jQuery?
We can use the `click()` method to bind a click event to an element. For example, to bind a click event to a `<button>` element, you can use:
$('button').click(function() {
// Event handler code
});31. How do you get the value of an input element using jQuery?
We can use the `val()` method to get the value of an input element.
For example, to get the value of an `<input>` element with the ID “myInput”, you can use:
var value = $('#myInput').val();32. How do you set the value of an input element using jQuery?
We can use the `val()` method to set the value of an input element.
For example, to set the value of an `<input>` element with the ID “myInput” to “Hello”, you can use:
$('#myInput').val('Hello');33. How do you make an AJAX request using jQuery?
We can use the `$.ajax()` function to make an AJAX request.
For example, to make a GET request to a URL and handle the response, you can use:
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
success: function(response) {
// Handle the response
},
error: function(error) {
// Handle the error
}
});34. How do you make a GET request using shorthand methods in jQuery?
We can use the `$.get()` shorthand method to make a GET request. For example, to make a GET request to a URL and handle the response, you can use:
$.get('https://api.example.com/data', function(response) {
// Handle the response
});35. How do you make a POST request using shorthand methods in jQuery?
We can use the `$.post()` shorthand method to make a POST request.
For example, to make a POST request to a URL with data and handle the response, you can use:
$.post('https://api.example.com/data', { key: 'value'}, function(response) {
// Handle the response
});36. How do you iterate over an array using jQuery?
We can use the `$.each()` function to iterate over an array.
For example, to iterate over an array and log each element to the console, you can use:
var array = [1, 2, 3, 4, 5];
$.each(array, function(index, element) {
console.log(element);
});37. How do you check if an element has a specific class using jQuery?
– You can use the `hasClass()` method to check if an element has a specific class. For example, to check if a `<div>` element has the class “highlight”, you can use:
if ($('div').hasClass('highlight')) {
// Class exists
} else {
// Class does not exist
}38. How do you get the width of an element using jQuery?
We can use the `width()` method to get the width of an element. For example, to get the width of a `<div>` element, you can use:
var width = $('div').width();39. How do you set the width of an element using jQuery?
We can use the `width()` method to set the width of an element. For example, to set the width of a `<div>` element to 200 pixels, you can use:
$('div').width(200);40. How do you get the height of an element using jQuery?
We can use the `height()` method to get the height of an element.
For example, to get the height of a `<div>` element, you can use:
var height = $('div').height();41. How do you set the height of an element using jQuery?
We can use the `height()` method to set the height of an element. For example, to set the height of a `<div>` element to 100 pixels, you can use:
$('div').height(100);42. How do you animate an element using jQuery?
We can use the `animate()` method to animate an element. For example, to animate the width of a `<div>` element to 300 pixels over 1 second, you can use:
$('div').animate({ width: '300px' }, 1000);43. How do you chain multiple jQuery methods together?
We can chain multiple jQuery methods together by simply placing them one after another. For example:
$('div').addClass('highlight').text('Hello').fadeOut();44. How do you check if an element is visible using jQuery?
We can use the `is(‘:visible’)` method to check if an element is visible. For example, to check if a `<div>` element is visible, you can use:
if ($('div').is(':visible')) {
// Element is visible
} else {
// Element is hidden
}45. How do you check if an element is hidden using jQuery?
We can use the `is(‘:hidden’)` method to check if an element is hidden. For example, to check if a `<div>` element is hidden, you can use:
if ($('div').is(':hidden')) {
// Element is hidden
} else {
// Element is visible
}46. How do you stop an ongoing animation using jQuery?
We can use the `stop()` method to stop an ongoing animation. For example, to stop the animation of a `<div>` element, you can use:
$(‘div’).stop();
47. How do you bind an event handler to multiple events using jQuery?
We can separate multiple events with a space in the event binding syntax.
For example, to bind an event handler to both the click and hover events of a `<button>` element, you can use:
$('button').on('click hover', function() {
// Event handler code
});48. How do you delegate an event to dynamically added elements using jQuery?
We can use the `on()` method with event delegation to delegate an event to dynamically added elements.
For example, to delegate a click event to all current and future `<button>` elements, you can use:
$(document).on('click', 'button', function() {
// Event handler code
});49. How do you get the index of an element among its siblings using jQuery?
We can use the `index()` method to get the index of an element among its siblings.
For example, to get the index of a `<li>` element among its siblings, you can use:
var index = $('li').index();50. How do you delay the execution of code using jQuery?
We can use the `delay()` method to delay the execution of code. For example, to delay the execution of a function for 1 second, you can use:
setTimeout(function() {
// Code to be executed
}, 1000);Please note that the provided code examples are for illustration purposes and may need to be adapted to fit specific use cases.
soorya