JQUERY PART-1 FOR BEGINNERS
hi friends if u really want to learn JQUERY ,just follow the below steps...jquery is a awesome javascript library .its help you to develop good interface
JQUERY CODE:
we use this jquery in html files...
<script type="text/javascript">
$(document).ready(function()
{
alert("this is first tutby siddhu");
});
</script>
<script type="text/javascript">
$(function()
{
alert("this is first tutby siddhu");
});
</script>
if u want to alert any code after loading of page we need to use $(window).load(function())
<script type="text/javascript">
$(window).load(function()
{
alert("this is first tutby siddhu");
});
</script>
JQUERY STRUCTURE:
we are using '$' symbol that indicates jquery
selector is a document object model,function executes parameters
$(selectors).function(parameters)
Selectors
Select DOM elements eg: $('h1') ,$('div'), $('li')..
Select ID : $('#id_name')
Select Class : $('.class_name')
WORKING WITH CLICK() EVENT:
syntax:$().click() below ex:
<script type="text/javascript">
$(function()
{
$('#button').click(function()
{
alert('button clicked by siddhu');
});
});
</script>
<body>
<input type="button" id="button" value="button">
</body>
HIDE AND SHOW WITH CLICK EVENT:
we use $().hide(),$().show() functions
<script type="text/javascript">
$(function()
{
$('.hide').click(function()
{
$('#div').hide();
});
$('.show').click(function()
{
$('#div').show();
});
});
</script>
<body>
<input type="button" class="hide" value="button">
<input type="button" class="show" value="button">
<div id="div">
u learned jquery part-1 by siddhu
</div>
</body>
hi friends if u really want to learn JQUERY ,just follow the below steps...jquery is a awesome javascript library .its help you to develop good interface
This tutorials is very basic level i will show tut using CLICK() event...................
INSTALLATION:
before you use jquery function you download
jquery.js from jquery.com
<script type="text/javascript" src="jquery.js" ></script>
OR
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js " ></script>
libs/jquery/1.3.0/jquery.min.js " ></script>
JQUERY CODE:
we use this jquery in html files...
<script type="text/javascript">
$(document).ready(function()
{
alert("this is first tutby siddhu");
});
</script>
in the above script we used $(document).ready(function()
instead of that we can use function()
for example:
instead of that we can use function()
for example:
<script type="text/javascript">
$(function()
{
alert("this is first tutby siddhu");
});
</script>
if u want to alert any code after loading of page we need to use $(window).load(function())
<script type="text/javascript">
$(window).load(function()
{
alert("this is first tutby siddhu");
});
</script>
JQUERY STRUCTURE:
we are using '$' symbol that indicates jquery
selector is a document object model,function executes parameters
$(selectors).function(parameters)
Selectors
Select DOM elements eg: $('h1') ,$('div'), $('li')..
Select ID : $('#id_name')
Select Class : $('.class_name')
WORKING WITH CLICK() EVENT:
syntax:$().click() below ex:
<script type="text/javascript">
$(function()
{
$('#button').click(function()
{
alert('button clicked by siddhu');
});
});
</script>
<body>
<input type="button" id="button" value="button">
</body>
HIDE AND SHOW WITH CLICK EVENT:
we use $().hide(),$().show() functions
<script type="text/javascript">
$(function()
{
$('.hide').click(function()
{
$('#div').hide();
});
$('.show').click(function()
{
$('#div').show();
});
});
</script>
<body>
<input type="button" class="hide" value="button">
<input type="button" class="show" value="button">
<div id="div">
u learned jquery part-1 by siddhu
</div>
</body>
0 comments:
Post a Comment