jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element
Transcript of jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element
![Page 1: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/1.jpg)
JQUERY (AND TO A LESSER EXTENT, JAVASCRIPT)
![Page 2: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/2.jpg)
WHAT IS JQUERY?
![Page 3: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/3.jpg)
OK... SO WHAT IS
JAVASCRIPT?
![Page 4: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/4.jpg)
AND JUST WHAT CAN THIS ‘JQUERY’
THING DO?
![Page 5: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/5.jpg)
IN A NUTSHELL, JQUERY WILL LET YOU GET INPUT
FROM OR MANIPULATE ANY
ELEMENT
![Page 6: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/6.jpg)
GETTING IT SET UP
![Page 7: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/7.jpg)
1) LINK TO JQUERY.JS 2) LINK TO YOUR OWN SCRIPTS 3) WRAP YOUR JQUERY IN A ‘READY’ BLOCK
![Page 8: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/8.jpg)
1) LINK TO JQUERY.JS Get it from the Google Hosted Libraries
![Page 9: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/9.jpg)
2) LINK TO YOUR OWN SCRIPTS
<script src=“js/scripts.js”></script>
![Page 10: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/10.jpg)
3) USE THIS IN YOUR SCRIPTS.JS:
$(function() { // your jQuery code goes here.
});
![Page 11: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/11.jpg)
SYNTAX
![Page 12: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/12.jpg)
$(‘p’).fadeOut(‘fast’);
SELECTOR
FUNCTION
ARGUMENT
![Page 13: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/13.jpg)
$(‘p’).fadeOut(‘fast’);
2. TO THIS…
1. THIS HAPPENS…
3. LIKE THIS.
![Page 14: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/14.jpg)
$(‘p’)
JQUERY OBJECT
THIS STORES ALL THE <P> TAGS ON THE PAGE SO YOU CAN
DO STUFF TO THEM
![Page 15: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/15.jpg)
$(‘p’).fadeOut(‘fast’);
$(‘#nav’).fadeOut(‘fast’);
$(‘.item’).fadeOut(‘fast’);
$(‘nav li a .selected’).fadeOut(‘fast’);
![Page 16: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/16.jpg)
SO, I USE JQUERY TO MAKE THINGS FADE OUT?
THAT’S SOooO AWESOME. (IMPLIED SARCASM)
![Page 17: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/17.jpg)
$(‘p’).fadeIn(‘fast’);
$(‘#nav’).slideUp(‘slow’);
$(‘.item’).slideDown(300);
$(‘h1’).html(‘Here is a new headline.’);
$(‘.item’).css(‘color’, ‘blue’);
![Page 18: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/18.jpg)
$(‘p’).fadeIn(1000).fadeOut(‘fast’);
![Page 19: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/19.jpg)
BUT IT ONLY DOES IT WHEN THE PAGE FIRST LOADS.
THAT SEEMS RATHER LIMITED.
![Page 20: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/20.jpg)
YOU’RE NOT WRONG.
THAT’S WHY WE HAVE...
![Page 21: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/21.jpg)
EVENTS (INPUTS)
![Page 22: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/22.jpg)
$(‘h3’).click();
![Page 23: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/23.jpg)
$(‘h3’).click(function() {
$(‘p’).fadeOut();
$(‘h2’).fadeIn();
});
WHEN THIS...
![Page 24: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/24.jpg)
$(‘h3’).click(function() {
$(‘p’).fadeOut();
$(‘h2’).fadeIn();
});
HAPPENS TO THIS...
![Page 25: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/25.jpg)
$(‘h3’).click(function() {
$(‘p’).fadeOut();
$(‘h2’).fadeIn();
});
...DO THIS
![Page 26: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/26.jpg)
click()
dblclick()
hover()
focus()
keypress()
scroll()
HERE ARE SOME EVENTS:
![Page 27: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/27.jpg)
WANT TO INTERACT WITH A SPECIFIC ELEMENT?
NO PROBLEM. ‘THIS’ CAN HANDLE THIS.
![Page 28: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/28.jpg)
$(‘p’).click(function() {
$(‘p’).fadeOut();
});
RESULT: ?
![Page 29: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/29.jpg)
$(‘p’).click(function() {
$(‘p’).fadeOut();
});
RESULT: ALL THE <P> TAGS FADE OUT
![Page 30: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/30.jpg)
$(‘p’).click(function() {
$(this).fadeOut();
});
This is ‘this’
![Page 31: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/31.jpg)
$(‘p’).click(function() {
$(‘p’).fadeOut();
});
RESULT: ALL THE <P> TAGS FADE OUT
![Page 32: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/32.jpg)
$(‘p’).click(function() {
$(this).fadeOut();
});
RESULT: ?
![Page 33: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/33.jpg)
$(‘p’).click(function() {
$(this).fadeOut();
});
RESULT: ONLY THAT <P> TAG FADES OUT
![Page 34: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/34.jpg)
$(‘p’).click(function() {
$(this).fadeOut();
});
YOU USE QUOTES AROUND A JQUERY SELECTOR, BUT NOT AROUND THIS.
NOTE:
![Page 35: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/35.jpg)
OK, THOM. YOU’VE CONVINCED US.
JQUERY REALLY IS EVERYTHING I’VE ALWAYS WANTED.
![Page 36: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/36.jpg)
TOLD YA, SUCKAS!
![Page 37: jQuery - Short Version a nutshell, jquery will let you get input from or manipulate any element](https://reader031.fdocuments.us/reader031/viewer/2022022512/5ae9375f7f8b9acc26912ccf/html5/thumbnails/37.jpg)
NOW, LET’S PLAY WITH IT SOME MORE.