Hello today this is my second post on jquery
for my last post i got good response
last post: JQUERY PART-1
in this i really want to discuss on EFFECTS AND HTML
EFFECTS: in this for
Fadein and fadeout:$().fadeIn() ,$().fadeOut()
sliding up and down:$().slideUp(),$().slideDown()
Sliding toggle:$().slideToggle()
am going to show examples on above events:
FADEIN AND OUT EVENT:
in the below eg fadeIn(speed,callback)
fadeIn("speed" or "slow")
else
fadeIn(300)
for my last post i got good response
last post: JQUERY PART-1
in this i really want to discuss on EFFECTS AND HTML
EFFECTS: in this for
Fadein and fadeout:$().fadeIn() ,$().fadeOut()
sliding up and down:$().slideUp(),$().slideDown()
Sliding toggle:$().slideToggle()
am going to show examples on above events:
FADEIN AND OUT EVENT:
in the below eg fadeIn(speed,callback)
fadeIn("speed" or "slow")
else
fadeIn(300)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('#fadeout').click(function()
{
$('#box').fadeOut("slow");
});
$('#fadein').click(function()
{
$('#box').fadeIn("slow");
});
});
</script>
<body>
<input type="button" value="fadein" id="fadein">
<input type="button" value="fadeout" id="fadeout">
<div id="box">
hello this is siddhu
</div>
</body>
learn attr() in jquery()
attr() is a function in jquery it will retrive the value from html
syntax: $().attr(property) property:-'id','class','href'
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('#link').click(function()
{
var id=$(this).attr("id");
alert(id);
});
});
</script>
<a href="http://aitamelearning.blogspot.com" id="link">siddhu tut link click here</a>
</body>
LEARN addClass() AND html() in JQUERY
get the html contents by html.$(selector).html()
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
<a href="http://aitamelearning.blogspot.com" >Click </a>
Link HREF value : <h1></h1>
Add specified class to each set ofelements.$(selector).addClass()
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.changeclass').click(function()
{
$(".big").addClass("small");
});
});
</script>
<a href="#" class="changeclass" >Click </a>
<div class="big">aitamelearning.blogspot.com</div>
css code:
.big
{
font-size:106px;
}
.small
{
font-size:12px;
}
0 comments:
Post a Comment