JQuery Unit-1
Uploaded by
Tulshiram KambleJQuery Unit-1
Uploaded by
Tulshiram KambleIntroduction to jQuery
Unit-1
1.1 jQuery Introduction
• jQuery is a lightweight, fast, and feature-rich JavaScript library
designed to client-side scripting. It helps you to manipulate HTML
elements, handle events, make AJAX requests, animate elements,
and more, all with fewer lines of code compared to writing JavaScript.
Key Features
• Cross-browser compatibility: jQuery takes care of browser inconsistencies,
so you don’t have to write separate code for each browser.
• DOM Manipulation: Allows you to easily access and modify HTML
elements.
• Event Handling: Provides simple methods to handle events like mouse
clicks, keypresses, etc.
• Animation: Simplifies animations like hiding/showing elements, sliding
up/down, etc.
• AJAX Support: Makes it easier to interact with server-side data
asynchronously.
1.2 Install and Use jQuery
Library
• Downloading the jQuery File: Download the file from the official jQuery
website and save it in your project folder.
• Using a CDN (Content Delivery Network): This is the preferred method
because it reduces the load on your server. It’s quicker because the library
might already be cached in the user's browser.
• Example: To include jQuery from a CDN, add the following <script> tag in
your HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
• This <script> tag should be placed either in the <head> or before the
closing </body> tag to ensure jQuery is loaded before your code runs.
1.3 Un-Obstructive JavaScript
• Un-obstrusive JavaScript is the practice of separating HTML, CSS, and
JavaScript to keep your code modular and maintainable.
• With jQuery, you can avoid mixing JavaScript directly with HTML
attributes like onclick and instead use external or embedded scripts
to handle events.
Example
• Instead of adding a click attribute to an HTML button:
<button onclick="alert('Hello!')">Click me</button>
• You can handle it with jQuery:
$(document).ready(function() {
$("button").click(function() {
alert('Hello!');
});
});
• This way, your JavaScript is kept separate from your HTML structure,
making the code more readable and maintainable.
1.4 First jQuery Example
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").text("Hello, jQuery!");
});
});
</script>
</head>
<body>
<button>Click me</button>
<p></p>
</body>
</html>
Explanation:
• $(document).ready(function() {...}): Ensures the jQuery code runs
after the HTML document has fully loaded.
• $("button").click(function() {...}): When the button is clicked, the
specified function is executed.
• $("p").text("Hello, jQuery!"): This changes the text content of all <p>
tags to "Hello, jQuery!".
1.5 jQuery Syntax
• The basic syntax of jQuery is structured as follows:
$(selector).action();
• selector: Defines which HTML element(s) to select.
• action: Defines the operation to perform on the selected element(s).
Example:
$(".example").hide();
// Hides all elements with the class "example“
Explanation:
• $(".example"): Selects all elements with the class example.
• .hide(): Hides the selected elements.
Syntax of jQuery Selectors
• Element Selector: Selects all elements of a specified type.
$('p') // Selects all <p> elements
• Class Selector: Selects all elements with a specific class.
$('.className') // Selects all elements with class 'className'
• ID Selector: Selects an element with a specific ID.
$('#Id') // Selects the element with ID 'Id'
• Attribute Selector: Selects elements with a specific attribute.
$('input[type="text"]') // Selects all <input> elements with type 'text'
Syntax of jQuery Methods
• jQuery provides a wide range of methods for manipulating HTML elements, handling
events, and performing animations.
1. Manipulating HTML/Text Content
• .html(): Sets the HTML content of selected elements.
• // Sets HTML Content
• $('#element').html('New Content');
• .text(): Sets the text content of selected elements.
• // Sets the Text Content
• $('#element').text('New Text');
2. Changing CSS Styles with jQuery
• .css(): Sets the CSS properties of selected elements.
• // Sets the Text Color to Red
$('#element').css('color', 'red');
• // Sets Multiple CSS Styles
$('#element').css({
"color": "red",
"backgroundColor": "green"
});
Example
<html> // Change the CSS of the paragraph
<head> $('#change-css').click(function () {
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $('#paragraph').css({
<style> 'color': 'red',
.example { color: blue; font-size: 20px; } 'font-size': '25px',
</style> 'background-color': 'yellow'
</head>
});
<body>
<h1 id="heading">Original Heading</h1>
});
<p id="paragraph" class="example">This is a paragraph.</p> // Change the text content of the paragraph
<button id="change-html">Change HTML</button> $('#change-text').click(function () {
<button id="change-css">Change CSS</button> $('#paragraph').text('This is the new plain
<button id="change-text">Change Text</button> text.');
<script> });
$(document).ready(function () {
});
// Change the HTML content of the heading
</script>
$('#change-html').click(function () {
$('#heading').html('<i>New Heading with HTML</i>'); </body>
}); </html>
1.6 How to Escape Special
Characters
• In jQuery, some characters like #, ., and : are reserved for use in
selectors, and if you need to target elements with these characters in
their IDs or classes, you need to escape them using a backslash \.
• For example: If you have an element with the ID #section-1, you
would write:
$("#section\\-1")This ensures that the - character in the ID is treated
correctly.
1.7 Basic Selectors
• Selectors are used to target specific elements on the page. Some
common selectors include:
• ID Selector: Targets elements with a specific id.
Example: $("#header") selects the element with the ID header.
• Class Selector: Targets elements with a specific class.
Example: $(".menu") selects all elements with the menu class.
• Element Selector: Targets elements by their tag name.
Example: $("div") selects all <div> elements.
• Multiple Selector: Selects multiple elements using a comma-separated
list.
Example: $("div, p") selects all <div> and <p> elements.
Example
<html >
<head> // 4. Selects multiple elements (ID, class, and element)
<title>jQuery Basic Selectors</title> $("p, .content, #highlight").click(function() {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> alert("You clicked on a <p> element, a content element!");
<script> });
$(document).ready(function() { });
// 1. ID Selector: Selects an element by its ID
</script>
$("#highlight").click(function() { alert("This is the element with the ID
'highlight'"); </head>
$(this).css("background-color", "yellow"); // Changes background <body>
color <h1>jQuery Basic Selectors</h1>
}); <p>This is a paragraph. Click to change the text color.</p>
// 2. Class Selector: Selects all elements with a given class <p>This is another paragraph. Click to change the text color.</p>
$(".content").click(function() { alert("This is a content element!"); <div class="content">This is a content div. Click to increase font
$(this).css("font-size", "20px"); // Changes font size size.</div>
}); <div class="content">This is another content div. Click to increase
// 3. Element Selector: Selects all elements of a given type font size.</div>
$("p").click(function() { <div id="highlight">Click me to change the background
alert("This is a <p> element!"); color.</div>
$(this).css("color", "blue"); // Changes text color </body>
}); </html>
1.8 Traversal Functions
• Traversal functions in jQuery allow you to navigate the DOM tree to
find related elements. These functions help you move up and down
the DOM hierarchy.
• .parent(): Selects the parent element of the current selected element.
$("p").parent(); // Selects the parent of the <p> element.
• .children(): Selects the children of the current selected element.
$("div").children(); // Selects all children inside the <div> element.
• .next(): Selects the next sibling element.
$("h2").next(); // Selects the next sibling after the <h2> element.
• .prev(): Selects the previous sibling element.
$("h2").prev(); // Selects the previous sibling before the <h2> element.
• .find(): Finds elements inside the current selected element.
$("div").find("p"); // Finds <p> tags inside a <div> element
Example
<html > // 4. .prev() - Selects the previous sibling element
<head>
$(".item").click(function() {
<title>jQuery Traversal Functions</title>
<script alert("Previous sibling: " + $(this).prev().html()); });
src="https://code.jquery.com/jquery-3.6.0.min.js"></script> // 5. .find() - Finds elements inside the selected element
<script>
$("#container").click(function() {
$(document).ready(function() {
// 1. .parent() - Selects the parent element alert("Found child <p>: " + $
$("#child").click(function() {
(this).find("p").html()); }); });
alert("Parent: " + $(this).parent().html()); </script>
}); </head>
<body>
// 2. .children() - Selects the children of the selected
element <div id="container">
$("#container").click(function() {
<div class="item">Item 1</div> <div class="item">Item 2</div>
alert("Children: " + $(this).children().html());
}); <div class="item">Item 3</div>
<p>Paragraph inside container</p>
// 3. .next() - Selects the next sibling element <div id="child">Click me to find my parent!</div>
$(".item").click(function() {
</div>
alert("Next sibling: " + $(this).next().html());
}); </body> </html>
