Friday, 20 January 2012

JQuery Basic Tutorial


Basic tutorial of JQuery




As The Logo Itself Suggest 'Write less do more'
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming

So Proceeding Further One Should Have Clear Basics Of Javascript




A Quick Look To An Example Of JQUERY

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>This Portion Visible Only When You Click Show Button.</p>
<p>Its a basic sample,if you understand it you can explore yourself with jquery in any style.</p>
</div>

<p class="flip">Show Panel</p>

</body>
</html>
 -------------------------------------------------------------------------------------------------------
You Often See Such Kind Of Code In JQuery Coding Part.If You Didn't Understand What they Actual Means Then You Browse Right Page To Find Out The Solution.





  
So Lets Start With Very Basic Things.
JQuery has many basic syntax as we use few in above example you should know what they mean!

1)Basic syntax is: $(selector).action()
  • A dollar sign to define jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides current element
$("p").hide() - hides all paragraphs
$("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"







2)Now You Are Ready To Understand A Very Basic JQuery Implementation Programming.

Look At The Image Below And Take An Observation.






No comments:

Post a Comment

Print Only Grid View in ASP.net

ASP.net How to Print Only GridView < div id ="gridviewDiv" >   < asp:GridView ID ="gridViewToPri...