jQuery菜鸟学习实例
引用的<script src="http://code.jquery.com/jquery-latest.js"></script>
例子<一>：实现字体变大或变小
1、主体部分：
<body>
<a href="#" id="larger">Larger</a></br>
<a href="#" id="smaller">Smaller</a>
<p>when click Larger font change Big and click Smaller font change small;when click Larger font change Big and click Smaller font change small;</p>
</body>
2、jQ代码：
<script type="text/javascript">
$(function(){
$('a').click(function(){
var os = $('p').css('font-size'); //获取的是16px
var num = parseFloat(os,10); //通过parseFloat 解析得到数字部分
var uom = os.slice(-2); //得到单位 px
$('p').css('font-size',num/1.4+uom);
if(this.id=='larger'){
$('p').css('font-size',num*1.4+uom);
}
});
});
</script>
3、效果图：
例子<二>：实现图片切换的效果
1、主体部分：
<body>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
</body>
2、jQ代码：
<script type="text/javascript">
$(function(){
$('.wrap').hover(function(){
$('.front',this).stop().animate({top:"300px"},700); //top 也可以修改为left,right等等
},function(){
$(this).children('.front').stop().animate({top:"0px"},400);
});
});
</script>
3、CSS代码
<style type="text/css">
#container{
width:850px;
text-align:center;
margin:auto;
}
.wrap{
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
}
img{
position:absolute;
top:0;
left:0;
}
</style>
4、效果图
例子<三>：实现添加与移出数据效果
1、主体部分：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<a href="#" id="add">Add List Item</a><br>
<a href="#" id="remove">Remove List Item</a>
</body>
2、jQ代码：
<script type="text/javascript">
$(function(){
var i = $('li').size()+1;
$('a#add').click(function(){
$('<li>'+i+'</li>').appendTo('ul');
i++;
});
$('a#remove').click(function(){
$('li:last').remove();
if (i != 0){
i--;
}
});
});
</script>
3、效果图：
例子<四>：实现图片或文字变化的效果
1、主体部分：
<body>
<div id="box">CHANGE</div>
</body>
2、jQ代码：
<script type="text/javascript">$(function(){
$('#box').click(function(){
$(this).animate({"left":"300px"},4000);// first effect
$(this).animate({"width":"50px"},4000);//and so second effect
});
});
</script>