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

---

Resizable Jquery Div

Jquery Sample Code

<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" /> 1: <script type="text/javascript" src="jquery-1.3.2.js"></script> 2: <script type="text/javascript" src="ui/ui.core.js"></script> 3: <script type="text/javascript" src="ui/ui.resizable.js"></script> 4: 5: <style type="text/css"> 6: #resizable { width: 300px; height: 100px; background: #f6fde5;border-style:solid;border-width:1px;border-color:#ebfdc0;margin:6px;} 7: </style> 8: 9: <script type="text/javascript"> 10: $(document).ready(function(){ 11: $("#resizable").resizable(); 12: }); 13: </script> 14: 15: 16: 17: <h1>Resizable Jquery Div</h1> 18:<div id="resizable"> 19:<div style="width:100%;text-align:center;background-color:#ebfdc0;" ><b>Title Appear here</b></div> 20:<br /> 21:drag the right bottom corner of the div..this is really fun ! 22:</div> 23: