Scribd
Upload
40 views

Case Study Jquery

JQuery is a very lightweight Javascript framework, that takes most of the headache out of 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.

Uploaded by

AbdullaM.Assaqqaf
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
40 views

Case Study Jquery

JQuery is a very lightweight Javascript framework, that takes most of the headache out of 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.

Uploaded by

AbdullaM.Assaqqaf
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 12

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

You might also like