(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>