Intro to jQuery Nysforum

8/6/2019 Intro to jQuery Nysforum

http://slidepdf.com/reader/full/intro-to-jquery-nysforum 1/48

Webmasters' Guild

Friday, June 4, 2010

[email protected]



Webmasters' Guild


PollPollPollPoll



Webmasters' Guild


Just Thought you should know



Webmasters' Guild


Eric SteinbornEric 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!



Webmasters' Guild


What is jQuery?

�jQuery is an Open-Source JavaScript framework thatsimplifies 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 A Little Bit About jQuery



Webmasters' Guild


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 A Little Bit About jQuery



Webmasters' Guild


I <3 The jQuery CommunityI <3 The jQuery Community



Webmasters' Guild




Webmasters' Guild


PWNS All Other FrameworksPWNS All Other Frameworks



Webmasters' Guild


Who Uses jQuery?Who Uses jQuery?

Google Amazon IBM

Microsoft Twitter Dell

docs.jquery.com/Sites_Using_jQuery



Webmasters' Guild


Who Uses jQuery In NY?Who Uses jQuery In NY?

Alcoholism&

Substance AbuseCIO OFT Criminal Justice

Labor MTA Port Authority



Webmasters' Guild


What is the DOM?What is the DOM?

Document Object Model (DOM):noun

Blah blah blah long definition

that makes little sense«.



Webmasters' Guild


What Is The DOM?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



Webmasters' Guild


Wait!!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. Wr ap all your jQuer y code with the document r eady function:

$(document).ready(function(){

// inser t sweet, sweet jQuer y code her e«

});



Webmasters' Guild


And What If I Don't And What If I Don't WannaWanna, Huh?, 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 1990revolutionizing the Web as we know it. While seemingly great, italso creates a paradox and destroys the universe. * (<1%)

*(has yet to be fully verified)

1 of 3 things will happen:



Webmasters' Guild


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

Your about ta get a wedgie NERD!**spelling intentional

Your about ta get a wedgie NERD!**spelling intentional



Webmasters' Guild


Loading jQueryLoading 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



Webmasters' Guild


Load Scripts At The BottomLoad Scripts At The Bottom

Problem:

W hen sc r ipts ar e downloading they block ever ything else in almost all br owser s!

Solution:

Best pr actice: Load your sc r ipts at the bottom of your page so they don't interr upt

page content downloads.



Webmasters' Guild


And BOOM! Goes The Dynamite. And BOOM! Goes The Dynamite.

Html:

<p>Hello World! I'm Eric</p>Script:

$(function(){

$("p").addClass("isCool"); //keep telling your self that..

});

Resulting html:

<p class="isCool">Hello World! I'm Eric</p>

jsbin.com/ecayo3/18#slide19



Webmasters' Guild


Break It Down Now!Break It Down Now!

$(function(){// = $(document).ready(function(){

});

$

Initiatesthe jQueryfunction

$

= jQuery

("p")

Grabs a D elementusin a selector.

elector is in quotes.

reates a jQuery³ ollection´

<p>

.add lass("is ool");

Built in method that adds a

class to the jQueryollection

lass is in quotes.

ends with a semicolon.



Webmasters' Guild


All Your Basic Selectors Are Belong To Us All Your Basic Selectors Are Belong To Us

Uses the same syntax you use to style elements in CSS!

$("p")

$("p")

<p>

$("div")$("div")

<div>

$("#foo")$("#foo")

id="foo"

$(".foo")$(".foo")

class="foo"

api.jquery.com/category/selectors/



Webmasters' Guild


Get Classy <p>Get Classy <p>

jQuery:

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

Before:<p>

After:

<p class="sophisticated">




Webmasters' Guild


This <p> Has No Class At All!This <p> Has No Class At All!

jQuery:

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

Before:<p class="sophisticated">

After:

<p class="">




Webmasters' Guild


<div> Hide and Seek<div> Hide and Seek

jQuery:

$("div").show();

Before:<div style="display:none;">

After:

<div style="display:block;">




Webmasters' Guild


I¶m Not Lame, Am I?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>




Webmasters' Guild


You Can Chain Most Methods Together You Can Chain Most Methods Together

$("p")

.addClass("sophisticated")

.text("Hello World!")

.show();




Webmasters' Guild


Click Events Are Awesome!Click Events Are Awesome!

$("#eric").click(function(){

$(this).text("Is Cool"); // this = #er ic

alert("Take that High School!");

});

$("#eric").click(function(event){

$(this).text("Is Cool"); // this = #er ic alert("Take that High School!");

event.preventDefault(); //P r events default action

});




Webmasters' Guild


Some of Basic MethodsSome of Basic Methods

� Show a hidden element.show()

� wrap an element with <a>.wrap("<a></a>")

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

� Get/Set inner M.html()

� Get/Set Value.val()

api.jquery.com/



Webmasters' Guild


Getters and SettersGetters and SettersGetters and SettersGetters and Setters



Webmasters' Guild


Dual Purpose MethodsDual Purpose Methods

$(" foo").te t(); $(" foo").te t("foo");



Webmasters' Guild


Use jQuery To GetUse jQuery To Get

<p>Eric</p>

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

� myVar === "Eric"myVar = $("p").text();



Webmasters' Guild


Use jQuery To SetUse jQuery To Set

<p>Eric</p>

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

� myVar === "BoBeric"<p>BoBeric</p>myVar = "BoBeric";$("p").text(myVar );



Webmasters' Guild


Questions?Questions?



Webmasters' Guild


PluginsPluginsPluginsPlugins



Webmasters' Guild


Viva Variety!Viva Variety!

³If you want to create an animation, effect or UI component, chancesare pretty good that someone has done your work for you already.´

-Er ic Steinbor n 2010

plugins.jquery.com



Webmasters' Guild


I Will Be Covering These PluginsI Will Be Covering These Plugins

� Slideshow pluginColorBox

� Table formatting & row sortingtablesorter

� Filter long listsListNav



Webmasters' Guild


That's Just Typical..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();



Webmasters' Guild


GoGo--GoGo--Get ColorBox!Get ColorBox!

Go to colorpowered.com/colorbox/

This is what you'll get



Webmasters' Guild


GoGo--GoGo--Install ColorBox!Install ColorBox!

Extract min.js to my "/js/plugins/" folder

I like example 2 so I'll extract

These to my /css/ folder



Webmasters' Guild


GoGo--GoGo--Prep ColorBox!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>



Webmasters' Guild


GoGo--GoGo--Gadget ColorBox!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.



Webmasters' Guild


GoGo--GoGo--Cut It Out Already!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 t r ansition between images

speed: 1000 // set the speed of the t r ansition in MS

});

Download ColorBox @ colorpowered.com/colorbox/




Webmasters' Guild


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



Webmasters' Guild


tablesorter Optionstablesorter Options

Set custom options for tablesorter like this:

$("#ericsDreams").tablesorter ({

widgets: ['zebra'] // Zebr a st r ipes alter nating r ows

});

Download tablesorter @ tablesorter.com/docs/

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



Webmasters' Guild


ListNavListNav

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>



Webmasters' Guild


ListNavListNav OptionsOptions

Set custom options for ListNav like this:

$("#ericsDreams").listnav({

showCounts: false, // Don¶t show counts above letter s

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 ListNav @ ihwy.com/Labs/jquery-listnav-plugin.aspx




Webmasters' Guild


Great ReferencesGreat References

John Resig's introduction slides

jQuery 1.4 Cheat Sheet

jQuery API

jQuery Forums

YAYquery Podcast (explicit)

DEMOS:

jsbin.com/ecayo3/18

[email protected]



Webmasters' Guild

Friday June 4 2010

I LikeI LikePlugins!Plugins!Show UsShow UsMore!More!

Intro to jQuery Nysforum

Documents