1.点击图片更换图片
<script>
i = 0;
$('img').click(function(){
if(i%2==0){
this.src='b.jpg';
}else{
this.src='a.jpeg';
}
i++;
});
</script>循环单击:用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
显示/影藏元素：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
<script>
$('img').toggle(
function(){
this.src='b.jpg';
},
function(){
this.src='a.jpeg';
}
)
</script>2.鼠标移上去/移开之后图片改变
hover：鼠标循环移入移出
<script>
$('img').hover(
function(){
this.src='b.jpg';
},
function(){
this.src='a.jpeg';
}
)
</script>3.实现图片左滑右滑特效。
animate：动画
jQuery优点：强悍的选择器以及内含遍历
<style>
*{
font-family:"微软雅黑" ;
}
.hero{
width: 130px;
overflow: hidden;
float: left;
margin-left: 20px;
margin-top: 20px;
}
</style>
<script>
$('img').hover(
function(){
$(this).animate({
'margin-left':'-40px'
},500)
},
function(){
$(this).animate({
'margin-left':'0px'
},500)
}
)
</script>4.单击标题切换内容（显示/隐藏内容）
单击页面的标题h1，找到他的下一个兄弟，让它消失或隐藏
toggle()：()里面如果是函数，代表是事件，否则代表的是方法。
<script>
$('h1').click(function(){
$(this).next().toggle();
})
</script>
切换的时候还可以加时间
<script>
$('h1').click(function(){
$(this).next().toggle(1000);
})
</script>5.水果移动选择
<head>
<meta charset="utf-8" />
<title>jQuery第一天</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
*{
font-family:"微软雅黑" ;
}
select{
width: 100px;
height: 120px;
}
</style>
</head>
<body>
<h1>水果选择</h1>
<form action="javascript:">
<select name="" id="s1" size="2">
<option value="">西瓜</option>
<option value="">冬瓜</option>
<option value="">香蕉</option>
<option value="">橘子</option>
</select>
<input type="button" value="" id="btn" />
<select name="" id="s2" size="2"></select>
</form>
</body>
<script>
$('#btn').click(function () {
$('#s1 option:selected' ).appendTo('#s2');
})
</script>水果复制选择
<script>
$('#btn').click(function () {
$('#s1 option:selected' ).clone().appendTo('#s2');
})
</script>