Scribd
Upload
4 views

Unit 6 Jquery

jQuery is a widely-used JavaScript library that simplifies web development by allowing developers to add interactive features and manipulate HTML elements with less code. It includes functionalities for HTML/DOM manipulation, CSS manipulation, event handling, animations, and AJAX. The document also provides examples of basic jQuery syntax, selectors, event methods, and effects like hide/show and animations.

Uploaded by

ndlovuivynm
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
4 views

Unit 6 Jquery

jQuery is a widely-used JavaScript library that simplifies web development by allowing developers to add interactive features and manipulate HTML elements with less code. It includes functionalities for HTML/DOM manipulation, CSS manipulation, event handling, animations, and AJAX. The document also provides examples of basic jQuery syntax, selectors, event methods, and effects like hide/show and animations.

Uploaded by

ndlovuivynm
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/ 63

UNIT - 6

JQUERY
JQUERY
• jQuery is a popular and easy-to-use JavaScript library.

• It's like a toolbox for web developers that makes it simpler to do things on
websites.

• It helps them add interactive features, animations, and manipulate web page
elements without writing as much complex code as they would have to with
just plain JavaScript.

• In simple terms, you can think of jQuery as a set of pre-made tools that web
developers can use to make their websites more dynamic and user-friendly.
The jQuery library contains the following features:

•HTML/DOM manipulation
•CSS manipulation
•HTML event methods
•Effects and animations
•AJAX
•Utilities
(notice that the <script> tag should be inside the <head> section)
<!DOCTYPE html>
<html lang="en">
<head>

<title>Document</title>
<script src="js/jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert(1);
});
</script>

</body>
</html>
Adding jQuery to Your Web Pages

•Include jQuery from a CDN, like Google


jQuery CDN

If you don't want to download and host jQuery yourself, you can include it from a CDN
(Content Delivery Network).
<!DOCTYPE html>
<html lang="en">
<head>

<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert(1);
});
</script>

</body>
</html>
BASIC SYNTAX
BASIC SYNTAX
jQuery Syntax
Basic syntax is: $(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
• jQuery selectors allow you to select and manipulate HTML
elements.
• A jQuery Selector is a function which makes use of
expressions to find out matching elements from a DOM
based on the given criteria.
• jQuery selectors are used to "find" (or select) HTML
elements based on their id, classes, types, attributes, values
of attributes and much more.
• All selectors in jQuery start with the dollar sign and
parentheses: $().
• Selector with tag name
• Represents a tag name available in the DOM.
• For example $('p') selects all paragraphs in the document.
• Selector with ID
• Represents a tag available with the given ID in the DOM.
• For example$('#some-id') selects the single element in the
document that has an ID of some-id.
• Selector with class
• Represents a tag available with the given class in the DOM.
• For example$('.some-class') selects all elements in the document
that have a class of some-class.
• $('*')
• This selector selects all elements in the document.
• $("ul li:first")
• This selector gets only the first <li> element of the <ul>.
• $(“tr:even")
• Selects all even indexed <tr> in table.
• $(":radio")
• Selects all radio buttons in the form.
• $(":text")
• Selects only text elements (input[type=text]).
jQuery Event Methods

• All the different visitors' actions that a web page can respond to are
called events.
• An event represents the precise moment when something happens.

Examples:
•moving a mouse over an element
•selecting a radio button
•clicking on an element
jQuery Event Methods
Commonly Used jQuery Event Methods

$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully
loaded.
click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
$("#id1").click(function()
{
alert("Welcome to Jquery");
});
});
</script>
</head>
<body>
<button id="id1">Click here for message</button>
<p id="id1">Click here for message</p>
</body>
</html>
<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
$("#click1").dblclick(function(){
$(this).hide();
});
$(".click2").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p id="click1">Double click here!</p>
<p class="click2">Single click here!</p>
</body>
</html>
jQuery Effects - Hide and
Show
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("p").show();
});
$("#b2").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>Hide and Seek</p>
<input type="button" id="b1" value="show paragraph">
<input type="button" id="b2" value="hide paragrphh">
</body>
</html>
jQuery toggle()

You can also toggle between hiding and showing an element with
the toggle() method.
Shown elements are hidden and hidden elements are shown:
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("p").toggle(500);
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
jQuery Animation Effects

• The jQuery animate() method is used to create custom animations.

• The animate() method is typically used to animate numeric CSS


properties, for
example, width, height, margin, padding, opacity, top, left, etc. but
the non-numeric properties such as color or background-color cannot
be animated using the basic jQuery functionality.
<script type = "text/javascript" src = "jquery-1.8.2.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#out").click(function(){
$("#block").animate(
{
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
$("#in").click(function()
{
$("#block").animate(
{
width: "100",
opacity: 1.0,
marginLeft: "0in",
fontSize: "100%",
borderWidth: "1px"
}, 1500 );
});
});
</script>
<style>
div
{
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id = "out"> Animate Out </button>
<button id = "in"> Animate In</button>
<div id = "block">Hello</div>
</body>
</html>
OUTPUT
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("div").animate({left: '350px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div
style="background:#98bf21;height:100px;width:100px;position:absolute;
">
</div></body></html>
OUTPUT
FADE IN /FADE OUT

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src ="jquery-1.8.2.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#in").click(function(){
$("#img1").fadeIn( 'slow', function(){
});
});
$("#out").click(function(){
$("#img1").fadeOut( 'slow', function(){
});});});
</script></head><body>
<p>Click on any of the buttons</p>
<button id = "out"> Fade Out </button>
<button id = "in"> Fade In</button>
<br><br>
<img src = "smiley1.jpg" id="img1" alt = "jQuery"></body></html>
JavaScript HTML DOM

• The HTML DOM (Document Object Model)

• When a web page is loaded, the browser creates a Document Object Model of the page.

• The HTML DOM model is constructed as a tree of Objects:


<html>
<head>
<toitle>javascript</title>
</head>
<body>
<button onclick="openWindow()">open window</button>
<script>
function openWindow()
{
window.open("http://www.amazon.com","","width=500px");
}
</script>
</body>
</html>
Close Window()
<html>
<head>
<toitle>javascript</title>
</head>
<body>
<button onclick="openWindow()">open window</button>
<button onclick="closeWindow()">close window</button>
<script>
var mywindow;
function openWindow()
{
mywindow=window.open("http://www.amazon.com","","width=500px");
}
function closeWindow()
{
mywindow.close();
}
</script>
</body>
</html>
Close Window()
<html>
<head>
<title></title>
</head>
<body>
<h1> location object</h1>
<script>
document.write(location.href);

</script>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<h1> location object methods</h1>
<button onclick="newFunction()">Click</button>
<script>
function newFunction()
{
location.assign("https://www.google.com");
}

</script>
</body>
</html>

You might also like