jQuery
Some weeks back I came across jQuery. Once in a while a library comes along that makes you say "wow". To me jQuery is among those. jQueryis a JavaScript library that allows you to perform complicated (orsometimes not complicated but boring) JavaScript work in just a fewlines.
What's the fuss about jQuery! Lets say you want to do the following:
Here is the complete html code...save it to file test.html. Note that Iinclude the latest js code directly from jQuery site. If you downloadthe library then change the script include paths appropriately.
Download the atom.xml file and copy it to the same folder as test.html.Fire up test.html in your browser.
A few pointers:
What's the fuss about jQuery! Lets say you want to do the following:
- When the page is loaded, draw some tabbed panes.
- When the page is loaded, make an ajax call to get an RSSxml file and then parse through the XML response and display all blogtitles.
- When a link is clicked you want some list items (in litags) to turn blue via css manipulation.
- And you want to display the number of paragraphs within adiv.
- Last you want the div to hide (slowly).
- Oh also when you click on the tabs you want to print outthe current time.
Here is the complete html code...save it to file test.html. Note that Iinclude the latest js code directly from jQuery site. If you downloadthe library then change the script include paths appropriately.
<head> <script type="text/javascript"src="http://jqueryjs.googlecode.com/files/jquery-1.2.2.min.js"></script> <link rel="stylesheet"href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css"type="text/css" media="screen" title="Flora (Default)"> <script type="text/javascript"src="http://dev.jquery.com/view/trunk/ui/current/ui.tabs.js"></script> <script type="text/javascript"> $(document).ready(function(){ // draw the tabs $("#example > ul").tabs(); // make the ajax call to load the atom xml $.ajax({ url: 'atom.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){ alert('Error loading XML document'); }, success: function(xml){ $(xml).find('entry').find('title').each(function(){ var item_text = $(this).text(); $('<li></li>') .html(item_text) .appendTo('ol').appendTo("#titles"); }); } }); // attach a event handler to ALL links on the page $("a").click(function(){ // change the style of the links to bold $("a").addClass("test"); // effects example...hide the clickme link $("#clickme").hide("slow"); // change the li items to blue color $("#orderedlist > li").addClass("blue"); // print the number of paras and the current time $("#numparas").text("Number of paras " + $("#mycontainer p").size() +". Time is "+ new Date()); return false; }); }); </script> <style type="text/css"> a.test { font-weight: bold; } .blue {color:blue} </style> </head> <body> <a id="clickme"href="http://blogs.averconsulting.com/">Click here top hide meand make the li items blue!!</a> <ul id="orderedlist"> <li>test1</li> <li>test2</li> </ul> <div id="titles"> <b><u>Some of my bloggedtopics...</u></b><br/> </div> <div id="mycontainer"> <p>para1</p> <p>para2</p> <p>para3</p> </div> <div id="numparas"> </div> <div id="example" class="flora"> <ul> <li><ahref="#fragment-1"><span>Tab-1</span></a></li> <li><ahref="#fragment-2"><span>Tab-2</span></a></li> <li><ahref="#fragment-3"><span>Tab-3</span></a></li> </ul> <div id="fragment-1"> Tab-1 content here... </div> <div id="fragment-2"> Tab-2 content here... </div> <div id="fragment-3"> Tab-3 content here... </div> </div> </body> </html> |
Download the atom.xml file and copy it to the same folder as test.html.Fire up test.html in your browser.
A few pointers:
- $("#orderedlist > li") means return the li elementsinside the element with id 'orderedlist'.
- $.ajax is the call to the ajax function. If you arefamiliar with JSON you should be fine reading that code.
- $(xml).find('entry').find('title').each(function(){....}parses the AJAX XML response. Finds all entry/title elements and foreach executes the anonymous function.
- $("a").click(function(){....} attaches an anonymous eventhandler function to ALL link tags.
- $("a").addClass adds a style class to all link tags.
- $("#mycontainer p").size() means count the number of<p> tags inside the div element with id 'mycontainer'.
- $("#numparas").text means replace the text inside.
jQuery is indeed a great framework. I was looking at it myself. Came across this blog and it helped. Thanks.
Reply to this