intro to jquery
Post on 01-Sep-2014
4.023 Views
Preview:
DESCRIPTION
TRANSCRIPT
Webmasters' GuildFriday, June 4, 2010
Eric.Steinborn@dcjs.state.ny.us
Webmasters' GuildFriday, June 4, 2010
Poll
Webmasters' GuildFriday, June 4, 2010
Just Thought you should know
Webmasters' GuildFriday, June 4, 2010
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!
Webmasters' GuildFriday, June 4, 2010
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
Webmasters' GuildFriday, June 4, 2010
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
Webmasters' GuildFriday, June 4, 2010
I <3 The jQuery Community
Webmasters' GuildFriday, June 4, 2010
Webmasters' GuildFriday, June 4, 2010
PWNS All Other Frameworks
Webmasters' GuildFriday, June 4, 2010
Who Uses jQuery?
Google Amazon
IBM Microsoft
Twitter Dell
docs.jquery.com/Sites_Using_jQuery
Webmasters' GuildFriday, June 4, 2010
Who Uses jQuery In NY?
Alcoholism&
Substance AbuseCIO OFT Criminal Justice
Labor MTA Port Authority
Webmasters' GuildFriday, June 4, 2010
What is the DOM?
Document Object Model (DOM): nounBlah blah blah long
definition that makes little sense….
Webmasters' GuildFriday, June 4, 2010
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' GuildFriday, June 4, 2010
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…
});
Webmasters' GuildFriday, June 4, 2010
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:
Webmasters' GuildFriday, June 4, 2010
We get it Eric, you're a geek…Get to the jQuery already!
Your about ta get a wedgie NERD!*
*spelling intentional
Webmasters' GuildFriday, June 4, 2010
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
Webmasters' GuildFriday, June 4, 2010
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.
Webmasters' GuildFriday, June 4, 2010
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
Webmasters' GuildFriday, June 4, 2010
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.
Webmasters' GuildFriday, June 4, 2010
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/
Webmasters' GuildFriday, June 4, 2010
Get Classy <p>
jQuery:
$("p").addClass("sophisticated");
Before:
<p>
After:
<p class="sophisticated">
jsbin.com/ecayo3/18#slide22
Webmasters' GuildFriday, June 4, 2010
This <p> Has No Class At All!
jQuery:
$("p").removeClass("sophisticated");
Before:
<p class="sophisticated">
After:
<p class="">
jsbin.com/ecayo3/18#slide22
Webmasters' GuildFriday, June 4, 2010
<div> Hide and Seek
jQuery:
$("div").show();
Before:
<div style="display:none;">
After:
<div style="display:block;">
jsbin.com/ecayo3/18#slide24
Webmasters' GuildFriday, June 4, 2010
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>
jsbin.com/ecayo3/18#slide25
Webmasters' GuildFriday, June 4, 2010
You Can Chain Most Methods Together
$("p").addClass("sophisticated").text("Hello World!").show();
jsbin.com/ecayo3/18#slide26
Webmasters' GuildFriday, June 4, 2010
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});
jsbin.com/ecayo3/18#slide27
Webmasters' GuildFriday, June 4, 2010
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/
Webmasters' GuildFriday, June 4, 2010
Getters and Setters
Webmasters' GuildFriday, June 4, 2010
Dual Purpose Methods
$("#foo").text();$("#foo").text("foo");
Webmasters' GuildFriday, June 4, 2010
Use jQuery To Get
<p>Eric</p>
• === "Eric"$("p").text();
•=== "Eric"$("p").text();
Webmasters' GuildFriday, June 4, 2010
Use jQuery To Set
<p>Eric</p>
• <p>BoBeric</p>$
("p").text("BoBeric");
•<p>BoBeric</p>$("p").text("BoBeric");
Webmasters' GuildFriday, June 4, 2010
Questions?
Webmasters' GuildFriday, June 4, 2010
Plugins
Webmasters' GuildFriday, June 4, 2010
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
Webmasters' GuildFriday, June 4, 2010
I Will Be Covering These Plugins
•Slideshow pluginColorBox
•Table formatting & row sortingtablesorter
•Filter long listsListNav
Webmasters' GuildFriday, June 4, 2010
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' GuildFriday, June 4, 2010
Go-Go-Get ColorBox!
Go to colorpowered.com/colorbox/
This is what you'll get
Webmasters' GuildFriday, June 4, 2010
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
Webmasters' GuildFriday, June 4, 2010
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>
Webmasters' GuildFriday, June 4, 2010
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.
Webmasters' GuildFriday, June 4, 2010
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/
jsbin.com/ecayo3/18#slide41
Webmasters' GuildFriday, June 4, 2010
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' GuildFriday, June 4, 2010
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
Webmasters' GuildFriday, June 4, 2010
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>
Webmasters' GuildFriday, June 4, 2010
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
jsbin.com/ecayo3/18#slide45
Webmasters' GuildFriday, June 4, 2010
Great References
John Resig's introduction slidesjQuery 1.4 Cheat SheetjQuery APIjQuery ForumsYAYquery Podcast (explicit)
DEMOS:jsbin.com/ecayo3/18
eric.steinborn@dcjs.state.ny.us
Webmasters' GuildFriday, June 4, 2010
I Like Plugins!Show Us More!
top related