Scribd
Upload
4 views56 pages

jQuery: Simplifying JavaScript for Web Development

jQuery is a lightweight JavaScript library that simplifies HTML document manipulation, event handling, and animations, making web development easier. It provides features like cross-browser compatibility, simplified syntax, and chaining methods for efficient coding. Despite modern JavaScript advancements, jQuery remains relevant for legacy projects, rapid prototyping, and situations requiring quick solutions.

Uploaded by

gaddalababurao2024
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views56 pages

jQuery: Simplifying JavaScript for Web Development

jQuery is a lightweight JavaScript library that simplifies HTML document manipulation, event handling, and animations, making web development easier. It provides features like cross-browser compatibility, simplified syntax, and chaining methods for efficient coding. Despite modern JavaScript advancements, jQuery remains relevant for legacy projects, rapid prototyping, and situations requiring quick solutions.

Uploaded by

gaddalababurao2024
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JQuery

Introduction
jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML
document traversal and manipulation, event handling, and animation, making it easier to work
with JavaScript in a web development environment. It was designed to simplify the complexity
of JavaScript, especially when dealing with different browsers.

jQuery is a powerful and efficient library that simplifies tasks in JavaScript, particularly when
dealing with DOM manipulation, events, animations, and AJAX requests. It’s been a staple in
web development for many years and is widely used in both small and large-scale web projects.

Here are some key features and uses of jQuery:

1. DOM Manipulation

jQuery allows you to easily select HTML elements and manipulate them with just a few lines of
code. This makes tasks like modifying the content, adding or removing elements, and changing
styles much easier.

// Change the text of a paragraph with id "example"


$("#example").text("New text!");

2. Event Handling

jQuery provides a simple way to attach event handlers to HTML elements. It makes it easy to
work with events like click, hover, keypress, and more.

// jQuery to hide the button when clicked


$("#hideButton").click(function() {
$(this).hide(); // 'this' refers to the button clicked
});

3. Animation and Effects


jQuery makes it easy to create animations and effects on your web pages, such as hiding or
showing elements, fading in or out, sliding up or down, and more.
// Fade out an element with the id "box"
$("#box").fadeOut();

4. AJAX

jQuery simplifies making asynchronous requests to a server (AJAX), allowing you to fetch data
from a server without refreshing the page.

$.ajax({
url: '[Link]',
type: 'GET',
success: function(data) {
[Link](data);
}
});

5. Cross-browser Compatibility

jQuery handles a lot of the inconsistencies between different browsers, so you don't have to
worry about writing separate code for Internet Explorer, Firefox, Chrome, etc.

6. Simplified Syntax

One of the main benefits of jQuery is its simple syntax. For example, instead of using a long and
complex JavaScript code to select an element, you can do it in one line with jQuery.

// jQuery syntax for selecting an element with id 'example'


$('#example')

7. Chaining

jQuery allows you to chain multiple methods together, making the code more concise and
readable.

// Example of chaining in jQuery


$('#example').css('color', 'red').fadeIn().slideDown();

How to Include jQuery

You can include jQuery in your web page by adding the following line in the <head> or at the
end of the <body> of your HTML document:

<!-- Add jQuery from a CDN -->


<script src="[Link]

Example: Simple jQuery Code


Here’s a simple example where jQuery is used to change the content of a paragraph when a
button is clicked:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<script src="[Link]
</head>
<body>

<p id="message">Hello, world!</p>


<button id="changeMessageBtn">Change Message</button>

<script>
// jQuery to change the text of the paragraph when the button is clicked
$("#changeMessageBtn").click(function() {
$("#message").text("The message has been changed!");
});
</script>

</body>
</html>

Why is jQuery Needed?


jQuery is a JavaScript library that simplifies many tasks in web development. While modern
JavaScript has caught up with many of the functionalities that jQuery initially provided, there are
still several reasons why jQuery is needed or useful, especially in certain situations. Here's why
jQuery is still relevant:

1. Cross-Browser Compatibility

 Problem: Different browsers (like Internet Explorer, Firefox, Safari, and Chrome) often
handle JavaScript and DOM manipulation differently, leading to inconsistencies in
behavior and appearance across browsers.
 jQuery Solution: jQuery abstracts away these differences and provides a uniform API
that works across all browsers. This helps developers avoid writing complex code to
handle browser-specific issues.
 Example: jQuery automatically ensures that click events and other methods work the
same across different browsers.

2. Simplified DOM Manipulation

 Problem: Plain JavaScript for DOM manipulation can be verbose and complicated,
especially for beginners. Tasks like selecting elements, changing styles, or
adding/removing classes can require writing a lot of code.
 jQuery Solution: jQuery offers an easy and concise syntax to perform complex tasks in
just a few lines of code.
 Example:

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

// Plain JavaScript
[Link]("myElement").[Link] = "red";
3. Event Handling Made Easy

 Problem: Attaching events to DOM elements, handling multiple events, and managing
event propagation can be cumbersome in plain JavaScript.
 jQuery Solution: jQuery makes attaching and managing events straightforward. It
automatically normalizes differences between browsers, and allows you to attach
multiple event listeners with ease.
 Example:

// jQuery
$("#myButton").click(function() {
alert("Button clicked!");
});

// Plain JavaScript
[Link]("myButton").addEventListener("click",
function() {
alert("Button clicked!");
});

4. Animation and Effects

 Problem: Implementing animations and visual effects (like fading, sliding, or


showing/hiding elements) in JavaScript can be complex and requires significant effort to
maintain performance.
 jQuery Solution: jQuery simplifies adding animations and effects with built-in methods
like fadeIn(), fadeOut(), slideUp(), slideDown(), etc.
 Example:

// Fade out an element


$("#myElement").fadeOut();

5. AJAX Simplification

 Problem: Making AJAX (Asynchronous JavaScript and XML) requests and handling
them can involve multiple steps and boilerplate code in plain JavaScript.
 jQuery Solution: jQuery simplifies AJAX requests and provides a clean, concise API to
handle things like GET and POST requests, handling responses, and parsing JSON.
 Example:

// jQuery AJAX
$.ajax({
url: "[Link]",
success: function(response) {
[Link](response);
}
});

// Plain JavaScript AJAX (using Fetch API)


fetch("[Link]")
.then(response => [Link]())
.then(data => [Link](data));

6. Chaining

 Problem: In plain JavaScript, performing multiple operations on the same element


requires repetitive code.
 jQuery Solution: jQuery allows you to chain multiple actions together on the same
element, which leads to more concise, readable, and efficient code.
 Example:

// jQuery chaining
$("#myElement").css("color", "red").fadeOut().slideUp();

7. Faster Development Time

 Problem: Writing code for every small functionality can slow down development time.
 jQuery Solution: By providing easy-to-use methods for common tasks, jQuery speeds up
development time. You don’t need to reinvent the wheel for common tasks like
animations, DOM manipulation, or event handling.
 Example: With jQuery, you can use a single line to hide an element, whereas in
JavaScript, you'd need more lines.

8. Large Community and Plugins

 Problem: Writing custom solutions for every feature or functionality can take time and
effort.
 jQuery Solution: jQuery has a huge ecosystem of plugins that can add functionalities
like image sliders, modals, form validation, and much more, without having to code
everything from scratch.
 Example: There are many jQuery plugins available for building carousels, modals,
tooltips, etc.

9. Learning Curve for Beginners

 Problem: For beginners who are learning JavaScript, the native syntax and complexities
of JavaScript can be overwhelming.
 jQuery Solution: jQuery has a very simple and approachable syntax, which is often
easier for beginners to grasp. It allows new developers to quickly see results without
delving into the intricacies of JavaScript.
 Example: Selecting an element and changing its text in jQuery is much simpler than
using native JavaScript methods.

10. Legacy Support


 Problem: Many older projects and websites still rely on jQuery, and they may require
continued maintenance or enhancements.
 jQuery Solution: If you are working on an older project or need to support legacy
browsers, jQuery can be a useful tool, especially if you don’t want to rewrite large
portions of the code

When Should You Use jQuery?

Although jQuery remains useful in many situations, its necessity has decreased in recent years
because of improvements in native JavaScript (ES6+). Here’s when you should consider using
jQuery:

 Legacy Projects: If you’re maintaining or enhancing a project that already uses jQuery.
 Small Projects: When you want a quick solution for a simple web app and don’t want to
deal with modern build tools or dependencies.
 Cross-browser Support: If you need to support older browsers or want a simpler way to
ensure compatibility.
 Rapid Prototyping: When you need to quickly build out interactive features without
diving deep into JavaScript frameworks.

When Might You Not Need jQuery?

 Modern JavaScript (ES6+): Native JavaScript has introduced many features that make
jQuery less necessary (e.g., fetch() for AJAX, querySelector() for DOM
manipulation).
 Frameworks like React, Vue, or Angular: If you're working with modern front-end
frameworks, you likely won’t need jQuery, as these frameworks handle DOM
manipulation and event binding themselves.

jQuery Selectors
jQuery selectors are used to find and manipulate HTML elements based on their attributes,
classes, IDs, and other properties. They are similar to CSS selectors but provide additional
functionality for traversing the DOM (Document Object Model).

Here’s an overview of the most commonly used jQuery selectors:

1. ID Selector (#id)

The ID selector selects an element with a specific id. The ID should be unique within a page.

// Select the element with id="myElement"


$("#myElement")

2. Class Selector (.class)


The class selector selects all elements with a specific class name.

// Select all elements with class="myClass"


$(".myClass")

3. Element Selector (element)

The element selector selects all elements of a specified type (e.g., div, p, span).

// Select all <div> elements


$("div")

// Select all <p> elements


$("p")

4. Universal Selector (*)

The universal selector selects all elements on the page.

// Select all elements on the page


$("*")

5. Attribute Selector ([attribute="value"])

Select elements with a specific attribute and value.

// Select all <a> elements with an href attribute value of "[Link]"


$("a[href='[Link]']")

You can also use partial matching for attributes:

 [attribute^='value']: Starts with the value.


 [attribute$='value']: Ends with the value.
 [attribute*='value']: Contains the value.

Example:

// Select all <input> elements whose name starts with "user"


$("input[name^='user']")

// Select all <a> elements whose href contains "example"


$("a[href*='example']")

6. Descendant Selector (ancestor descendant)

Select elements that are nested inside another element.

// Select all <li> elements inside a <ul> with class "menu"


$("[Link] li")
7. Child Selector (parent > child)

Select direct children of an element.

// Select direct <p> children of <div> elements


$("div > p")

8. Adjacent Sibling Selector (element + element)

Select an element that is immediately preceded by a specific sibling.

// Select the first <p> immediately after a <h2> element


$("h2 + p")

9. General Sibling Selector (element ~ element)

Select all sibling elements that follow a specific element.

// Select all <p> elements that follow an <h2> element


$("h2 ~ p")

10. Grouping Selector (selector, selector)

You can combine multiple selectors to select elements that match any of the conditions.

// Select all <p> and <div> elements


$("p, div")

11. Pseudo-Classes (:pseudo-class)

Pseudo-classes are used to select elements in a specific state, like the first element, last element,
or even elements with specific properties.

 :first - Select the first element in a group.


 :last - Select the last element in a group.
 :nth-child(n) - Select the nth child element.
 :eq(n) - Select the element at index n.
 :odd - Select odd-indexed elements.
 :even - Select even-indexed elements.

Examples:

// Select the first <li> element


$("li:first")

// Select the last <li> element


$("li:last")
// Select the third <li> element (index starts at 0)
$("li:eq(2)")

// Select odd-numbered <li> elements


$("li:odd")

// Select even-numbered <li> elements


$("li:even")

12. Not Selector (:not(selector))

Select all elements that do not match the given selector.

// Select all <p> elements except those with class "excluded"


$("p:not(.excluded)")

13. Filter Selector (:filter())

Use .filter() to find elements that match certain criteria.

// Select all <li> elements with class "active"


$("li").filter(".active")

14. Form Element Selectors

jQuery offers selectors specifically for form elements, making it easy to select inputs, buttons,
and other form-related elements.

 :input: Selects all input elements (like text, radio, checkbox, etc.).
 :text: Selects all text input elements.
 :checkbox: Selects all checkbox input elements.
 :radio: Selects all radio input elements.
 :selected: Selects all selected options in a <select> element.

Example:

// Select all input elements


$(":input")

// Select all checked checkboxes


$(":checkbox:checked")

// Select all selected options in a dropdown


$("select option:selected")

15. Parent Selector (parent)

You can traverse up the DOM to find parent elements.


// Find the parent <div> of an element with class "child"
$(".child").parent("div")

Examples:

1. Find all <div> elements and change their background color:


2. $("div").css("background-color", "yellow");
3. Find all elements with the class .highlight and hide them:
4. $(".highlight").hide();
5. Find the first <p> element inside a <div> and change its text:
6. $("div > p:first").text("This is the first paragraph.");
7. Select the element with ID #myElement and change its content:
8. $("#myElement").html("New content!");

Example: Selecting and Manipulating Elements

Here’s an example where we select a button by ID, and change its text when clicked:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Find Example</title>
<script src="[Link]
</head>
<body>

<button id="myButton" class="btn">Click Me</button>

<script>
// Select by ID and change text when clicked
$("#myButton").click(function() {
$(this).text("Button Clicked!");
});
</script>

</body>
</html>

Getting & Updating Elements Content :


In this example, when the button with id="myButton" is clicked, jQuery finds the button and
changes its text.

In jQuery, getting and updating elements in the DOM is straightforward with built-in methods.
Below is a guide on how to get data from elements and update them using jQuery.
1. Getting Elements in jQuery

 Get Text

To get the text content of an element, use the .text() method.

// Get text content of an element with id "myElement"


var text = $("#myElement").text();
[Link](text);

 Get HTML Content

To get the HTML content inside an element (including nested tags), use the .html() method.

// Get HTML content of an element with id "myElement"


var html = $("#myElement").html();
[Link](html);

 Get the Value of Form Elements

To get the value of input fields, text areas, and other form elements, use the .val() method.

// Get the value of an input element with id "myInput"


var value = $("#myInput").val();
[Link](value);

2. Updating Elements in jQuery

 Update Text

To update the text of an element, use the .text() method.

// Update the text content of an element with id "myElement"


$("#myElement").text("New Text Content!");

 Update HTML Content

To update the HTML content inside an element, use the .html() method.

// Update the HTML content of an element with id "myElement"


$("#myElement").html("<strong>Updated HTML</strong>");

 Update the Value of Form Elements

To update the value of an input field, use the .val() method.

// Set the value of an input element with id "myInput"


$("#myInput").val("New Input Value");
Example: Getting and Updating Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Get and Update Example</title>
<script src="[Link]
</head>
<body>

<div id="myElement">Original Text</div>


<input type="text" id="myInput" value="Original Input">
<button id="updateButton">Update Content</button>

<script>
// Get and display text from an element
var text = $("#myElement").text();
[Link]("Initial Text: " + text);

// Update the text when the button is clicked


$("#updateButton").click(function() {
$("#myElement").text("Updated Text!");
$("#myInput").val("Updated Input Value");
});
</script>

</body>
</html>

Inserting Elements and adding new content :


In jjQuery, inserting elements into the DOM (Document Object Model) can be done using
several methods. These methods allow you to insert new content either before, after, inside, or
as a sibling of existing elements.

Here’s a breakdown of the most common jQuery methods for inserting elements:

1. .append()

The .append() method is used to insert content inside an element, at the end of the selected
element(s).

Example:
// Insert a <p> element at the end of an element with id="container"
$("#container").append("<p>This is a new paragraph added at the end!</p>");
HTML Example:
<div id="container">
<div>Existing content</div>
</div>
<script>
$("#container").append("<p>This is a new paragraph added at the end!</p>");
</script>

2. .prepend()

The .prepend() method inserts content inside an element, at the beginning of the selected
element(s).

Example:
// Insert a <p> element at the beginning of an element with id="container"
$("#container").prepend("<p>This is a new paragraph added at the
beginning!</p>");

HTML Example:
<div id="container">
<div>Existing content</div>
</div>
<script>
$("#container").prepend("<p>This is a new paragraph added at the
beginning!</p>");
</script>

3. .before()

The .before() method inserts content before the selected element(s).

Example:
// Insert a <p> element before the element with id="myElement"
$("#myElement").before("<p>This is a new paragraph inserted before!</p>");

HTML Example:
<div id="myElement">Existing content</div>
<script>
$("#myElement").before("<p>This is a new paragraph inserted before!</p>");
</script>

4. .after()

The .after() method inserts content after the selected element(s).

Example:
// Insert a <p> element after the element with id="myElement"
$("#myElement").after("<p>This is a new paragraph inserted after!</p>");

HTML Example:
<div id="myElement">Existing content</div>
<script>
$("#myElement").after("<p>This is a new paragraph inserted after!</p>");
</script>

5. .appendTo()

The .appendTo() method is the inverse of .append(). It inserts content inside a selected
element, but with the order of operations reversed. Instead of appending content to an element,
you specify the target element(s).

Example:
// Insert a <p> element at the end of the element with id="container"
$("<p>This is a new paragraph added at the end!</p>").appendTo("#container");

6. .prependTo()

The .prependTo() method is the reverse of .prepend(). It inserts content at the beginning of
the selected element.

Example:
// Insert a <p> element at the beginning of the element with id="container"
$("<p>This is a new paragraph added at the
beginning!</p>").prependTo("#container");

7. .html()

You can also use .html() to replace the entire content of an element, or insert new content by
using it in combination with .append(), .prepend(), etc.

Example (replacing content):


// Replace all the content inside the element with id="container"
$("#container").html("<p>New content replaces all existing content.</p>");

8. .replaceWith()

The .replaceWith() method replaces the selected element(s) with new content.

Example:
// Replace the element with id="myElement" with a new paragraph
$("#myElement").replaceWith("<p>This element has been replaced!</p>");

HTML Example:
<div id="myElement">Old content</div>
<script>
$("#myElement").replaceWith("<p>This element has been replaced!</p>");
</script>

9. Insert Multiple Elements


You can insert multiple elements by using jQuery’s array-like syntax.

Example (multiple inserts):


// Insert multiple <p> elements at the end of the container
$("#container").append("<p>Paragraph 1</p><p>Paragraph 2</p>");

Here's an example to demonstrate how to insert elements using jQuery. The example includes
various methods such as .append(), .prepend(), .before(), .after(), .appendTo(), and
.prependTo().

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Insert Elements Example</title>
<script src="[Link]
<style>
#container {
width: 300px;
border: 1px solid #000;
padding: 10px;
}
.newElement {
color: blue;
margin-top: 10px;
}
</style>
</head>
<body>

<div id="container">
<div>Existing content in the container</div>
</div>

<button id="btnAppend">Append</button>
<button id="btnPrepend">Prepend</button>
<button id="btnBefore">Before</button>
<button id="btnAfter">After</button>
<button id="btnAppendTo">AppendTo</button>
<button id="btnPrependTo">PrependTo</button>
<button id="btnReplace">Replace</button>

<script>
$(document).ready(function() {

// Append new content at the end of #container


$("#btnAppend").click(function() {
$("#container").append("<div class='newElement'>Appended
content</div>");
});

// Prepend new content at the beginning of #container


$("#btnPrepend").click(function() {
$("#container").prepend("<div class='newElement'>Prepended
content</div>");
});

// Insert new content before #container


$("#btnBefore").click(function() {
$("#container").before("<div class='newElement'>Content inserted
before container</div>");
});

// Insert new content after #container


$("#btnAfter").click(function() {
$("#container").after("<div class='newElement'>Content inserted after
container</div>");
});

// Append content to #container using appendTo()


$("#btnAppendTo").click(function() {
$("<div class='newElement'>Content using
appendTo</div>").appendTo("#container");
});

// Prepend content to #container using prependTo()


$("#btnPrependTo").click(function() {
$("<div class='newElement'>Content using
prependTo</div>").prependTo("#container");
});

// Replace the content of #container


$("#btnReplace").click(function() {
$("#container").replaceWith("<div id='container'><div
class='newElement'>Replaced content</div></div>");
});

});
</script>

</body>
</html>

Getting & Setting Attributes :


In jQuery, getting and setting attributes is a common task. You can retrieve an element’s
attribute value or modify it using j jQuery methods.

Here’s a breakdown of how to get and set attributes using jQuery:

1. Getting Attributes

To get the value of an attribute, use the .attr() method. You pass the name of the attribute as
an argument to the .attr() method.
Example:
// Get the value of the "href" attribute of an anchor tag with id="myLink"
var hrefValue = $("#myLink").attr("href");
[Link](hrefValue); // Logs the value of the href attribute

HTML Example:
<a id="myLink" href="[Link] Example</a>
<script>
var hrefValue = $("#myLink").attr("href");
[Link](hrefValue); // Output: "[Link]
</script>

2. Setting Attributes

To set the value of an attribute, use the .attr() method by passing the attribute name and the
new value.

Example:
// Set the "href" attribute of an anchor tag with id="myLink"
$("#myLink").attr("href", "[Link]

HTML Example:
<a id="myLink" href="[Link] Example</a>
<script>
// Set new value for the href attribute
$("#myLink").attr("href", "[Link]
</script>

After running the code, the link's href will change to "[Link] instead of the
original "[Link]

3. Getting Multiple Attributes

You can also get multiple attributes by passing a comma-separated string of attribute names.

Example:
// Get the "href" and "title" attributes of an anchor tag
var attributes = $("#myLink").attr("href", "title");
[Link](attributes); // Will return the href and title attributes

4. Setting Multiple Attributes at Once

You can also set multiple attributes at once by passing an object where the keys are attribute
names and the values are the new attribute values.

Example:
// Set multiple attributes on an element
$("#myLink").attr({
"href": "[Link]
"title": "Click to visit new link",
"target": "_blank"
});

This will:

 Change the href attribute to "[Link]


 Set the title attribute to "Click to visit new link".
 Set the target attribute to "_blank", which opens the link in a new tab

5. Remove Attributes

To remove an attribute, use the .removeAttr() method.

Example:
// Remove the "href" attribute from an anchor tag
$("#myLink").removeAttr("href");

HTML Example:
<a id="myLink" href="[Link] Example</a>
<script>
// Remove the href attribute
$("#myLink").removeAttr("href");
</script>

After running this code, the href attribute will be removed from the anchor tag.

Example - Complete Code:

Here’s a simple example that demonstrates getting and setting attributes with jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Get and Set Attributes</title>
<script src="[Link]
</head>
<body>

<a id="myLink" href="[Link] title="Example Link">Visit


Example</a>

<script>
$(document).ready(function() {

// Get the "href" attribute


var hrefValue = $("#myLink").attr("href");
[Link]("Current href: " + hrefValue); // Output:
[Link]

// Set a new "href" attribute


$("#myLink").attr("href", "[Link]
[Link]("Updated href: " + $("#myLink").attr("href")); // Output:
[Link]

// Set multiple attributes at once


$("#myLink").attr({
"title": "New Link",
"target": "_blank"
});

// Remove the "title" attribute


$("#myLink").removeAttr("title");
[Link]("Title attribute removed: " + $("#myLink").attr("title"));
// Output: undefined

// Working with data attributes


$("#myLink").data("id", 12345);
[Link]("Data ID: " + $("#myLink").data("id")); // Output: 12345
});
</script>

</body>
</html>

Getting & Setting CSS Properties :


In jQuery, you can get and set CSS properties using the .css() method. This method allows you
to both retrieve the value of a CSS property from an element and apply new styles dynamically.

1. Getting CSS Properties

To get the value of a CSS property, you simply use the .css() method and pass the property
name as a string.

Example (Getting CSS property):


// Get the value of the "color" CSS property of an element with
id="myElement"
var color = $("#myElement").css("color");
[Link](color); // Logs the current color property (e.g., rgb(0, 0, 0)
for black)

HTML Example:
<div id="myElement" style="color: red;">Hello, World!</div>
<script>
var color = $("#myElement").css("color");
[Link](color); // Output: "rgb(255, 0, 0)" (or "red" in some
browsers)
</script>

 This will return the computed value of the CSS property, which may be in a format like
rgb(255, 0, 0) rather than red.
2. Setting CSS Properties

To set a CSS property, you can pass both the property name and its value to the .css() method.

Example (Setting a CSS property):


// Set the "color" property of an element with id="myElement" to blue
$("#myElement").css("color", "blue");

HTML Example:
<div id="myElement" style="color: red;">Hello, World!</div>
<script>
$("#myElement").css("color", "blue"); // The text color will change to
blue
</script>

3. Setting Multiple CSS Properties

You can also set multiple CSS properties at once by passing an object where the property
names are the keys and the property values are the values.

Example (Setting multiple CSS properties):


// Set multiple CSS properties
$("#myElement").css({
"color": "green",
"font-size": "20px",
"background-color": "yellow"
});

HTML Example:
<div id="myElement" style="color: red;">Hello, World!</div>
<script>
$("#myElement").css({
"color": "green",
"font-size": "20px",
"background-color": "yellow"
});
</script>

In this case, all three CSS properties ( color, font-size, and background-color) are set at
once.

4. Getting and Setting CSS Properties Dynamically

You can also get and set CSS properties dynamically using variables or input from users.

Example:
// Set CSS properties dynamically using variables
var newColor = "orange";
var newFontSize = "18px";

$("#myElement").css({
"color": newColor,
"font-size": newFontSize
});

6. Example - Complete Code:

Here’s a full example that demonstrates how to get and set CSS properties using jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Get and Set CSS Properties</title>
<script src="[Link]
<style>
#myElement {
color: red;
font-size: 16px;
background-color: lightgray;
padding: 10px;
width: 200px;
height: 50px;
}
</style>
</head>
<body>

<div id="myElement">Hello, World!</div>


<button id="btnGet">Get CSS Property</button>
<button id="btnSet">Set CSS Property</button>
<button id="btnMultiple">Set Multiple CSS Properties</button>

<script>
$(document).ready(function() {
// Get CSS property
$("#btnGet").click(function() {
var color = $("#myElement").css("color");
[Link]("Current color: " + color); // Logs the current color
property
});

// Set CSS property


$("#btnSet").click(function() {
$("#myElement").css("color", "blue"); // Change color to blue
$("#myElement").css("font-size", "22px"); // Change font size to
22px
});

// Set multiple CSS properties


$("#btnMultiple").click(function() {
$("#myElement").css({
"color": "green",
"font-size": "24px",
"background-color": "yellow",
"width": "250px",
"height": "70px"
});
});
});
</script>

</body>
</html>

Explanation:

 Get CSS Property: When the "Get CSS Property" button is clicked, it will log the
current color of the element with id myElement.
 Set CSS Property: When the "Set CSS Property" button is clicked, it changes the color
and font size of #myElement.
 Set Multiple CSS Properties: When the "Set Multiple CSS Properties" button is clicked,
it applies multiple CSS styles to the #myElement element at once.

Each() :
The $.each() function in jQuery is used to iterate over a collection of items, like arrays or
objects, and perform some action for each element.

Here’s the basic syntax for $.each():

For Arrays:
$.each(array, function(index, value) {
// Code to be executed for each element
});

 array: The array you want to iterate over.


 index: The current index of the array.
 value: The value at the current index.

Example:
let fruits = ['Apple', 'Banana', 'Cherry'];

$.each(fruits, function(index, value) {


[Link]('Index: ' + index + ', Value: ' + value);
});

Output:
Index: 0, Value: Apple
Index: 1, Value: Banana
Index: 2, Value: Cherry

For Objects:
$.each(object, function(key, value) {
// Code to be executed for each key-value pair
});

 object: The object you want to iterate over.


 key: The current key of the object.
 value: The value associated with the current key.

Example:
let person = {
name: 'John',
age: 30,
job: 'Developer'
};

$.each(person, function(key, value) {


[Link](key + ': ' + value);
});

Output:

name: John
age: 30
job: Developer

Important Notes:

 You can also use return false; inside the $.each() function to break the loop early,
similar to break in traditional loops.
 If you return true, the loop continues to the next iteration.!

Sure! Here's an example using $.each() in jQuery to iterate over both an array and an object:

Example 1: Iterating over an array


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery $.each() Example</title>
<script src="[Link]
</head>
<body>

<div id="output"></div>

<script>
// Array of fruits
var fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

// Using $.each() to iterate over the array


$.each(fruits, function(index, value) {
$('#output').append('<p>Index: ' + index + ', Value: ' + value +
'</p>');
});
</script>

</body>
</html>

Explanation:

 The array fruits contains 4 fruit names.


 The $.each() function iterates over the array and appends each fruit's index and value to
the #output div.

Example 2: Iterating over an object


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery $.each() Example</title>
<script src="[Link]
</head>
<body>

<div id="output"></div>

<script>
// Object with person's details
var person = {
name: 'John Doe',
age: 30,
job: 'Developer'
};

// Using $.each() to iterate over the object


$.each(person, function(key, value) {
$('#output').append('<p>' + key + ': ' + value + '</p>');
});
</script>

</body>
</html>
Explanation:

 The person object contains keys like name, age, and job, with corresponding values.
 The $.each() function iterates over the object and appends each key-value pair to the
#output div.

Expected Output for both examples:

In Example 1, you’ll see:

Index: 0, Value: Apple


Index: 1, Value: Banana
Index: 2, Value: Orange
Index: 3, Value: Mango

In Example 2, you’ll see:

name: John Doe


age: 30
job: Developer

This demonstrates how $.each() works for both arrays and objects!

Events :
In jQuery, events allow you to execute a function when something happens on a specific element
or group of elements, such as when a user clicks a button, types in a field, hovers over an
element, etc.

Basic Event Binding in jQuery

The basic syntax for attaching an event handler is:

$(selector).event(function)

Where:

 selector: The element or group of elements you want to target (e.g., button, #id,
.class).
 event: The type of event you want to listen for (e.g., click, hover, keypress).
 function: The callback function to run when the event occurs.

Common Events in jQuery:

 click(): Triggered when an element is clicked.


 keypress(): Triggered when a key is pressed down in a text field or input.
 keydown(): Triggered when a key is pressed.
 keyup(): Triggered when a key is released.
 hover(): Triggered when the mouse pointer enters or leaves an element.
 focus(): Triggered when an input element gains focus.
 blur(): Triggered when an input element loses focus.
 change(): Triggered when an input, select, or textarea value changes.
 submit(): Triggered when a form is submitted.

Example 1: click event

Here’s an example where we show an alert when a button is clicked:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery click Event</title>
<script src="[Link]
</head>
<body>

<button id="myButton">Click me</button>

<script>
$(document).ready(function() {
$('#myButton').click(function() {
alert("Button clicked!");
});
});
</script>

</body>
</html>

Explanation:

 When the button with id="myButton" is clicked, it triggers the alert "Button clicked!".
 The $(document).ready() ensures the code runs after the page is fully loaded.

Example 2: hover event

Here’s an example where the background color of a div changes when the mouse hovers over it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery hover Event</title>
<script src="[Link]
<style>
#hoverDiv {
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>

<div id="hoverDiv">Hover over me!</div>

<script>
$(document).ready(function() {
$('#hoverDiv').hover(
function() {
$(this).css('background-color', 'yellow'); // Change color on
mouse enter
},
function() {
$(this).css('background-color', 'lightblue'); // Change color
on mouse leave
}
);
});
</script>

</body>
</html>

Explanation:

 The hover() event listens for both mouseenter and mouseleave events.
 When the mouse enters the div, the background color changes to yellow.
 When the mouse leaves, the background color reverts to light blue.

Example 3: keypress event

Here’s an example where we show the pressed key in an input field:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery keypress Event</title>
<script src="[Link]
</head>
<body>

<input type="text" id="textInput" placeholder="Type something...">

<script>
$(document).ready(function() {
$('#textInput').keypress(function(event) {
alert('You pressed the key: ' + [Link]);
});
});
</script>

</body>
</html>

Explanation:

 When a key is pressed in the input field, an alert will pop up showing which key was
pressed.
 [Link] contains the value of the key that was pressed.

Example 4: change event

Here’s an example where a message is shown when a user selects a different option from a
dropdown:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery change Event</title>
<script src="[Link]
</head>
<body>

<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

<div id="message"></div>

<script>
$(document).ready(function() {
$('#mySelect').change(function() {
var selectedValue = $(this).val(); // Get the selected option's
value
$('#message').text('You selected: ' + selectedValue);
});
});
</script>

</body>
</html>

Explanation:
 The change() event triggers when the user selects a new option in the dropdown.
 It then updates the #message div with the selected option’s value.

Event Delegation

Sometimes, it’s important to bind events to dynamically added elements. jQuery provides event
delegation for this. You use .on() to attach event handlers, even for elements that don’t exist
yet.

$(document).on('click', '.dynamic-button', function() {


alert('Dynamically added button clicked!');
});

Explanation:

 .on() is used to listen for events on elements that might not exist at the time the code is
initially run but may be added later.

Event Methods

Some useful jQuery methods for handling events are:

 $(selector).click(): Binds a click event handler to the selected element.


 $(selector).on(event, function): A more flexible method for binding events,
allowing for delegation.
 $(selector).off(event): Unbinds an event handler.

Event Object :
In jQuery, the event object is passed to the event handler function automatically whenever an
event occurs. This object contains useful information about the event, such as the element that
triggered the event, the type of event, and additional properties like the mouse coordinates or key
that was pressed.

Here’s a closer look at the event object and some of its commonly used properties:

Common Properties of the Event Object

1. type: The type of event that triggered the handler (e.g., click, keypress, keydown).
2. target: The element that triggered the event.
3. currentTarget: The element to which the event handler is currently attached (useful in
event delegation).
4. keyCode (or which): The key code of the key pressed in a keypress, keydown, or keyup
event.
5. pageX and pageY: The mouse coordinates relative to the document (useful for mouse
events like click, mousemove).
6. clientX and clientY: The mouse coordinates relative to the viewport.
7. preventDefault(): A method that can be called to prevent the default action of the
event (e.g., stopping form submission or preventing a link from navigating).
8. stopPropagation(): A method to stop the event from bubbling up to parent elements
(useful in event delegation).
9. which: The key or mouse button that triggered the event (in keydown, keypress, or
click events).
10. shiftKey, altKey, ctrlKey: Boolean values indicating whether the Shift, Alt, or Ctrl
keys were pressed during the event.

Example 1: Mouse Event (click) with Event Object

Here’s an example using the event object to get information about a mouse click event:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Event Object</title>
<script src="[Link]
</head>
<body>

<button id="myButton">Click me</button>

<script>
$(document).ready(function() {
$('#myButton').click(function(event) {
// Event object properties
var mouseX = [Link]; // Mouse X position
var mouseY = [Link]; // Mouse Y position
var element = [Link]; // The element that was clicked

// Output the event information


alert('Mouse clicked at X: ' + mouseX + ', Y: ' + mouseY + '. You
clicked on the ' + [Link]);
});
});
</script>

</body>
</html>

Explanation:

 When the button is clicked, the event object is passed to the event handler.
 We access the mouse's X and Y position ([Link] and [Link]), and we also
log the element that was clicked ([Link]).

Example 2: Key Event (keydown) with Event Object


Here’s an example using the event object to get information about a key press event:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Event Object</title>
<script src="[Link]
</head>
<body>

<input type="text" id="textInput" placeholder="Press any key...">

<script>
$(document).ready(function() {
$('#textInput').keydown(function(event) {
// Event object properties
var keyPressed = [Link]; // Key that was pressed
var keyCode = [Link] || [Link]; // Key code
var isCtrlPressed = [Link]; // Whether the Ctrl key was
pressed

// Output the event information


alert('Key pressed: ' + keyPressed + ' (Key code: ' + keyCode +
'). Ctrl pressed? ' + isCtrlPressed);
});
});
</script>

</body>
</html>

Explanation:

 When a key is pressed in the text input field, the keydown event is triggered.
 We use [Link] to get the key that was pressed, [Link] (or [Link]) to
get the key code, and [Link] to check if the Ctrl key was pressed.

Example 3: Preventing Default Action with preventDefault()

Here’s an example of using preventDefault() to stop the default action of a form submission:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Event Object - preventDefault</title>
<script src="[Link]
</head>
<body>
<form id="myForm">
<input type="text" name="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
// Prevent the form from submitting
[Link]();

// Output a message
alert('Form submission has been prevented!');
});
});
</script>

</body>
</html>

Explanation:

 The form has a submit event attached to it.


 Inside the event handler, we use [Link]() to prevent the form from
actually submitting (i.e., the default form submission behavior).
 Instead, we display an alert message when the form is "submitted".

Example 4: Stopping Event Propagation with stopPropagation()

In this example, we use stopPropagation() to stop the event from bubbling up to parent
elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Event Object - stopPropagation</title>
<script src="[Link]
</head>
<body>

<div id="outerDiv" style="width: 300px; height: 300px; background-color:


lightgray;">
<button id="innerButton">Click me</button>
</div>

<script>
$(document).ready(function() {
// Outer div click event
$('#outerDiv').click(function() {
alert('Outer div clicked!');
});
// Inner button click event
$('#innerButton').click(function(event) {
// Stop the event from propagating to the outer div
[Link]();
alert('Button clicked!');
});
});
</script>

</body>
</html>

Explanation:

 The outer div has a click event handler attached, and it alerts "Outer div clicked!" when
clicked.
 The inner button has a click event handler that stops the event from bubbling up to the
outer div by calling [Link]().
 So, when you click the button, only the button's alert is shown, not the outer div’s.

Effects & Animations :


In jQuery, effects are a set of built-in methods that allow you to add visual effects to HTML
elements, like hiding, showing, fading, sliding, and animating. These effects can be applied to
elements when triggered by user actions (e.g., clicks, hover), or you can use them
programmatically.

Here’s an overview of some common effects in jQuery, including how to use them:

1. Hide and Show Elements

You can hide or show elements with animation, or instantly.

.hide() and .show()

 .hide(): Hides an element.


 .show(): Displays a hidden element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Hide and Show Example</title>
<script src="[Link]
</head>
<body>
<button id="hideBtn">Hide Text</button>
<button id="showBtn">Show Text</button>
<p id="text">This is some text that can be hidden or shown.</p>

<script>
$(document).ready(function() {
$('#hideBtn').click(function() {
$('#text').hide(); // Hide the paragraph
});

$('#showBtn').click(function() {
$('#text').show(); // Show the paragraph
});
});
</script>

</body>
</html>

2. Fade In and Fade Out

 .fadeIn(): Gradually makes an element visible.


 .fadeOut(): Gradually makes an element invisible.
 .fadeToggle(): Toggles between fadeIn and fadeOut (if the element is visible, it fades
out; if it is hidden, it fades in).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Fade Example</title>
<script src="[Link]
</head>
<body>

<button id="fadeBtn">Toggle Fade</button>


<p id="fadeText" style="display:none;">This text will fade in and out.</p>

<script>
$(document).ready(function() {
$('#fadeBtn').click(function() {
$('#fadeText').fadeToggle(); // Toggle fade in/out
});
});
</script>

</body>
</html>

3. Slide Up and Slide Down


 .slideUp(): Hides an element with a sliding effect.
 .slideDown(): Displays an element with a sliding effect.
 .slideToggle(): Toggles between slide up and slide down.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Slide Example</title>
<script src="[Link]
</head>
<body>

<button id="slideBtn">Toggle Slide</button>


<p id="slideText" style="display:none;">This text will slide up and down.</p>

<script>
$(document).ready(function() {
$('#slideBtn').click(function() {
$('#slideText').slideToggle(); // Toggle slide up/down
});
});
</script>

</body>
</html>

4. Animating Elements using CSS properties :

You can animate the CSS properties of an element using .animate().

.animate()

 .animate() allows you to apply custom animations by changing CSS properties over
time.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Animate Example</title>
<script src="[Link]
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>

<button id="animateBtn">Animate Box</button>


<div id="box"></div>

<script>
$(document).ready(function() {
$('#animateBtn').click(function() {
$('#box').animate({
width: '300px', // Change width
height: '300px', // Change height
opacity: 0.5, // Change opacity
left: '+=100px' // Move to the right
}, 1000); // Animation duration (in milliseconds)
});
});
</script>

</body>
</html>

Explanation:

 The .animate() function is used to modify the CSS properties of the #box element.
 It gradually changes the box's size, opacity, and position over 1 second (1000
milliseconds).

Traversing the DOM :


Traversing the DOM (Document Object Model) in jQuery refers to the process of navigating
through HTML elements to select specific elements and manipulate them. jQuery provides a set
of useful methods that allow you to traverse the DOM tree in a variety of ways, making it easier
to find child elements, parent elements, siblings, and other related nodes.

Here are the key methods you can use to traverse the DOM with jQuery:

1. .parent()

This method gets the parent element of the selected element.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .parent() Example</title>
<script src="[Link]
</head>
<body>

<div>
<p>This is a paragraph inside a div.</p>
</div>

<script>
$(document).ready(function() {
$('p').parent().css('border', '2px solid red'); // Add border to the
parent div
});
</script>

</body>
</html>

Explanation:

 The parent() method selects the immediate parent element of the p tag (which is the
div in this case) and applies a red border to it.

2. .children()

This method gets all child elements of the selected element.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .children() Example</title>
<script src="[Link]
</head>
<body>

<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>

<script>
$(document).ready(function() {
$('div').children().css('color', 'blue'); // Apply blue color to all
children (p tags)
});
</script>

</body>
</html>
Explanation:

 The children() method selects all the child elements (the p tags) inside the div and
applies a blue color to them.

3. .find()

This method is used to search for descendant elements that match the given selector within the
selected element(s).

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .find() Example</title>
<script src="[Link]
</head>
<body>

<div>
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
</div>

<script>
$(document).ready(function() {
$('div').find('.second').css('font-size', '20px'); // Change font
size of the second paragraph
});
</script>

</body>
</html>

Explanation:

 The find() method searches for .second class elements within the div and changes the
font size of the second paragraph.

4. .siblings()

This method gets all sibling elements (elements that share the same parent) of the selected
element.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .siblings() Example</title>
<script src="[Link]
</head>
<body>

<div>
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
<p class="third">Third paragraph</p>
</div>

<script>
$(document).ready(function() {
$('.second').siblings().css('color', 'green'); // Change the color
of the sibling paragraphs
});
</script>

</body>
</html>

Explanation:

 The siblings() method selects all sibling elements of the .second paragraph (the
first and third paragraphs) and changes their text color to green.

5. .next()

This method gets the next sibling of the selected element.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .next() Example</title>
<script src="[Link]
</head>
<body>

<div>
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
</div>

<script>
$(document).ready(function() {
$('.first').next().css('background-color', 'yellow'); // Apply
yellow background to the next sibling
});
</script>
</body>
</html>

Explanation:

 The next() method selects the next sibling (second paragraph) after the first and
applies a yellow background color.

6. .prev()

This method gets the previous sibling of the selected element.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .prev() Example</title>
<script src="[Link]
</head>
<body>

<div>
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
</div>

<script>
$(document).ready(function() {
$('.second').prev().css('font-weight', 'bold'); // Make the previous
sibling bold
});
</script>

</body>
</html>

Explanation:

 The prev() method selects the previous sibling (first paragraph) before the second and
applies bold styling to it.

7. .closest()

This method finds the closest ancestor of the selected element that matches the given selector. It
traverses up the DOM tree.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .closest() Example</title>
<script src="[Link]
</head>
<body>

<div class="outer">
<div class="inner">
<p>Paragraph inside inner div</p>
</div>
</div>

<script>
$(document).ready(function() {
$('p').closest('.outer').css('border', '2px solid blue'); // Apply
border to the closest outer div
});
</script>

</body>
</html>

Explanation:

 The closest() method finds the nearest .outer ancestor of the p tag and applies a blue
border to it.

8. .contents()

This method gets all child nodes (including text nodes and elements) inside the selected element.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .contents() Example</title>
<script src="[Link]
</head>
<body>

<div>
<p>First paragraph</p>
<!-- A comment -->
<p>Second paragraph</p>
</div>

<script>
$(document).ready(function() {
$('div').contents().filter('p').css('color', 'purple'); // Apply
purple color to all p tags
});
</script>

</body>
</html>

Explanation:

 The contents() method gets all child nodes (including text nodes and comments) inside
the div.
 The filter() method is then used to select only the p elements and apply a purple color
to them.

JavaScript Libraries :
In the context of jQuery, JavaScript libraries refer to external libraries or plugins that you can
use in conjunction with jQuery to extend its functionality or simplify certain tasks. jQuery itself
is a powerful library, but many other libraries exist to complement it or offer specific features,
ranging from animations and user interfaces to AJAX interactions and data visualization.

Here are some notable JavaScript libraries and plugins that are commonly used with jQuery:

 jQuery UI: For adding rich UI components.


 Bootstrap: For responsive web design and UI components.
 Select2: For enhanced dropdowns.
 jQuery Validation: For form validation.
 Slick Carousel: For creating carousels and sliders.
 jQuery Countdown: For creating countdown timers.

1. jQuery UI

jQuery UI is an official library built on top of jQuery. It provides a set of pre-built user interface
(UI) components and interactions, such as sliders, date pickers, dialogs, and drag-and-drop
functionality. This library allows you to add sophisticated UI features with minimal effort.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Example</title>
<link rel="stylesheet"
href="[Link]
<script src="[Link]
<script src="[Link]
[Link]"></script>
</head>
<body>
<div id="datepicker"></div> <!-- A jQuery UI date picker -->

<script>
$(document).ready(function() {
// Initialize the datepicker widget
$('#datepicker').datepicker();
});
</script>

</body>
</html>

Features of jQuery UI:

 Draggable, resizable, sortable elements


 Dialog boxes and modal windows
 Autocomplete widgets
 Accordion menus and tabs

2. Bootstrap (with jQuery)

Bootstrap is a popular front-end framework that uses jQuery to handle UI interactions. It offers
a responsive grid system, navigation components, and various UI components (like buttons,
modals, and tooltips). While Bootstrap 5 no longer requires jQuery, it is still commonly used
with earlier versions (4.x and below).

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap with jQuery Example</title>
<link rel="stylesheet"
href="[Link]
<script src="[Link]
<script
src="[Link]
cript>
</head>
<body>

<!-- Bootstrap Modal -->


<div class="modal" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Bootstrap Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>This is a modal example using Bootstrap and jQuery.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function() {
// Show the modal
$('#myModal').modal('show');
});
</script>

</body>
</html>

Features of Bootstrap:

 Responsive grid system


 Components for navigation, modals, alerts, etc.
 Predefined styles for buttons, tables, forms, etc.

3. Select2

Select2 is a jQuery plugin that enhances the standard HTML <select> element. It allows you to
create search-friendly, multi-select, and dynamic dropdown lists with features like tagging,
searching, and remote data loading.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select2 Example</title>
<link
href="[Link]
rel="stylesheet" />
<script src="[Link]
<script
src="[Link]
ript>
</head>
<body>

<select id="mySelect" style="width: 300px;">


<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
</select>

<script>
$(document).ready(function() {
// Initialize Select2 on the select element
$('#mySelect').select2();
});
</script>

</body>
</html>

Features of Select2:

 Searchable dropdown
 Multi-select
 Dynamic option loading (via AJAX)
 Custom styling

4. jQuery Validation

jQuery Validation is a library that provides an easy way to validate forms. It supports common
validation rules like required fields, email format, and custom validations. It also provides visual
feedback for invalid inputs.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Validation Example</title>
<script src="[Link]
<script src="[Link]
validation@1.19.5/dist/[Link]"></script>
</head>
<body>

<form id="myForm">
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
// Apply form validation
$('#myForm').validate({
rules: {
username: "required",
email: {
required: true,
email: true
}
},
messages: {
username: "Please enter your username",
email: "Please enter a valid email address"
}
});
});
</script>

</body>
</html>

Features of jQuery Validation:

 Client-side validation for forms


 Built-in rules (e.g., required, email, minlength)
 Custom validation methods
 Error messages and styling

5. Slick Carousel

Slick is a jQuery carousel plugin that allows you to create responsive, customizable sliders and
carousels for images, videos, or content.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick Carousel Example</title>
<link rel="stylesheet" href="[Link]
carousel@1.8.1/slick/[Link]"/>
<link rel="stylesheet" href="[Link]
carousel@1.8.1/slick/[Link]"/>
<script src="[Link]
<script src="[Link]
carousel@1.8.1/slick/[Link]"></script>
</head>
<body>

<div class="carousel">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div>

<script>
$(document).ready(function(){
$('.carousel').slick({
dots: true, // Show navigation dots
infinite: true, // Infinite loop
speed: 500,
fade: true,
cssEase: 'linear'
});
});
</script>

</body>
</html>

Features of Slick Carousel:

 Fully responsive
 Infinite looping
 Dots, arrows, and custom navigation
 Lazy loading of images

6. jQuery Countdown

The jQuery Countdown plugin allows you to create countdown timers for specific dates or
times.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Countdown Example</title>
<script src="[Link]
<script
src="[Link]
[Link]"></script>
</head>
<body>

<div id="countdown"></div>

<script>
$('#countdown').countdown('2025/12/31', function(event) {
$(this).html([Link]('%D days %H:%M:%S'));
});
</script>

</body>
</html>
Features of jQuery Countdown:

 Countdown timer to a specific date


 Customizable format
 Automatic update every second

Working with Forms in JQuery :


Working with forms in jQuery allows you to easily manipulate form elements, validate input,
handle form submissions, and more. jQuery provides a wide range of methods that make
working with forms intuitive and efficient.

Here's a breakdown of how you can work with forms using jQuery:

1. Selecting Form Elements

You can use jQuery to select form elements such as inputs, selects, text areas, and buttons.

Example: Selecting form elements


<form id="myForm">
<input type="text" name="username" placeholder="Enter Username"
id="username">
<input type="password" name="password" placeholder="Enter Password"
id="password">
<button type="submit" id="submitBtn">Submit</button>
</form>

<script>
$(document).ready(function() {
// Select input fields and button
$('#username').val('JohnDoe'); // Set value for username field
$('#password').val('password123'); // Set value for password field
});
</script>

2. Handling Form Submission

jQuery provides a simple way to handle form submissions. You can prevent the default form
submission behavior (e.g., page reload) and submit the form via AJAX or just handle the
submission event.

Example: Handling form submission with .submit() and .preventDefault()


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission Example</title>
<script src="[Link]
</head>
<body>

<form id="myForm">
<input type="text" name="username" placeholder="Enter Username"
id="username">
<input type="password" name="password" placeholder="Enter Password"
id="password">
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
// Handle form submission
$('#myForm').submit(function(event) {
[Link](); // Prevent the default form submission
(page reload)
alert('Form submitted!');
// You can also add AJAX code to submit the form data here
});
});
</script>

</body>
</html>

Explanation:

 .submit() is used to bind a submit event handler to the form.


 [Link]() prevents the default form submission (which would reload
the page).
 This can be useful for validating or submitting the form data via AJAX.

3. Validating Form Inputs

jQuery makes it easy to validate form inputs before submission. You can check if the inputs are
empty or match a specific pattern (e.g., for email, phone numbers, etc.).

Example: Validating a form


<form id="myForm">
<input type="text" name="username" id="username" placeholder="Username"
required>
<input type="password" name="password" id="password"
placeholder="Password" required>
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
var isValid = true;

// Check if username is empty


if ($('#username').val() == '') {
alert('Username is required');
isValid = false;
}

// Check if password is empty


if ($('#password').val() == '') {
alert('Password is required');
isValid = false;
}

// If any field is invalid, prevent form submission


if (!isValid) {
[Link]();
}
});
});
</script>

Explanation:

 Before submitting the form, we validate that both the username and password fields are
filled. If any field is empty, the form submission is prevented using
[Link]().

4. Getting Form Input Values

You can retrieve the values of form elements like text fields, checkboxes, radio buttons, etc.,
using .val().

Example: Getting input values


<form id="myForm">
<input type="text" name="username" id="username" placeholder="Username">
<input type="password" name="password" id="password"
placeholder="Password">
<input type="checkbox" name="rememberMe" id="rememberMe"> Remember Me
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
[Link]();

var username = $('#username').val(); // Get username value


var password = $('#password').val(); // Get password value
var rememberMe = $('#rememberMe').prop('checked'); // Get
checkbox status

[Link]('Username:', username);
[Link]('Password:', password);
[Link]('Remember Me:', rememberMe);
});
});
</script>

Explanation:

 .val() is used to get the values of text inputs.


 .prop('checked') is used to get the state of checkboxes or radio buttons.

5. Setting Form Input Values

You can also set the values of form elements using .val().

Example: Setting form input values


<form id="myForm">
<input type="text" name="username" id="username" placeholder="Username">
<input type="password" name="password" id="password"
placeholder="Password">
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
// Set values on page load
$('#username').val('JohnDoe');
$('#password').val('password123');

$('#myForm').submit(function(event) {
[Link]();
alert('Form submitted with username: ' + $('#username').val());
});
});
</script>

Explanation:

 .val('value') is used to set the value of the form element.

6. Using .serialize() to Submit Form Data

The .serialize() method is useful for gathering all form data into a query string format (URL-
encoded), which can then be sent via an AJAX request.

Example: Serialize form data and submit via AJAX


<form id="myForm">
<input type="text" name="username" id="username" placeholder="Username">
<input type="password" name="password" id="password"
placeholder="Password">
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
[Link]();

var formData = $(this).serialize(); // Serialize form data

$.ajax({
type: 'POST',
url: '[Link]', // Replace with your server
endpoint
data: formData,
success: function(response) {
[Link]('Form submitted successfully:', response);
},
error: function(xhr, status, error) {
[Link]('Error:', error);
}
});
});
});
</script>

Explanation:

 .serialize() converts the form data into a query string (e.g.,


username=JohnDoe&password=secret).
 The form data is then submitted via AJAX to the server.

7. Handling Radio Buttons and Checkboxes

You can easily handle radio buttons and checkboxes in jQuery by using .prop('checked').

Example: Handling radio buttons


<form id="myForm">
<input type="radio" name="gender" value="Male" id="male"> Male
<input type="radio" name="gender" value="Female" id="female"> Female
<button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
[Link]();

var gender = $('input[name="gender"]:checked').val(); // Get


selected radio button value
[Link]('Selected gender:', gender);
});
});
</script>

Explanation:
 input[name="gender"]:checked selects the currently checked radio button within the
gender group.

AJAX and JQuery :


In jQuery, AJAX is typically handled using the $.ajax() function or shorthand methods like
$.get() and $.post(). These methods provide an easy-to-use interface for making
asynchronous HTTP requests and handling the response.

 AJAX in jQuery allows you to send and receive data from a server asynchronously,
enabling you to update parts of a webpage without reloading the entire page.
 The $.ajax() method is powerful and flexible, but jQuery also provides shorthand
methods like $.get() and $.post() for simplicity.
 It’s widely used for making web applications feel more responsive and dynamic by
reducing page reloads and enabling real-time data updates.

jQuery AJAX Syntax:

Here’s the basic syntax for $.ajax():

$.ajax({
url: 'your-api-url', // The URL to send the request to
type: 'GET', // The HTTP method (GET, POST, etc.)
dataType: 'json', // The type of data expected back from the server
(json, xml, etc.)
data: { // Optional data to send with the request
key: 'value'
},
success: function(response) { // Callback function if the request is
successful
[Link](response); // Handle the response data here
},
error: function(xhr, status, error) { // Callback if an error occurs
[Link](status, error);
}
});

Explanation of the Parameters:

 url: The URL to which the request is sent. This can be an API endpoint or any other URL
you want to fetch data from.
 type: The HTTP request method, usually GET or POST. GET is used to retrieve data, and
POST is used to send data to the server.
 dataType: The type of data that is expected back from the server. This can be JSON,
XML, HTML, etc. In modern applications, json is often used.
 data: Data that you want to send along with the request. This is usually included with
POST requests, but can also be used in GET requests as URL parameters.
 success: A callback function that is executed if the request is successful. The server’s
response is passed to this function.
 error: A callback function that is executed if the request fails for any reason. It receives
details of the error.

Example of AJAX in jQuery (GET Request):

Here’s an example of how to use $.ajax() to fetch some data from an API using the GET
method:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Example</title>
<script src="[Link]
<script>
$(document).ready(function() {
$('#loadData').click(function() {
$.ajax({
url: '[Link] // Example API
type: 'GET',
dataType: 'json', // Expecting JSON response
success: function(response) {
$('#content').html('<h3>' + [Link] + '</h3><p>' +
[Link] + '</p>');
},
error: function(xhr, status, error) {
[Link]('Error:', error);
}
});
});
});
</script>
</head>
<body>
<button id="loadData">Load Post Data</button>
<div id="content"></div>
</body>
</html>

Explanation of the Example:

 When the "Load Post Data" button is clicked, an AJAX request is made to the
jsonplaceholder API to fetch a post (with ID 1).
 On success, the success function is called, and the response (which is JSON data) is
used to dynamically display the title and body of the post inside the #content div.
 If there’s an error (for example, if the request fails), the error function will log an error
message.

jQuery AJAX Shorthand Methods:

jQuery also provides shorthand methods for common HTTP requests:

 $.get(): A simplified way to perform a GET request.


 $.post(): A simplified way to perform a POST request.
 $.getJSON(): A shorthand for making a GET request and expecting a JSON response.

Example of $.get():
$.get('[Link] function(response) {
$('#content').html('<h3>' + [Link] + '</h3><p>' + [Link] +
'</p>');
});

Example of $.post():
$.post('[Link] {
title: 'foo',
body: 'bar',
userId: 1
}, function(response) {
[Link]('Post Created:', response);
});
Common Uses of AJAX in jQuery:

1. Dynamic Content Loading: Load content dynamically without reloading the page.
o Example: Load user profiles or posts from a server.
2. Form Submission: Submit forms asynchronously without page reload.
o Example: Send user data to a server when a form is submitted.
3. Real-Time Updates: Fetch new data from the server at regular intervals.
o Example: Live notifications or stock market data updates.

You might also like