advertisement

jQuery - write less, do more javascript toolkit

50 %
50 %
advertisement
Information about jQuery - write less, do more javascript toolkit

Published on December 7, 2007

Author: girish1729

Source: slideshare.net

Description

jQuery is a fantastic toolkit for web development. I go over the basics of web development and how one has to about learning the basics of jQuery
advertisement

Introduction to jQuery Write less, do more! Girish Venkatachalam Chennai girish1729@gmail.com December 8, 2007

Basic web interface architecture Figure: basic building blocks HTML provides content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22

Basic web interface architecture Figure: basic building blocks HTML provides content CSS provides appearance, placement and layout Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22

Basic web interface architecture Figure: basic building blocks HTML provides content CSS provides appearance, placement and layout Javascript provides dynamism and defines behavior Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22

html tree structure Every html node forms part of a tree with html as root node Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22

html tree structure Every html node forms part of a tree with html as root node You can traverse the tree easily since it has a fixed structure Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22

html tree structure Every html node forms part of a tree with html as root node You can traverse the tree easily since it has a fixed structure Every node has attributes and optionally child nodes Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Javascript to manipulate DOM elements Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Javascript to manipulate DOM elements Cascading style sheets (CSS) for appearance Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Javascript to manipulate DOM elements Cascading style sheets (CSS) for appearance Learning html is a must before we do web programming! Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

What is CSS? html supplies the content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22

What is CSS? CSS determines the beauty html supplies the content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22

What is CSS? CSS determines the beauty html supplies the content What remains? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22

Intro to javascript What about the behavior? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 7 / 22

Intro to javascript What about the behavior? That is where a programming language like javascript comes in. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 7 / 22

Document Object Model What is the role of DOM in web programming? Animations Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 8 / 22

Document Object Model What is the role of DOM in web programming? Animations jQuery does a marvelous job of DOM manipulations Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 8 / 22

jQuery fundament Tiniest js/AJAX toolkit around Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Extremely well maintained with 100s of plugins Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Extremely well maintained with 100s of plugins Abstracts out portability issues and javascript gunk Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery You have to add it between the ’script’ tag you always use for javascript Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery You have to add it between the ’script’ tag you always use for javascript After all jQuery is also javascript Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery You have to add it between the ’script’ tag you always use for javascript After all jQuery is also javascript Without its disadvantages and ugliness. . . Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

Another jQuery sample $(document).ready(function (){ $(’a’).hover(function (){ $(this).hide(’slow’); },function(){ $(this).show(’fast’); }); }); This sample builds on the previous example Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22

Another jQuery sample $(document).ready(function (){ $(’a’).hover(function (){ $(this).hide(’slow’); },function(){ $(this).show(’fast’); }); }); This sample builds on the previous example This is all it takes for an animation using jQuery (once again) Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22

Another jQuery sample $(document).ready(function (){ $(’a’).hover(function (){ $(this).hide(’slow’); },function(){ $(this).show(’fast’); }); }); This sample builds on the previous example This is all it takes for an animation using jQuery (once again) But it is not just animations. . . Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small This has led to a subculture of jQuery plugins - extensions are available for nearly every web design task you can think of Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small This has led to a subculture of jQuery plugins - extensions are available for nearly every web design task you can think of We shall take a peek at some of the extensions Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

jQuery plugins jScrollPane Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Keyboard shortcut handling Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Keyboard shortcut handling Impromptu And much much more... Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

Advanced jQuery I Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22

Advanced jQuery I jQuery can work with AJAX and other javascript libraries seamlessly Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22

Advanced jQuery I jQuery can work with AJAX and other javascript libraries seamlessly jQuery can obviate the need for using javascript directly for most common web app/UI development needs. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22

Advanced jQuery II $(document).ready(function() { $(quot;#ratingquot;).append(quot;Please rate: quot;); for ( var i = 1; i <= 5; i++ ) $(quot;#ratingquot;).append(quot;<a href=’#’>quot; + i + quot;</a> quot;); $(quot;#rating aquot;).click(function(e){ $.post(quot;rate.phpquot;, {rating: $(this).html()}, function(xml) { $(quot;#ratingquot;).html( quot;Thanks for rating, current average: quot; + $(quot;averagequot;, xml).text() + quot;, number of votes: quot; + $(quot;countquot;, xml).text() ); }); return false; }); }); Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 18 / 22

Further study More selectors and advanced use is gained by experience $(’#fooid’).onblur(); $(’.fooclass’).onmousever(); $(’div#fooid’).find(); $(’h1’).css(’text-transform’,’underline’); $(’div’).addClass(’colorful’); Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 20 / 22

Further study More selectors and advanced use is gained by experience $(’#fooid’).onblur(); $(’.fooclass’).onmousever(); $(’div#fooid’).find(); $(’h1’).css(’text-transform’,’underline’); $(’div’).addClass(’colorful’); Possibilities are endless! Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 20 / 22

Questions? Discussion and questions? http://jquery.com 1 http://visualjquery.com 2 http://www.alistapart.com 3 http://www.csszengarden.com 4 Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 22 / 22

Add a comment

Related pages

jQuery

jQuery: The Write Less, Do More, JavaScript Library. jQuery; jQuery UI; jQuery Mobile; Sizzle; ... Learning jQuery Fourth Edition Karl Swedberg and ...
Read more

jQuery Foundation

jQuery: The Write Less, Do More, JavaScript Library. jQuery; ... (JavaScript). For more information, ... Support the jQuery Foundation.
Read more

jQuery - Quora - The best answer to any question

jQuery is a javascript toolkit created by John Resig with the motto of "Write less, do more". jQuery became popular due to its developer friendly API which ...
Read more

What is jQuery ? Write less, do more - Signs of Safety

... Write less, do more. jQuery simplifies HTML document ... jQuery is a JavaScript toolkit designed to simplify various tasks by writing less ...
Read more

jQuery: The Write Less, Do More, JavaScript Library

Grab The Latest JQuery! Choose your compression level: ... Download. Current Stable Release: v1.8 © 2010 The jQuery Project. Contribution by Abdullah Erbey.
Read more

jQuery Introduction - W3Schools Online Web Tutorials

jQuery Tutorial jQuery HOME jQuery Intro jQuery Get Started jQuery Syntax jQuery Selectors jQuery Events ... "write less, do more", JavaScript library.
Read more

jQuery - write less, do more javascript toolkit - 豆丁网

Introduction to jQuery Write less, do more! Girish Venkatachalam Chennai girish1729@gmail.com December 8, 2007 Basic web interface architecture Figure ...
Read more

jQuery - Overview - Tutorials for Google Maps, Joomla ...

What is jQuery? jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto − Write less, do more. jQuery simplifies ...
Read more

jQuery.ajax() | jQuery API Documentation

jQuery: The Write Less, Do More, JavaScript Library. ... object returned by $.ajax() as of jQuery 1.5 is a ... $.ajax() will execute the JavaScript that is ...
Read more