1. Eric.Steinborn@dcjs.state.ny.us Jquery is totally awesome.
I hate how expensive trainings are. So I wanted to give you all training here today that’s priceless.
I really like to learn things at meetings

2. Poll Who uses javascript on their sites Who uses JavaScript everyday
who uses frameworks (mootools, Dojo, prototype etc)
Who uses jQuery

3. Just Thought you should know

4. Eric Steinborn
NYS Division of Criminal Justice Services since 2006
15+ years experience with web technologies
Work in a group of 3
Maintain our intranet (DCJSnet)
Help with internet and extranet sites
A few things I'm awesome at are:
CSS, JavaScript, Interactivity, Prog Enhancement, UX, SEO, Accessibility
I do what I love -> I love my job! Me

5. A Little Bit About jQuery
What is jQuery?
jQuery is an Open-Source JavaScript framework that simplifies cross-browser client side scripting.
Animations
DOM manipulation
AJAX
Extensibility through plugins
jQuery was created by John Resig and released 01/06
Most current release is (2/19/10)
Open Source JavaScript framework.
Jquery was created by John Resig in 2006 and since then has exploded into popularity in the web community.

6. A Little Bit About jQuery
Why should you use it?
Easy to learn! It uses CSS syntax for selection
Its tiny 71KB (24KB, minified and Gzipped)
Documented api.jquery.com & Supported forum.jquery.com
Cross browser compatibility: IE 6+, FF 2+
It is the most used JavaScript library on the web today
39% of all sites that use JavaScript use jQuery.
trends.builtwith.com/javascript/JQuery <- See, I'm not a liar..
It uses CSS rules to grab DOM elements that's why its so easy to use, because we all know how to address com elements with css already.
Its really small, it loads really fast in most browsers.
The community is great. I had a question once about how to do something for the new homepage. I asked the question before i left work and had a response by my ride home.
And its compatible with most major browsers. If you make something that works in FF itll work in IE6 guaranteed.

7. I <3 The jQuery Community
I created this awesome idea to display missing children information on our home page when there was a missing child alert.
I just couldn’t figure out how to parse the data I was getting from the page with the kid info on it.
So I asked the forums. and

8. Adam J Sontag from the yayQuery podcast answered my question in 13 minutes.
yayQuery podcast has an explicit tag for sparse foul language, nothing terrible. Just if you don’t want your kids hearing the f or s words then use headphones.

9. PWNS All Other Frameworks
Swf object is for putting flash on a page, the closest actual pure JavaScript framework is prototype.
And don’t forget that jQueryUI, a part of jQuery is included in this list, above even mootools.

10. Who Uses jQuery? docs.jquery.com/Sites_Using_jQuery Google Amazon IBM
Microsoft
Twitter
Dell
You can see this list on their website.
Microsoft just announced that they are going to be dedicating coder time and resources to improving jQuery core, and its plugins. This is HUGE.
Mention anti microsoft sentiment, and the fact that even microsoft wants IE6 to die.
docs.jquery.com/Sites_Using_jQuery

11. Alcoholism & Substance Abuse
Who Uses jQuery In NY?
Alcoholism & Substance Abuse
CIO OFT
Criminal Justice
Labor
MTA
Port Authority
This is just a couple of agencies across NY that use jQuery

12. What is the DOM? Document Object Model (DOM): noun
So I mentioned the DOM before, what exactly is the DOM?
Document Object Model (DOM): noun
Blah blah blah long definition that makes little sense….

13. What Is The DOM?
Long story short, the DOM is your html document code. From the
<!DOCTYPE> to the </html>
The DOM is loaded top to bottom, so include your scripts at the bottom of the page for best performance.
The DOM is "ready" when everything on the page has loaded.
Stylesheets
JavaScripts
Images
The Document Object Model.
The DOM is everything you write in your html documents, images, css, all your tags, everything.
The DOM is a mess. There are a million different ways to accomplish things within it and many different doctypes and uppercase and lowercase are allowed attributes that sometimes need quotes, and othertimes don’t. jQuery is coded around all those inconsistencies.
jQuery can modifiy the DOM, but it cant do so untill the DOM is ready.

14. Wait!! $(document).ready(function(){
In order to make sure that jQuery can find the element you asked it for, your browser needs to have loaded it (the DOM needs to be ready).
Q. How can I be sure my code runs at DOM ready?
A. Wrap all your jQuery code with the document ready function:
$(document).ready(function(){
// insert sweet, sweet jQuery code here…
});
So we wrap all our jQuery code inside some code. Its called the document ready function, and it is only run after all your page has loaded.
Shorthand is
$(function(){
});

15. And What If I Don't Wanna, Huh?
1 of 3 things will happen:
Code doesn't work, throws an error (90%)
Code works… this page load, next page load see #1. (~9%)
Code opens a worm hole that transports your page back to 1990 revolutionizing the Web as we know it. While seemingly great, it also creates a paradox and destroys the universe. * (<1%)
*(has yet to be fully verified)
#1 is closer to 99%

16. We get it Eric, you're a geek… Get to the jQuery already!
Your about ta get a wedgie NERD!*
*spelling intentional

17. Loading jQuery In order to use jQuery you need to load it.
You can include it locally on your own server:
<script src="/js/jquery.js">
Or use one of the CDN's made available:
ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
ajax.microsoft.com/ajax/jquery/jquery js
CDN's are Gzipped and minified
Loading from the CDN’s is usually the fastest way, because if you are downloading from one place, you can be downloading from another place at the same time.
We usually load it on our servers.

18. Load Scripts At The Bottom
Problem:
When scripts are downloading they block everything else in almost all browsers!
Solution:
Best practice: Load your scripts at the bottom of your page so they don't interrupt page content downloads.
Load at the bottom f the page because when the browser is downloading javascripts it blocks everything else
So lets light the fuse now…

19. And BOOM! Goes The Dynamite.
jsbin.com/ecayo3/18#slide19
Html:
<p>Hello World! I'm Eric</p>
Script:
$(function(){
$("p").addClass("isCool");
//keep telling yourself that..
});
Resulting html:
<p class="isCool">Hello World! I'm Eric</p>
So lets see what we’re up against.
We begin with a plain P tag and end with a p tag with a class of isCool
Lets break it down on the next page
DEMO

20. Break It Down Now! $ ("p") .addClass("isCool");
$(function(){// = $(document).ready(function(){ $
("p")
.addClass("isCool");
Initiates the jQuery function
Grabs a DOM element using a CSS selector.
Built in method that adds a class to the jQuery Collection
We check for the DOM to be ready by the $(function() wrapper
We use the $ to initialize a jquery function
Then we surround a CSS selector with parenthesis and quotes (all P’s will be selected)
Then I initiate a jquery method called addClass and tell it what class to add.
It's a good thing to note that I don't add a . Before isCool when adding removing classes. Most methods are alike in how they are called, be careful to check to api to see how to use each method.
I end with a semicolon just like most lines of javascript code
And then close the document ready wrapper
Double quotes can be swapped with single quotes. Same rules apply as normal html or javascript, if you use one you have to end one before switching to the other.
Selector is in quotes.
Class is in quotes. $ =
jQuery
Creates a jQuery “Collection”
ends with a semicolon.
<p>
});

21. All Your Basic Selectors Are Belong To Us
Uses the same syntax you use to style elements in CSS!
$("p")
<p>
$("div")
<div>
$("#foo")
id="foo"
$(".foo")
class="foo"
Here you can see some of the basic css selectors supported by jquery
Simple things that you've seen a lot before.
Div p classes etc
In order to not select everything, make sure to be specific with your CSS selector
api.jquery.com/category/selectors/

22. Get Classy <p> $("p").addClass("sophisticated"); <p>
jsbin.com/ecayo3/18#slide22
jQuery:
$("p").addClass("sophisticated");
Before:
<p>
After:
<p class="sophisticated">
I want to make this p tag classy,
So I’m going to use the addClass method on it and add the sophisticated class to it you see the before and after html
Note the lack of . Before the class name, that’s only needed for selection

23. This <p> Has No Class At All!
jsbin.com/ecayo3/18#slide22
jQuery:
$("p").removeClass("sophisticated");
Before:
<p class="sophisticated">
After:
<p class="">
I remove classes with a different method, but the way in which I do it stays the same.
If there were other classes on the p tag they would stay intact
DEMO

24. <div> Hide and Seek
jsbin.com/ecayo3/18#slide24
jQuery:
$("div").show();
Before:
<div style="display:none;">
After:
<div style="display:block;">
You can show a div by running the show method.
There is a hide method as well.
DEMO

25. I’m Not Lame, Am I? $("#eric").text("Is Cool");
jsbin.com/ecayo3/18#slide25
jQuery:
$("#eric").text("Is Cool");
Before:
<p id="eric">Is Lame</p>
After:
<p id="eric">Is Cool</p>
Text will change the inner text of a DOM element
DEMO.

26. You Can Chain Most Methods Together
jsbin.com/ecayo3/18#slide26
$("p") .addClass("sophisticated") .text("Hello World!") .show();
Methods can be separated across multiple lines. Or kept on the same line
This is a best practice for code readability
Make sure you end your chain with a semicolon;
DEMO

27. Click Events Are Awesome!
jsbin.com/ecayo3/18#slide27
$("#eric").click(function(){
$(this).text("Is Cool"); // this = #eric
alert("Take that High School!");
});
$("#eric").click(function(event){
event.preventDefault(); //Prevents default action
Click events are a bit different.
In order to have code run when you click you need to declare a function to encapsulate the code you want to run
We create an anonymous function that calls this element (#eric)
And it changes the text to Is Cool and throw a javascript alert
If we wanted to prevent the default action, say href=“index.html”
Then we call event inside the parenthesis after the function and call event.preventDefault() to prevent the default action of the button

28. .wrap("<a></a>")
Some of Basic Methods
.show()
Show a hidden element
.wrap("<a></a>")
wrap an element with <a>
.parent("p")
Select parent <p>
.html()
Get/Set innerHTML
.val()
Get/Set Value
Plenty of examples of basic methods within jQuery.
api.jquery.com/

29. Getters and Setters

30. Dual Purpose Methods $("#foo").text(); $("#foo").text("foo");
Getters and setters. These are jquery methods that can give you a value or set a value.
You can set a variable to any of these getters
Text can get a value or set a value

31. Use jQuery To Get <p>Eric</p> === "Eric" myVar === "Eric"
$("p").text();
=== "Eric"
To get a value you call a method with empty parens. Some functions are different, please check api ex css uses a different syntax
Normally youd set a variable equal to a value of a jquery method getter.
Both of these functions do the same
myVar = $("p").text();
myVar === "Eric"

32. Use jQuery To Set <p>Eric</p> <p>BoBeric</p>
$("p").text("BoBeric");
<p>BoBeric</p>
Set a value by including the new value in quotes is how u set it to a literal value
Or reference a variable by not using quotes.
Both do the same thing
myVar = "BoBeric"; $("p").text(myVar);
myVar === "BoBeric" <p>BoBeric</p>

33. Questions?
Questions so far about 15 minutes

34. Plugins
Lets get into the meat of jQuery for beginners

35. Viva Variety! plugins.jquery.com
“If you want to create an animation, effect or UI component, chances are pretty good that someone has done your work for you already.”
-Eric Steinborn 2010
plugins.jquery.com
Trust me on this

36. I Will Be Covering These Plugins
ColorBox
Slideshow plugin
tablesorter
Table formatting & row sorting
ListNav
Filter long lists
Left out qTip due to timing constraints

37. That's Just Typical.. Download the plugin from its site.
Depending on the plugin you can have 1 or more files to install.
Copy the plugin, and any of its dependencies to your server.
If needed call css <link href="plugincss.css" />
Call jQuery <script src="jQuery.js">
Call the plugin <script src"jQuery.pluginname.js">
Initialize plugin $("#mypluginContainer").pluginInit();
This is your typical plugin installation

38. Go-Go-Get ColorBox!
Go to colorpowered.com/colorbox/ This is what you'll get
Colorbox = js
Content = demos
Examples = themes
Inclused the illustrator file for creating your own custom theme
READ THE README

39. Go-Go-Install ColorBox!
Extract min.js to my "/js/plugins/" folder I like example 2 so I'll extract These to my /css/ folder
First img is of the /colorbox/
Second is the /example3/
Colorbox references images in the folder that’s in direct relation to the placement of the css file.

40. Go-Go-Prep ColorBox! In the <head> type:
<link rel="stylesheet" href="css/colorbox.css" media="screen" />
In the <body> type:
<a href="unicorn.jpg" rel="colorbox"><img src="unicorn-t.jpg" /></a>
<a href="rainbows.jpg" rel="colorbox"><img src="rainbows-t.jpg" /></a>
<a href="sparkles.jpg" rel="colorbox"><img src="sparkles-t.jpg" /></a>
Before the ending </body> type:
<script type="text/javascipt" src="js/jquery.js"></script>
<script type="text/javascipt" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascipt"></script>
Head
Body
Script – empty, next page

41. Go-Go-Gadget ColorBox!
Inside the empty <script> tag I just entered I'll init ColorBox
<script>
$(function(){
$("a[rel='colorbox']").colorbox();
});
</script>
Now anytime I click on a thumbnail, I’ll see a ColorBox with my image in it.
A rel= is an advanced CSS3 selector.

42. Go-Go-Cut It Out Already!
jsbin.com/ecayo3/18#slide41
Set custom options for ColorBox like this: $("a[rel='colorbox']").colorbox({ slideshow: true, // shows all your images in sequence slideshowSpeed: 5000, // set the speed of the slideshow in MS transition: "fade",// set the transition between images speed: 1000 // set the speed of the transition in MS }); Download colorpowered.com/colorbox/
Here are some of the options that can be set for colorbox. Check the full list on their website
DEMO

43. tablesorter
Head: <link href="css/tablesorter.css" /> HTML: <table id="ericsDreams"><!-- full table code --></table> Foot: <script src="js/jquery.tablesorter.min.js"></script> <script> $(function(){ $("#ericsDreams").tablesorter(); }); </script>

44. tablesorter Options
Set custom options for tablesorter like this: $("#ericsDreams").tablesorter({ widgets: ['zebra'] // Zebra stripes alternating rows }); Download tablesorter.com/docs/
DEMO

45. ListNav
Head: <link href="css/listnav.css" /> HTML: <div id="ericsDreams-nav"></div> <!--needed for nav list--> <ul id="ericsDreams"><!-- lots of li's --></ul> Foot: <script src="js/jquery.listnav.min.2.1.js"></script> <script> $(function(){ $("#ericsDreams").listnav(); }); </script>

46. ListNav Options
jsbin.com/ecayo3/18#slide45
Set custom options for ListNav like this: $("#ericsDreams").listnav({ showCounts: false, // Don’t show counts above letters noMatchText: "Fail!", // Custom text for invalid selections cookieName: "Dreams", // Selection saved in Cookie includeOther: true // Include an Other option }); // include cookie plugin for cookieName to function Download ihwy.com/Labs/jquery-listnav-plugin.aspx
DEMO

47. Great References
John Resig's introduction slides jQuery 1.4 Cheat Sheet jQuery API jQuery Forums YAYquery Podcast (explicit) DEMOS: jsbin.com/ecayo3/18
All demos are on JS Bin. It’s a javascript sandbox that allows you to edit my code examples directly.

48. I Like Plugins! Show Us More!