![Page 1: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/1.jpg)
Definition from Wikipedia
![Page 2: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/2.jpg)
The Prototype JavaScript Framework implemented as a single file of JavaScript
code named prototype.js (http://prototypejs.org/ )
◦ Explanation◦ Example
![Page 3: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/3.jpg)
JavaScript Library
Functionality◦ DOM scripting & event handling◦ Ajax◦ User interface effects◦ Form validation
Live Examples of jQuery
3
![Page 4: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/4.jpg)
Lightweight◦ 14kb (Minified and Gzipped)
Cross-browser support ◦ IE , FireFox, Safari and Opera
CSS-like syntax◦ easy for developers/non-developers to understand
Active developer community Extensible - plugins
4
![Page 5: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/5.jpg)
About jQuery How jQuery Works: The Basics
◦ http://learn.jquery.com/about-jquery/how-jquery-works/
Tutorials◦ http
://javabeginnerstutorial.com/jquery/jquery-tutorial-beginners-examples/
◦ http://www.w3schools.com/jquery/default.asp ◦ http://www.w3schools.com/jquery/jquery_examples.asp
Next jQuery Tutorial◦ http://tutorials.jenkov.com/jquery/index.html
![Page 6: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/6.jpg)
Height()◦ http://api.jquery.com/height/◦ Resizable◦ http://jqueryui.com/resizable/
Slide Show?◦ http://www.elated.com/articles/elegant-sliding-im
age-gallery-with-jquery/
![Page 7: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/7.jpg)
A JavaScript API which makes it easy to perform various standard JavaScript actions
JQuery takes care of cross browser compatibility issues, so you can focus on getting your page to work as intended.
What can you do with Jquery?◦ Select HTML elements in various ways, easing access to the elements to be enhanced.◦ Style the HTML elements dynamically, by manipulating their CSS properties or classes.◦ Manipulate the DOM (Document Object Model) of your page, (copy, move, modify etc.)◦ Animate the DOM elements, e.g. fading in / out, sliding, change color, change size etc.◦ Respond to events like mouse-over, mouse-out, change etc.◦ AJAX enable your web pages using JQuery's smart AJAX features.◦ Use the many JQuery plugins (incl. JQuery UI), which contains all kinds of smart widgets.◦ Create advanced web application user interfaces, which resemble desktop user
interfaces. JQuery works naturally with the HTML elements in the browser, so it doesn't
matter if they are HTML 4 or HTML 5 elements. As long as your browser supports it, so does JQuery. You can find JQuery at JQuery.com.
![Page 8: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/8.jpg)
When you use JQuery, you typically follow these steps of action:◦ Wait for the page to be ready.◦ Select some HTML elements to modify.◦ Traverse the selected HTML elements.◦ Modify the HTML element attributes, CSS styles
etc.◦ Add listener functions, e.g. click() or wait for a
JQuery effect to finish etc.
![Page 9: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/9.jpg)
http://www.w3schools.com/jquery/default.asp
The jQuery syntax is made for selecting HTML elements and performing some action on the element(s) at http://www.w3schools.com/jquery/jquery_syntax.asp
Basic syntax is: $(selector).action()
jQuery jquery Property at http://www.w3schools.com/jquery/prop_jquery.asp
See examples at http://faculty.wwu.edu/~granier/info/JQuery/examples/
![Page 10: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/10.jpg)
1. Download◦ http://jquery.com/download/◦ Compressed or uncompressed◦ Include <script src="jquery.js"></script> in
<head>◦ Or use one CDN (Content Delivery Node)
2. Include code
10
![Page 11: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/11.jpg)
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of #foo</a>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
11
![Page 12: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/12.jpg)
$().ready(function(){
$("a").click(function(){
$("#more").toggle("slow");
return false;
});
});
12
![Page 13: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/13.jpg)
function showOneYr(str)
{
$("#main div").css("display","none");
$("#main div#"+str).css("display","block");
}
$().ready(function() {
showOneYr($('#main div').attr("id"));
$("#main p").after("<h2>Choose a Year</h2><p id='yearLinks' class='centered smaller'>| </p>");
$("#main h3").each(function() {
yrTxt = $(this).text();
$("#yearLinks").append('<a href="#">'+yrTxt+'</a> | ');
});
$("#yearLinks a").click(function(){
showOneYr('yr'+$(this).text());
return false;
});
});
13
![Page 14: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/14.jpg)
$().ready(function()
{
// validate the comment form when it is submitted
$("#commentForm").validate();
});
<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<input id="cemail" name="email" class="{required:true,email:true}" />
14
![Page 15: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/15.jpg)
What JavaScript libraries should I use? How do I implement? How do we manage upgrades?
15
![Page 16: Definition from Wikipedia. The Prototype JavaScript Framework implemented as a single file of JavaScript code named prototype.js (](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649dc05503460f94ab48fe/html5/thumbnails/16.jpg)
www.jquery.com – jQuery homepage www.learningjquery.com – jQuery tutorial blog http://docs.jquery.com/Live_Examples_of_jQuery http://www.queness.com/resources/ www.visualjquery.com – jQuery documentation http://ui.jquery.com – jQuery user interface http://bassistance.de/jquery-plugins/ - useful jQuery
plugins.
16