JQuery and Json together

JQuery is a javascript library which eases javascript developemt and it also includes many Ajax functionality. So before we start we need to download the .js libraries from jquery official sites

Basic understanding

$("#header") = get the element with id="header"
$("h3") = get all "h3" element
$("div#content .photo") = get all element with class="photo" nested in the 'div id="content"'
$("ul li") = get all "li" element nested in all "ul"
$("ul li:first") = get only the first "li" element of the "ul"

See Using Jquery in repeater / gridview / datagrid
How to edit gridview row using jquery DOM

Jquery examples

Jquery	Resizeable	Collapse	Sliding Effect	Floating Div
Image Sliding	Image Changes	Div Alert	Div Disappear	Simple image changes
Datepicker

---

Jquery Sample Code

<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" /> 1: <link rel="Stylesheet" type="text/css" href="css/style.css" /> 2: 3: <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 4: <script src="js/jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script> 5: <script src="js/jquery.smoothDivScroll-0.8.js" type="text/javascript"></script> 6: 7: 8: 9: 10:<script type="text/javascript"> 11:$(function() { 12:$("div#makeMeScrollable").smoothDivScroll({scrollingSpeed: 12, mouseDownSpeedBooster: 3, autoScroll: "onstart", autoScrollDirection: "endlessloop", autoScrollSpeed: 2, visibleHotSpots: "onstart", hotSpotsVisibleTime: 15, startAtElementId: "startAtMe"}); 13:}); 14:</script> 15: 16: 17:<style> 18:#makeMeScrollable div.scrollableArea * 19: { 20: position: relative; 21: float: left; 22: margin: 0; 23: padding: 0; 24: } 25: 26:</style> 27: 28:<div id="makeMeScrollable"> 29:<div class="scrollingHotSpotLeft"></div> 30:<div class="scrollingHotSpotRight"></div> 31:<div class="scrollWrapper"> 32:<div class="scrollableArea"> 33:<img src="images/pic-1.gif" alt="Image 111" /> 34:<img src="images/pic-2.gif" alt="Image 222" /> 35:<img src="images/pic-3.gif" alt="Image 333"/> 36: 37:</div> 38:</div> 39:</div> 40: