intro to jquery

Webmasters' GuildFriday, June 4, 2010

[email protected]

mailto:[email protected]


Poll


Just Thought you should know


Eric Steinborn

IT2P @ 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!


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 1.4.2 (2/19/10)

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..

A Little Bit About jQuery

http://api.jquery.com/

http://forum.jquery.com/

http://trends.builtwith.com/javascript/JQuery




I <3 The jQuery Community


PWNS All Other Frameworks


Who Uses jQuery?

Google Amazon

IBM Microsoft

Twitter Dell

docs.jquery.com/Sites_Using_jQuery

http://docs.jquery.com/Sites_Using_jQuery

http://docs.jquery.com/Sites_Using_jQuery


Who Uses jQuery In NY?

Alcoholism&

Substance AbuseCIO OFT Criminal Justice

Labor MTA Port Authority


What is the DOM?

Document Object Model (DOM): nounBlah blah blah long

definition that makes little sense….


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


Wait!!

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…

});


And What If I Don't Wanna, Huh?

1. Code doesn't work, throws an error (90%)

2. Code works… this page load, next page load see #1. (~9%)3. 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 of 3 things will happen:


We get it Eric, you're a geek…Get to the jQuery already!

Your about ta get a wedgie NERD!*

*spelling intentional


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-1.4.2.js

– CDN's are Gzipped and minified

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js








http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js






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.


And BOOM! Goes The Dynamite.

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>

jsbin.com/ecayo3/18#slide19

http://jsbin.com/ecayo3/18


Break It Down Now!$(function(){// = $(document).ready(function(){

});

$

Initiates the jQuery function

$ =

jQuery

("p")

Grabs a DOM element using a CSS selector.

Selector is in quotes.

Creates a jQuery “Collection”

<p>

.addClass("isCool");

Built in method that adds a class to the jQuery

Collection

Class is in quotes.

ends with a semicolon.


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"

api.jquery.com/category/selectors/

http://api.jquery.com/category/selectors/


Get Classy <p>

jQuery:

$("p").addClass("sophisticated");

Before:

<p>

After:

<p class="sophisticated">




This <p> Has No Class At All!

jQuery:

$("p").removeClass("sophisticated");

Before:

<p class="sophisticated">

After:

<p class="">





<div> Hide and Seek

jQuery:

$("div").show();

Before:

<div style="display:none;">

After:

<div style="display:block;">




I’m Not Lame, Am I?

jQuery:

$("#eric").text("Is Cool");

Before:

<p id="eric">Is Lame</p>

After:

<p id="eric">Is Cool</p>




You Can Chain Most Methods Together

$("p").addClass("sophisticated").text("Hello World!").show();




Click Events Are Awesome!

$("#eric").click(function(){$(this).text("Is Cool"); //

this = #ericalert("Take that High

School!");});

$("#eric").click(function(event){$(this).text("Is Cool"); // this = #ericalert("Take that High School!");event.preventDefault(); //Prevents default

action});




Some of Basic Methods

•Show a hidden element.show()•wrap an element with <a>.wrap("<a></a>")

•Select parent <p>.parent("p")

•Get/Set innerHTML.html()•Get/Set Value.val()

api.jquery.com/



Getters and Setters


Dual Purpose Methods

$("#foo").text();$("#foo").text("foo");


Use jQuery To Get

<p>Eric</p>

• === "Eric"$("p").text();

•=== "Eric"$("p").text();


Use jQuery To Set

<p>Eric</p>

• <p>BoBeric</p>$

("p").text("BoBeric");

•<p>BoBeric</p>$("p").text("BoBeric");


Questions?


Plugins


Viva Variety!

“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

http://plugins.jquery.com/


I Will Be Covering These Plugins

•Slideshow pluginColorBox

•Table formatting & row sortingtablesorter

•Filter long listsListNav


That's Just Typical..

1. Download the plugin from its site. – Depending on the plugin you can have 1 or more files to install.

2. Copy the plugin, and any of its dependencies to your server.

3. If needed call css <link href="plugincss.css" />

4. Call jQuery <script src="jQuery.js">

5. Call the plugin <script src"jQuery.pluginname.js">

6. Initialize plugin $("#mypluginContainer").pluginInit();


Go-Go-Get ColorBox!

Go to colorpowered.com/colorbox/

This is what you'll get

http://colorpowered.com/colorbox/




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


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>


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.


Go-Go-Cut It Out Already!

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 ColorBox @ colorpowered.com/colorbox/






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>


tablesorter Options

Set custom options for tablesorter like this:$("#ericsDreams").tablesorter({

widgets: ['zebra'] // Zebra stripes alternating rows

});

Download tablesorter @ tablesorter.com/docs/

http://jsbin.com/ecayo3/18#slide43

http://tablesorter.com/docs/


ListNav

Head: <link href="css/listnav.css" />HTML:

<div id="ericsDreams-nav"></div> <ul id="ericsDreams"></ul>

Foot: <script

src="js/jquery.listnav.min.2.1.js"></script> <script>

$(function(){$("#ericsDreams").listnav();

}); </script>


ListNav Options

Set custom options for ListNav like this:$("#ericsDreams").listnav({ showCounts: false, // Don’t show counts above

lettersnoMatchText: "Fail!", // Custom text for invalid selectionscookieName: "Dreams", // Selection saved in CookieincludeOther: true // Include an Other option [~!@#]

});

// include cookie plugin for cookieName to functionDownload ListNav @ ihwy.com/Labs/jquery-listnav-plugin.aspx


http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx



Great References

John Resig's introduction slidesjQuery 1.4 Cheat SheetjQuery APIjQuery ForumsYAYquery Podcast (explicit)

DEMOS:jsbin.com/ecayo3/18

[email protected]

http://ejohn.org/apps/workshop/intro/

http://labs.impulsestudios.ca/downloads/impulse_studios-jquery_cheat_sheet-1.0.pdf


http://forums.jquery.com/

http://www.yayquery.com/


mailto:[email protected]


I Like Plugins!Show Us More!

intro to jquery

Technology

javascript

jquery

love