jQuery From the Ground Up
-
Upload
kevin-griffin -
Category
Technology
-
view
112 -
download
7
description
Transcript of jQuery From the Ground Up
![Page 1: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/1.jpg)
jQuery From The Ground UpKevin Griffin
![Page 2: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/2.jpg)
About Me
0Kevin Griffin0Chesapeake, VA0ASPInsider0 INETA Mentor for Virginia0Leader of the Hampton Roads .NET Users Group
0http://www.kevgriffin.com0Twitter: 1kevgriff0Email: [email protected]
![Page 3: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/3.jpg)
Mid-Atlantic Developer’s Group
0http://midatlanticdevs.groups.live.com0Mailing list for developers based in the Mid-Atlantic
region0Keep up to date with what’s going on outside your
group0Ask questions0Post jobs0Network!
![Page 4: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/4.jpg)
Before We Begin
0You’re not tied to your chair0 Code camps are about getting the best experience
possible0Questions
0 Ask them, anytime.
![Page 5: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/5.jpg)
Agenda
0What Is jQuery0Getting jQuery0Setting Up jQuery0Using jQuery0 jQuery UI0Plugins0Demos! Demos! Demos!
![Page 6: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/6.jpg)
What Is jQuery?
0 JavaScript library0Powerful document traversal0Event handling0Animations0AJAX0Makes JavaScript not SUCK!
![Page 7: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/7.jpg)
Document Transversal?
0Where do elements exist on the page?0How quickly can we access them?
![Page 8: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/8.jpg)
![Page 9: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/9.jpg)
![Page 10: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/10.jpg)
Who Use’s jQuery?
0Google0Netflix0Dell0Bank of America0Major League Baseball0Digg0NBC0CBS
![Page 11: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/11.jpg)
Browser Compatibility
0 Internet Explorer 6.0+0Firefox 2.0 +0Safari 3.0+0Opera 9.0+0Chrome
![Page 12: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/12.jpg)
Getting jQuery
![Page 13: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/13.jpg)
Production vs. Development
0Production0 Minified0 Quick to download0 Impossible to read and debug
0Development0 Commented0 Formatted0 Large file
![Page 14: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/14.jpg)
Deployment Tips
0Don’t host jQuery yourself!0 http://code.google.com/apis/ajaxlibs/documentation/
0 Numerous website use the Google version.0 Possibly already cached on a person’s machine.0 Both production and development versions are
available.
![Page 15: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/15.jpg)
A note about jQuery documentation
0 It’s awesome!0http://docs.jquery.com0Easy to navigate and search0Examples on every topic0Tutorials, references, and FAQs
![Page 16: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/16.jpg)
![Page 17: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/17.jpg)
![Page 18: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/18.jpg)
VS2008 Intellisense
0http://docs.jquery.com/Downloading_jQuery0Add the *-vsdoc.js file to your solution0Enjoy full jQuery Intellisense!
![Page 19: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/19.jpg)
DemoSetting up jQuery
![Page 20: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/20.jpg)
![Page 21: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/21.jpg)
Setting Up jQuery
![Page 22: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/22.jpg)
jQuery Syntax
0$(selector).function()0$ or jQuery
0 jQuery object0 selector
0 reference to an element on the page0Function
0 Any jQuery supported method or plugin.
![Page 23: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/23.jpg)
What is a selector?
0Think CSS!0 jQuery has a built in DOM transversal engine.0$(selector) returns a list of elements on the page that
match the “selector”.0Example: $(“input”) will return a list of ALL input
elements on the page.
![Page 24: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/24.jpg)
DemoSelectors
![Page 25: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/25.jpg)
$(document).ready()
0Fixes problems based on window.onload as a way of handling events when page is loaded.
0Window.onload fires only after all HTML and images have been downloaded.
0$(document).ready() fires as soon as all markup has been downloaded.
![Page 26: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/26.jpg)
DemoA Better Contact Form: Putting jQuery to Work
![Page 27: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/27.jpg)
jQuery UI
0http://jqueryui.com/0Several comment UI widgets and visual effects.0Compatible with several browsers, including IE 6.0.
![Page 28: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/28.jpg)
DemojQuery UI
![Page 29: jQuery From the Ground Up](https://reader038.fdocuments.us/reader038/viewer/2022110115/54c71d6b4a79595e4e8b45bc/html5/thumbnails/29.jpg)
3rd Party Plugins
0Hundreds of plugins available0Don’t re-invent the wheel!0AJAX, Animation, Effects, Browser Tweaks, Drag and
Drop, Forms, Layouts, Media, Menus, Navigation, Tables, UI, Widgets, etc…
0http://plugins.jquery.com