JavaScript vs jQuery — Interview Questions & Answers

Ques: What is jQuery?

Ans: jQuery is a fast, lightweight, and cross-platform JavaScript library that simplifies HTML DOM manipulation, event handling, animation, and AJAX interactions.

It allows you to write less code to perform tasks that would otherwise take multiple lines in plain JavaScript.

Example:

// JavaScript
document.getElementById("demo").style.color = "red";

// jQuery
$("#demo").css("color", "red");

Ques: What is the main difference between JavaScript and jQuery?

Feature	JavaScript	jQuery
Type	Programming Language	JavaScript Library
Syntax	Verbose	Short & Simplified
Cross-browser Support	Requires manual handling	Built-in compatibility
DOM Manipulation	Manual methods	Easy methods like `$(selector).hide()`
AJAX	Complex	Simple with `$.ajax()`
Learning Curve	Moderate	Easier for beginners

Ques: Why is jQuery used in web development?

Ans: jQuery simplifies JavaScript tasks like:

Selecting and manipulating DOM elements
Handling events easily
Creating animations
Simplifying AJAX requests
Ensuring cross-browser compatibility

Ques: What are the advantages of using jQuery?

Cross-browser compatibility
Easy DOM traversal and manipulation
Simplified AJAX handling
Built-in animation effects
Lightweight and fast
Large plugin ecosystem

Ques: How do you include jQuery in a webpage?

Ans: You can include jQuery using a CDN or local file.

Example (CDN):

<script src="<https://code.jquery.com/jquery-3.7.1.min.js>"></script>

Ques: What is the basic syntax of jQuery?

$(selector).action();

Example:

$("p").hide();  // hides all <p> elements

Here:

$ → jQuery function
selector → selects HTML elements
action() → applies a jQuery method

Ques: What are jQuery selectors?

Ans: jQuery selectors are used to select and manipulate HTML elements based on their name, id, class, or attribute.

Examples:

$("#id")        // select by ID
$(".class")     // select by class
$("p")          // select all paragraphs
$("*")          // select all elements
$("[href]")     // select elements with href attribute

Ques: How do you select multiple elements in jQuery?

Ans: Use comma-separated selectors:

$("h1, h2, p").css("color", "blue");

Ques: What are common jQuery selector filters?

Selector	Description
`:first`	Selects first element
`:last`	Selects last element
`:even` / `:odd`	Selects even/odd elements
`:eq(n)`	Selects element at index `n`
`:lt(n)`	Less than index `n`
`:gt(n)`	Greater than index `n`

Example:

$("li:even").css("background", "lightgray");

Ques: What are jQuery HTML methods?

Ans: These methods are used to get or set HTML content, attributes, or values.

Method	Description	Example
`html()`	Get or set HTML content	`$("#demo").html("<b>Hello</b>")`
`text()`	Get or set text content	`$("#demo").text("Hi")`
`attr()`	Get or set attribute	`$("a").attr("href", "<https://example.com>")`
`val()`	Get or set form field value	`$("#name").val("John")`

Q11. How to add and remove HTML elements using jQuery?

$("#list").append("<li>New Item</li>");  // adds inside at end
$("#list").prepend("<li>First Item</li>");  // adds at start
$("#list li:first").remove();  // removes first item

Ques: What are jQuery CSS methods?

Ans: Used to manipulate CSS properties of elements.

Method	Description	Example
`css()`	Get or set CSS styles	`$("p").css("color", "blue")`
`addClass()`	Adds a CSS class	`$("#box").addClass("active")`
`removeClass()`	Removes a CSS class	`$("#box").removeClass("active")`
`toggleClass()`	Toggles a class	`$("#box").toggleClass("active")`
`hasClass()`	Checks if element has a class	`$("#box").hasClass("active")`

Ques: How do you hide and show elements in jQuery?

$("#demo").hide();   // Hide
$("#demo").show();   // Show
$("#demo").toggle(); // Toggle visibility

Ques: How to apply animations in jQuery?

$("#box").fadeIn();
$("#box").fadeOut();
$("#box").slideUp();
$("#box").slideDown();
$("#box").animate({left: '200px', opacity: 0.5}, 1000);

Q15. What are jQuery DOM manipulation methods?

Ans: Used to create, modify, or remove HTML elements dynamically.

Method	Purpose	Example
`append()`	Insert content at end	`$("#div").append("<p>End</p>")`
`prepend()`	Insert content at beginning	`$("#div").prepend("<p>Start</p>")`
`before()`	Insert before element	`$("#div").before("<h1>Heading</h1>")`
`after()`	Insert after element	`$("#div").after("<p>Footer</p>")`
`remove()`	Remove selected element	`$("#div").remove()`
`empty()`	Remove inner content	`$("#div").empty()`

Ques: How do you handle events in jQuery?

$("#btn").click(function() {
  alert("Button clicked!");
});

Other events: dblclick(), mouseenter(), mouseleave(), keyup(), submit(), etc.

Ques: What is the jQuery ready() function?

Ans: It ensures the DOM is fully loaded before running any script.

$(document).ready(function(){
  console.log("DOM is ready!");
});

Ques: How is jQuery used for AJAX requests?

$.ajax({
  url: "data.json",
  method: "GET",
  success: function(data) {
    console.log(data);
  }
});

Ques: What are jQuery effects?

Ans: Predefined methods for animations:

.hide(), .show(), .toggle()
.fadeIn(), .fadeOut()
.slideUp(), .slideDown()
.animate() for custom effects

Ques: What are limitations of jQuery?

Adds extra library size (~90KB)
Slower than vanilla JavaScript
Not ideal for modern frameworks like React/Vue
DOM-heavy; less suited for SPA architectures

Ques: When should you use jQuery today?

Quick prototypes or legacy websites
When no modern JS framework is used
For simple DOM manipulation or AJAX apps
For new projects, modern JavaScript (ES6+) is preferred.

Ques: What replaced jQuery in modern development?

Ans: Modern alternatives:

Vanilla JS (ES6) → built-in DOM APIs
React / Vue / Angular → component-based UIs
Fetch API → replaces $.ajax()