Scribd
Upload
2 views

Unit 2 - JQuery

The document provides an overview of web scripting languages, focusing on JavaScript, DOM manipulation, and jQuery. It covers key concepts such as using JavaScript in HTML, jQuery syntax, selectors, and methods for adding and removing elements. Additionally, it includes examples demonstrating how to implement these concepts in web pages.

Uploaded by

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

Unit 2 - JQuery

The document provides an overview of web scripting languages, focusing on JavaScript, DOM manipulation, and jQuery. It covers key concepts such as using JavaScript in HTML, jQuery syntax, selectors, and methods for adding and removing elements. Additionally, it includes examples demonstrating how to implement these concepts in web pages.

Uploaded by

Nitin Panzade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

UNIT – II

WEB SCRIPTING LANGUAGES


Outlin
e
JavaScript: Overview of JavaScript, using JS in an HTML
(Embedded, External), Data types, Control Structures,
Arrays, Functions and Scopes, Objects in JS,

DOM: DOM levels, DOM Objects and their properties and


methods, Manipulating DOM,

JQuery: Introduction to JQuery, Loading JQuery, Selecting


elements, changing styles, creating elements, appending
elements, removing elements, handling events.
Outlin
e
JavaScript: Overview of JavaScript, using JS in an HTML
(Embedded, External), Data types, Control Structures,
Arrays, Functions and Scopes, Objects in JS,

DOM: DOM levels, DOM Objects and their properties and


methods, Manipulating DOM,

JQuery: Introduction to JQuery, Loading JQuery, Selecting


elements, changing styles, creating elements, appending
elements, removing elements, handling events.
jQuery -
Introduction
• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript programming.
• jQuery is a lightweight
• jQuery also simplifies a lot of the complicated things from
JavaScript, like AJAX calls and DOM manipulation.
• The jQuery library contains the following features:
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
Adding jQuery to Your
Web Pages
• There are several ways to start using jQuery on your web
site. You can:
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google
Downloading
jQuery
• There are two versions of jQuery available for downloading:
• Production version - this is for your live website because it has
been minified and compressed
• Development version - this is for testing and development
• Both versions can be downloaded from jQuery.com.
• The jQuery library is a single JavaScript file, and you reference
it with the HTML <script> tag (notice that the <script> tag
should be inside the <head> section):
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
• Tip: Place the downloaded file in the same directory as the
pages where you wish to use it.
jQuery
CDN
• If you don't want to download and host jQuery yourself, you can
include it from a CDN (Content Delivery Network).
• Both Google and Microsoft host jQuery.
• To use jQuery from Google or Microsoft, use one of the
following:
• Google CDN:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
jQuery
Syntax
• With jQuery you select (query) HTML elements and perform
"actions" on them.
• syntax :
• $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
• Examples:
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with class="test".
• $("#test").hide() - hides the element with id="test".
jQuery Selectors-
Selecting elements
• jQuery selectors allow you to select and manipulate HTML
element(s).
• jQuery selectors are used to "find" (or select) HTML elements
based on their name, id, classes, types, attributes, values of
attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.
• All selectors in jQuery start with the dollar sign and
parentheses: $().
The element
Selector
• The jQuery element selector selects elements based on the
element name.
• You can select all <p> elements on a page like this:
• $("p")
• Example
• When a user clicks on a button, all <p> elements will be
hidden:
• $(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
jQuery code for hiding paragraphs
on button click
<!DOCTYPE html>
<html>
<head>
<title>Hide Paragraphs</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button>Hide Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<script>
$(document).ready(function() {
$("button").click(function() {
$("p").hide();
});
});
</script>
</body>
</html>
Output
The #id
Selector
• The jQuery #id selector uses the id attribute of an HTML tag to find
the specific element.
• An id should be unique within a page, so you should use the #id
selector when you want to find a single, unique element.
• To find an element with a specific id, write a hash character,
followed by the id of the HTML element:
• $("#test")
• Example
• When a user clicks on a button, the element with id="test" will be
hidden:
• $(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
HTML and jQuery code to hide the element
with the ID "test" when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>Hide Element on Button Click</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button>Click to Hide</button>
<div id="test">This is the element with ID "test"</div>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#test").hide();
});
});
</script>
</body>
</html>
Output
jQuery css() Method- Changing
Style
•jQuery css() Method
• The css() method sets or returns one or more style
properties for the selected elements.
• Return a CSS Property
• To return the value of a specified CSS property, use the
following syntax:
• css("propertyname");
• Set a CSS Property
• To set a specified CSS property, use the following
syntax:
• css("propertyname","value");
Changing Style- Return a CSS
Property Example
<!DOCTYPE html>
<html>
<head>
<title>Get Background Color</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p style="background-color: #ff0000;">This is a paragraph.</p>
<button>Get Background Color</button>
<script>
$(document).ready(function() {
$("button").click(function() {
var backgroundColor = $("p").css("background-color");
alert("Background color: " + backgroundColor);
});
Output
Changing Style-
Set a CSS Property Example
<html><head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<p style="background-color:#ff0000">This is a paragraph.</p>
<button>Set background-color of p</button>
</body></html>
Changing Style-
Set a CSS Property Example
o/p
Output of Previous Code

After clicking on button


jQuery - Add
Elements
• We will look at four jQuery methods that are used to add new
content:
• append() - Inserts content at the end of the selected
elements
• prepend() - Inserts content at the beginning of the
selected elements
• after() - Inserts content after the selected
elements
• before() - Inserts content before the selected
elements
jQuery append() Method-
Example
<!DOCTYPE html>
<html>
<head>
<title>Adding List Items</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></
script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("ol").append("<li>List item 3</li>");
});
});
</script>
</head>
<body> After Clicking on button
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<button id="btn1">Append List Item</button>
</body>
</html>
jQuery - Remove
Elements
• Remove Elements/Content
• To remove elements and content, there are mainly two jQuery
methods:
• remove() - Removes the selected element (and its
child elements)
• empty() - Removes the child elements from the
selected element
jQuery remove() Method-
<!DOCTYPE html>
Example
<html>
<head>
<title>Remove Paragraphs on Button Click</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button>Click to Remove Paragraphs</button>


<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<script>
$(document).ready(function() { After Clicking on button
$("button").click(function() {
$("p").remove();
});
});
</script>
</body>
</html>
References
• https://www.w3schools.com/jquery/jquery_get_started.a sp
• https://www.w3schools.com/jquery/jquery_css.asp
• https://www.w3schools.com/jquery/jquery_dom_add.asp

You might also like