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

---

• One
• Two
• Three
• Four

Jquery Sample Code

<script type="text/javascript" src="js/jquery.js"></script> 1:<script type="text/javascript" src="js/jqfade.js"></script> 2:<script type="text/javascript"> 3: $(document).ready( 4: function(){ 5: $('ul#imageSlider').innerfade({ 6: animationtype: 'slide', 7: speed: 1000, 8: timeout: 5000, 9: type: 'random', 10: containerheight: '220px' 11: }); 12: }); 13:</script> 14: 15:<style type="text/css" media="screen, projection"> 16: @import url(style/fade.css); 17:</style> 18: 19: 20: <div> 21: 22: Change any object or image dynamically using jquery with sliding effect 23: </div> 24: 25: <ul id="imageSlider" type="none"> 26: <li><div style="width:100px;height:100px;background:#e6fcb3;padding:10px;" ><b>One</b></div> 27: </li> 28: <li> 29: <div style="width:100px;height:100px;background:#b8fcb3;padding:10px;" ><b>Two</b></div> 30: </li> 31: <li> 32: <div style="width:100px;height:100px;background:#b3effc;padding:10px;" ><b>Three</b></div> 33: </li> 34: <li> 35: <div style="width:100px;height:100px;background:#f6b3fc;padding:10px;" ><b>Four</b></div> 36: </li> 37: </ul> 38: 39: