Case Study: Jquery Framework
What exactly is jQuery?
jQuery is a very lightweight Javascript framework, that takes most of the headache out from writing pure Javascript in your applications. It has many very powerful features, some of which include: easily traversing the DOM, adding slick animations and effects to elements, and super simple Ajax techniques and methods. Perhaps the jQuery home page describes jQuery most accurately: Query is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
With JavaScript show a hidden element
if (browserType == "gecko" ) document.poppedLayer = eval('document.getElementById(HiddenDIV")'); else if (browserType == "ie") document.poppedLayer = eval('document.getElementById(HiddenDIV")'); else document.poppedLayer = eval('document.layers[HiddenDIV"]'); document.poppedLayer.style.visibility = visible;
Show a hidden div using jQuery
(#HiddenDIV).show();
Jquery Feature
jQuery is JavaScript It's a light-weight library (19kb minified and GZIPed) Easy and fast HTML DOM Selection Built to work on all modern browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+) It's Open Source Well documented (http://docs.jquery.com) jQuery is Extensible
Create/release your own plugins Thousands of plugins available Prototype Mootools
jQuery works with other libraries
jQuery's History
jQuery
was released:
January 14, 2006
Whos Using It?
Google Dell Microsoft CBS NBC Major League Baseball
Amazon Bank of America Mozilla Netflix Digg Wordpress
Setting Up
Include jQuery on the page
Download latest from jQuery.com <script src="jquery-1.3.2.min.js" type="text/javascript></script> Include the latest from Google AJAX Libraries API <script src="http://ajax.googleapis.com/ajax/libs/jquery/1 .3.2/jquery.min.js" type="text/javascript"></script>
<!doctype html> <html> <head> <script type="text/javascript"src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){
alert("Thanks for visiting!"); });
</script> </head> <body></body> </html>
<!doctype html> <html> <head> <script type="text/javascript"src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
Element Selection - CSS
$(document).ready(function(){ //select all p elements $(p); //select an element with id=soem-id $(#some-id); //select all elements with class=soem-class $(.class); });
jQuery is Structured
Core Selectors Attributes Traversing Manipulation CSS Events AJAX Effects
