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>