JQUERY
Introduction
⦿ jQuery is a JavaScript library
⦿ jQuery adds more capabilities of
JavaScript in which it provides more
libraries to manipulate HTML pages and
Document Object Model (DOM)
⦿ jQuery provides high-level of
cross-browser compatibility
Including jQuery
⦿ jQuery libraries can be downloaded or
attached directly into HTML code
⦿ <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js'></script>
⦿ <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'>
</script>
⦿ jQuery codes can also be customised to
your application
⦿ You can access jQuery by typing a $
symbol, followed by an selector in
parenthesis
$('p').css('font-family', 'Verdana')
JavaScript vs. JQuery
<html> <html>
<body> <script
<h1>Converts RM to USD and otherwise src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jque
(USD1=MYR4)</h1> ry.min.js"></script>
<input type=text id=rm placeholder="RM"> = <input <body>
type=text id=usd placeholder="USD"><br> <h1>Converts RM to USD and otherwise
<input type=submit onclick="convert()"><input type=reset (USD1=MYR4)</h1>
onclick="reset()"> <input type=text id=rm placeholder="RM"> = <input
<script> type=text id=usd placeholder="USD"><br>
function reset(){ //no form, therefore reset does not work, <input type=submit id=s><input type=reset id=r>
hence this function <script>
document.getElementById('rm').value=""; $(document).ready(function(){
document.getElementById('usd').value=""; $("#r").click(function(){
} $("#rm").val("");
function convert(){ $("#usd").val("");
var rm = parseInt(document.getElementById('rm').value); });
var usd = parseInt(document.getElementById('usd').value); $("#s").click(function(){
if(isNaN(rm)) document.getElementById('rm').value="RM var rm = parseInt($("#rm").val());
"+usd*4; var usd = parseInt($("#usd").val());
if(isNaN(usd)) if(isNaN(rm)) $("#rm").val("RM "+ (usd*4));
document.getElementById('usd').value="USD "+rm/4;
} if(isNaN(usd)) $("#usd").val("USD "+ (rm/4));
</script> });
</body> });
</html> </script>
</body>
</html>
jQuery Selectors
⦿ If you refer to elements by their id, use a
# symbol $('#advert').css('border', '3px dashed red')
/* element id “advert” will have red dashed
borders with 3px thickness */
⦿ If you refer to elements by their class,
use a . Symbol $('.new').css('text-decoration', 'underline')
/* all class “new” elements will have underline
under the text */
⦿ You may also combine selectors into a
single query
$('blockquote, #advert, .new').css('font-weight', 'bold')
/* all blockquotes, element id “advert”, and class
“new” will have bold text */
Example
<!DOCTYPE html>
<html>
<head>
<title>jQuery Events</title>
<script
src='jquery-1.11.1.min.js'></script>
</head>
<body>
<button id='clickme'>Click Me</button>
<p id='result'>I am a paragraph</p>
<script>
$('#clickme').click(function()
{
$('#result').html('You clicked the
button!')
})
</script>
</body>
</html>
Event Handling
⦿ Events are triggered by user interaction
⚫ Mouse passes over an element
⚫ Mouse button is clicked
⚫ A key is pressed
⚫ Document finished loading
⚫ Eg: How jQuery responds on mouse click on
button
$('#clickme').click(function() /* clickme is an element’s id */
{
$('#result').html('You clicked the button!') /* so is result */
})
this keyword and dblclick
⦿ When an event is called, the element on
which it was triggered is passsed in the
object this $(this).css('background', '#ff0')
or:
this.style.background = '#ff0'
⦿ jQuery can handle double clicks events
seamlessly $('.myclass') .click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide() })
Example
⦿ This example uses function from jQuery
min library
<!DOCTYPE html>
<html>
<head>
<title>Events: click & dblclick</title>
<script src='jquery-1.11.1.min.js'></script>
</head>
<body>
<h2>Click and double click the buttons</h2>
<button class='myclass'>Button 1</button>
<button class='myclass'>Button 2</button>
<button class='myclass'>Button 3</button>
<button class='myclass'>Button 4</button>
<button class='myclass'>Button 5</button>
<script>
$('.myclass').click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide() })
</script>
</body>
</html>
The submit Event
⦿ This captures a form prior to submission
for mostly error checking
<!DOCTYPE html>
<html>
<head>
<title>Events: submit</title>
<script src='jquery-1.11.1.min.js'></script>
</head>
<body>
<form id='form'>
First name: <input id='fname' type='text' name='fname'><br>
Last name: <input id='lname' type='text' name='lname'><br>
<input type='submit'>
</form>
<script>
$('#form').submit(function()
{
if ($('#fname').val() == '' ||
$('#lname').val() == '')
{
alert('Please enter both names')
return false
}
})
</script>
</body>
</html>
The val and attr Methods
⦿ While JavaScript uses value, jQuery
uses val to set the value of an element
$('#password').val('mypass123') /* Sets element id “password” to “mypass123” */
⦿ The attr method allows you to get or set
the attributes of elements
<body>
<h2>Example Document</h2>
<p><a id='link' href='http://google.com' title='Google'>Visit Google</a></p>
<script>
$('#link').text('Visit Yahoo!')
$('#link').attr( { href :'http://yahoo.com', title:'Yahoo!' } )
alert('The new HTML is:\n' + $('p').html())
</script>
</body> /* Replacing google link to yahoo */
Example
<!DOCTYPE html>
<html>
<head>
<style>
#test{
width: 500px;
height: 10px;
background: #ffb;
padding: 10px;
border: 2px solid #999;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Example cont.
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').fadeIn();
$('#test').text('I will only appear for 2 seconds');
$('#test').delay(2000).fadeOut();
});
});
</script>
</head>
<body>
<div id="test"></div>
<button id="btn1">Show Text</button>
</body>
</html>
jQuery Events
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
$("p").on({
⦿ $("p").click(function(){
mouseenter: function(){
⦿ $("p").dblclick(function(){ $(this).css("background-color", "lightgray");
⦿ $("input").focus(function(){ },
⦿ $("p").on("click", function(){ mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
jQuery Effects
⦿ Hide – Hides the selection
⦿ Show – Shows the selection
⦿ Toggle – Toggle (Hides or show)
⦿ Slide – Slides the selection up or down
⦿ Fade – Similar to hide/show, only slowly
⦿ Animate – Animates the selection in
many ways
Hide/Show/Toggle
$("#hide").click(function(){ /* button element id */
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("button").click(function(){ /* element button */
$("p").toggle();
});
$("button").click(function(){ /* hides slowly within 1 second */
$("p").hide(1000);
});
Slide example
<script> </head>
$(document).ready(function(){ <body>
$("#flip").click(function(){ <div id="flip">Click to slide down
$("#panel").slideDown("slow"); panel</div>
}); <div id="panel">Hello world!</div>
}); </body>
</script> </html>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
Slide example cont
⦿ Slides can be up, down, or toggle
$("#flip").click(function(){
$("#panel").slideUp();
});
$("#flip").click(function(){
$("#panel").slideToggle();
});
Fade example
⦿ There are 4 effects of fade in jQuery
⚫ fadeIn() – to slowly showing on page
⚫ fadeOut() – to slowly disappear from page
⚫ fadeToggle() – to either show or disappear
⚫ fadeTo() – to change the parameter to
different opacity ( 0 for hidden)
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
});
</script>
Fade Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
Animate example
⦿ Animate effect allows you to manipulate
multiple properties
⦿ Animation can be done using relative
values, predefined value, or using the
queue functionality
Using relative value
<!DOCTYPE html>
<html>
<head>
<script rc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script> </head>
<body>
<button>Start Animation</button>
<div tyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Using predefined values
<!DOCTYPE html>
<html>
<head>
<script rc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div tyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Using queue functionality eg1
<html>
<head>
<script rc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div tyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Using queue functionality eg2
<html>
<head>
<script rc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
</script></head>
<body>
<button>Start Animation</button>
<div style=
"background:#98bf21;height:100px;width:200px;position:absolute;">HELLO </div>
</body>
</html>
