（1）jquery獲取文本框焦點
<input type="text" id="username"/>
<br />
<span style="display: none">你好</span>
<script>
$('input').focus(function() {
$('span').show();
});
</script>
（2）jquery獲取鼠標位置
<input type="text" id="username"/>
<br />
<script>
$(document).click(function(e) {
var x=e.pageX;
var y=e.pageY;
$('#username').val(x+","+y);
});
</script>
（3）jquery避免冒泡事件
<html>
<head>
<title>0.0</title>
<script src="jquery-1.7.2.js"></script>
<style>
*{
margin:0;
padding:0;
}
div{
width:100px;
height:auto;
border:1px solid black;
}
ul{
list-style:none;
width:100px;
border: 1px solid black;
display:none;
}
ul li{
height:24px;
line-height:24px;
}
</style>
</head>
<body>
<div>選擇城市</div>
<br>
<ul>
<li>南寧</li>
<li>欽州</li>
<li>北海</li>
<li>桂林</li>
</ul>
<script>
//單擊顯示列表
$('div').click(function(e){
$('ul').show();
//避免冒泡關鍵詞
e.stopPropagation();
});
//鼠標虛浮列表改變背景色，移開恢復背景色
$('li').hover(function() {
$(this).css('background','red');
},function(){
$(this).css('background','none');
});
//單擊頁面其他地方，隱藏列表
$(document).click(function(){
$('ul').hide();
});
</script>
</body>
</html>
（4）逐漸顯示、隱藏內容
<html>
<head>
<title>0.0</title>
<script src="jquery-1.7.2.js"></script>
<style>
*{margin:0;padding:0;}
div{width:100px;height:auto;border:1px solid black;}
p{display:none;}
</style>
</head>
<body>
<div>顯示內容</div>
<p>花間一壺酒，獨酌無相親。 <br />
舉杯邀明月，對影成三人。 <br />
月既不解飲，影徒隨我身。 <br />
暫伴月將影，行樂須及春。 <br />
我歌月徘徊，我舞影零亂。 <br />
醒時同交歡，醉後各分散。 <br />
永結無情遊，相期邈雲漢。
</p>
<script>
//單擊顯示內容
$('div').click(function(){
$('p').toggle(1000);
});
</script>
</body>
</html>
（5）內容漸變動畫
<html>
<head>
<title>jquery</title>
<script src="jquery-1.7.2.js"></script>
<style>
*{margin:0;padding:0;}
div{width:100px;height:auto;border:1px solid black;}
p{display:none;}
</style>
</head>
<body>
<div>顯示內容</div>
<p>花間一壺酒，獨酌無相親。 <br />
舉杯邀明月，對影成三人。 <br />
月既不解飲，影徒隨我身。 <br />
暫伴月將影，行樂須及春。 <br />
我歌月徘徊，我舞影零亂。 <br />
醒時同交歡，醉後各分散。 <br />
永結無情遊，相期邈雲漢。
</p>
<script>
$('div').click(function(){
$('p').fadeToggle(3000);
});
</script>
</body>
</html>
（6）內容滑動動畫
<html>
<head>
<title>jquery</title>
<script src="jquery-1.7.2.js"></script>
<style>
*{margin:0;padding:0;}
div{width:100px;height:auto;border:1px solid black;}
p{display:none;}
</style>
</head>
<body>
<div>顯示內容</div>
<p>花間一壺酒，獨酌無相親。 <br />
舉杯邀明月，對影成三人。 <br />
月既不解飲，影徒隨我身。 <br />
暫伴月將影，行樂須及春。 <br />
我歌月徘徊，我舞影零亂。 <br />
醒時同交歡，醉後各分散。 <br />
永結無情遊，相期邈雲漢。
</p>
<script>
$('div').click(function(){
$('p').slideToggle(1000);
});
</script>
</body>
</html>
（7）自定義動畫：animate
<html>
<head>
<title>jquery</title>
<script src="jquery-1.7.2.js"></script>
<style>
div{width:100px;height:100px;background:#abcdef;position:absolute;top:30px;left:50px;}
</style>
</head>
<body>
<input type="button" value="移動" />
<div></div>
<script>
$('input').click(function(){
$('div').animate({
'left':'800px',
'top':'300px',
'opacity':'0.1'
},2000);
});
</script>
</body>
</html>
（8）動畫隊列
<html>
<head>
<meta charset="utf-8"/>
<title>jquery</title>
<script src="jquery-1.7.2.js"></script>
<style>
p{width:300px;height:300px;background:#abcdef;display:none;}
</style>
</head>
<body>
<a href="##3">aa</a>
<p>22222222222222</p>
<script>
$('a').hover(function(){
$('p').stop(false,true).slideDown(500);
},function(){
$('p').stop(false,true).slideUp(500);
});
</script>
</body>
</html>
(9)左邊菜單欄的顯示隱藏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="menu.css">
<script src="jquery.js"></script>
<script>
$(function(){
$.easing.def = 'easeOutElastic';
var oBtn = $('h3');
oBtn.click(function(){
$(this).next('ul').slideToggle().siblings('ul').slideUp();
});
});
</script>
</head>
<body>
<h3>kiwis</h3>
<ul style="display:none">
<li><a href="#">11111</a></li>
<li><a href="#">11111</a></li>
<li><a href="#">11111</a></li>
<li><a href="#">11111</a></li>
</ul>
<h3>Oranges</h3>
<ul style="display:none">
<li><a href="#">22222</a></li>
<li><a href="#">22222</a></li>
<li><a href="#">22222</a></li>
<li><a href="#">22222</a></li>
</ul>
<h3>Grapes</h3>
<ul style="display:none">
<li><a href="#">33333</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">33333</a></li>
</ul>
</body>
</html>
