Building Interactive Prototypes With Jquery
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Building Interactive Prototypes With Jquery as PDF for free.
More details
- Words: 550
- Pages: 31
Building Interactive Prototypes with jQuery @Media Ajax - November 2007 John Resig (ejohn.org)
What is jQuery? ✦
An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
Ideal for Prototyping ✦
Completely unobtrusive
✦
Uses CSS to layer functionality
✦
Easy to separate behavior
✦
Quick, terse, syntax
The Focus of jQuery
{
{
Find Some Elements Do something with them
$(“div”).addClass(“special”); jQuery Object
The jQuery Object ✦
Commonly named ‘$’
✦
Also named ‘jQuery’
✦
Completely valid: ✦ jQuery(“div”).addClass(“special”);
Find Some Elements... ✦
Full CSS Selector 1-3 Support
✦
Basic XPath
✦
Better CSS Selector support than most browsers
$(“div”)
$(“#body”)
$(“div#body”)
$(“div.contents p”)
$(“div > div”)
$(“div:has(div)”)
Do something with them ✦
DOM Manipulation (append, prepend, remove)
✦
Events (click, hover, toggle)
✦
Effects (hide, show, slideDown, fadeOut)
✦
AJAX (load, get, post)
DOM Manipulation ✦
$(“a[target]”) .append(“ (Opens in New Window)”);
✦
$(“#body”).css({ border: “1px solid green”, height: “40px” });
Events ✦
$(“form”).submit(function(){ if ( $(“input#name”).val() == “” ) $(“span.help”).show(); });
✦
$(“a#open”).click(function(){ $(“#menu”).show(); return false; });
Animations ✦
$(“#menu”).slideDown(“slow”);
✦
Individual properties: $(“div”).animate({ fontWeight: “2em”, width: “+=20%”, color: “green” // via plugin });
✦
Callbacks: $(“div”).hide(500, function(){ // $(this) is an individual
What is jQuery? ✦
An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
Ideal for Prototyping ✦
Completely unobtrusive
✦
Uses CSS to layer functionality
✦
Easy to separate behavior
✦
Quick, terse, syntax
The Focus of jQuery
{
{
Find Some Elements Do something with them
$(“div”).addClass(“special”); jQuery Object
The jQuery Object ✦
Commonly named ‘$’
✦
Also named ‘jQuery’
✦
Completely valid: ✦ jQuery(“div”).addClass(“special”);
Find Some Elements... ✦
Full CSS Selector 1-3 Support
✦
Basic XPath
✦
Better CSS Selector support than most browsers
$(“div”)
Some Header
...
...
$(“#body”)
Some Header
...
...
$(“div#body”)
Some Header
...
...
$(“div.contents p”)
Some Header
...
...
$(“div > div”)
Some Header
...
...
$(“div:has(div)”)
Some Header
...
...
Do something with them ✦
DOM Manipulation (append, prepend, remove)
✦
Events (click, hover, toggle)
✦
Effects (hide, show, slideDown, fadeOut)
✦
AJAX (load, get, post)
DOM Manipulation ✦
$(“a[target]”) .append(“ (Opens in New Window)”);
✦
$(“#body”).css({ border: “1px solid green”, height: “40px” });
Events ✦
$(“form”).submit(function(){ if ( $(“input#name”).val() == “” ) $(“span.help”).show(); });
✦
$(“a#open”).click(function(){ $(“#menu”).show(); return false; });
Animations ✦
$(“#menu”).slideDown(“slow”);
✦
Individual properties: $(“div”).animate({ fontWeight: “2em”, width: “+=20%”, color: “green” // via plugin });
✦
Callbacks: $(“div”).hide(500, function(){ // $(this) is an individual
element $(this).show(500); });
Ajax ✦
$(“#body”).load(“sample.html div > h1”); ✦ Before: ✦ After:
✦
$.getJSON(“test.json”, function(js){ for ( var name in js ) $(“ul”).append(“” + name + “ ”); });
Chaining ✦
You can have multiple actions against a single set of elements
✦
$(“div”).hide();
✦
$(“div”).hide().css(“color”,”blue”);
✦
$(“div”).hide().css(“color”,”blue”).slideDown();
Chaining (cont.) ✦
$(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]
Why jQuery? ✦
Fully documented
✦
Great community
✦
Tons of plugins
✦
Small size (14kb)
✦
Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
jQuery Plugins ✦
Extend the jQuery system
✦
Add on extra methods: $(“div”).hideRemove();
✦
Trivial to implement: jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
Plugins ✦
Drag and Drop
✦
Sortables
✦
Modal Dialogs
✦
Tabbed Navigation
✦
Sortable Tables
✦
And hundreds more...
Prototyping Demos
Accordion Menu http://jquery.com/files/apple/ http://jquery.com/files/apple/done.html
Social Networking http://jquery.com/files/social/ http://jquery.com/files/social/done.php
Todo List http://jquery.com/files/todo/ http://jquery.com/files/todo/done.php
Who uses jQuery? ✦
Google
✦
IBM
✦
NBC
✦
Amazon
✦
Wordpress
✦
Digg
✦
many others...
Community ✦
Very active mailing list ✦ 108+ Posts/Day ✦ 4000+ Members
✦
Technorati: Dozens of blog posts per day
Books ✦
2 Books Released: ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt)
✦
1 Book in Progress: ✦ jQuery in Action (Manning)
jQuery UI ✦
Full set of themed widgets and components
✦
Drag & Drop
✦
Tabs
✦
Table
✦
Modal Dialog
✦
etc.
jquery.com docs.jquery.com - jquery.com/plugins More:
ui.jquery.com visualjquery.com learningjquery.com
Ajax ✦
$(“#body”).load(“sample.html div > h1”); ✦ Before: ✦ After:
Hello, world!
✦
$.getJSON(“test.json”, function(js){ for ( var name in js ) $(“ul”).append(“
Chaining ✦
You can have multiple actions against a single set of elements
✦
$(“div”).hide();
✦
$(“div”).hide().css(“color”,”blue”);
✦
$(“div”).hide().css(“color”,”blue”).slideDown();
Chaining (cont.) ✦
$(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]
Why jQuery? ✦
Fully documented
✦
Great community
✦
Tons of plugins
✦
Small size (14kb)
✦
Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
jQuery Plugins ✦
Extend the jQuery system
✦
Add on extra methods: $(“div”).hideRemove();
✦
Trivial to implement: jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
Plugins ✦
Drag and Drop
✦
Sortables
✦
Modal Dialogs
✦
Tabbed Navigation
✦
Sortable Tables
✦
And hundreds more...
Prototyping Demos
Accordion Menu http://jquery.com/files/apple/ http://jquery.com/files/apple/done.html
Social Networking http://jquery.com/files/social/ http://jquery.com/files/social/done.php
Todo List http://jquery.com/files/todo/ http://jquery.com/files/todo/done.php
Who uses jQuery? ✦
✦
IBM
✦
NBC
✦
Amazon
✦
Wordpress
✦
Digg
✦
many others...
Community ✦
Very active mailing list ✦ 108+ Posts/Day ✦ 4000+ Members
✦
Technorati: Dozens of blog posts per day
Books ✦
2 Books Released: ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt)
✦
1 Book in Progress: ✦ jQuery in Action (Manning)
jQuery UI ✦
Full set of themed widgets and components
✦
Drag & Drop
✦
Tabs
✦
Table
✦
Modal Dialog
✦
etc.
jquery.com docs.jquery.com - jquery.com/plugins More:
ui.jquery.com visualjquery.com learningjquery.com
Related Documents
Building Interactive Prototypes With Jquery
December 2019 71
Unobtrusive Javascript With Jquery
July 2020 12
Interactive
December 2019 76
Building With Logs
June 2020 13
Building Lammps With Fftw
June 2020 8
Jquery-1.3.2
June 2020 10More Documents from ""
Anti-rdbms: A List Of Distributed Key-value Stores
April 2020 13
10 Cool Things In Rails 2.3
April 2020 16
Object Oriented Css
April 2020 18
