Clean • Professional
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:
Ques: What are the advantages of using jQuery?
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 functionselector → selects HTML elementsaction() → applies a jQuery methodQues: 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 effectsQues: What are limitations of jQuery?
Ques: When should you use jQuery today?
Ques: What replaced jQuery in modern development?
Ans: Modern alternatives:
$.ajax()