JAVA JQUERY DAY02
1 jQuery处理事件示例
1.1 问题
1）动态的给按钮绑定单击事件
2）单击时输出鼠标点击的坐标
1.2 方案
绑定单击事件：$(选择器).click(function(e){});
获取事件源坐标：e.pageX，e.pageY
1.3 步骤
步骤一：创建HTML
创建demo1.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(e){
alert(1);
alert(e.pageX + " : " + e.pageY);
});
});
</script>
</head>
<body>
<input type="button" value="按钮一"/>
</body>
</html>
步骤二：测试
打开demo1.html，效果如下图：
图-1
1.4 完整代码
demo1.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(e){
alert(1);
alert(e.pageX + " : " + e.pageY);
});
});
</script>
</head>
<body>
<input type="button" value="按钮一"/>
</body>
</html>
2 事件冒泡示例
2.1 问题
1）点击父、子元素时弹出提示信息
2）点击子元素时取消事件冒泡
2.2 方案
e.stopPropagation（）可以取消事件冒泡
2.3 步骤
步骤一：创建HTML
创建demo2.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border:1px solid #ccc;
margin:10px;
padding:20px;
}
#d1 {
width:300px;
height:300px;
background-color: red;
}
#d2 {
width:200px;
height:200px;
background-color: blue;
}
#d3 {
width:100px;
height:100px;
background-color: yellow;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(e){
alert($(this).html());
e.stopPropagation();
});
});
</script>
</head>
<body>
<h1>事件冒泡</h1>
<div id="d1">
d1
<div id="d2">
d2
<div id="d3">
d3
</div>
</div>
</div>
</body>
</html>
步骤二：测试
打开demo2.html，效果如下图：
图-2
2.4 完整代码
demo2.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border:1px solid #ccc;
margin:10px;
padding:20px;
}
#d1 {
width:300px;
height:300px;
background-color: red;
}
#d2 {
width:200px;
height:200px;
background-color: blue;
}
#d3 {
width:100px;
height:100px;
background-color: yellow;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(e){
alert($(this).html());
e.stopPropagation();
});
});
</script>
</head>
<body>
<h1>事件冒泡</h1>
<div id="d1">
d1
<div id="d2">
d2
<div id="d3">
d3
</div>
</div>
</div>
</body>
</html>
3 合成事件示例
3.1 问题
1）增加一张图片
2）鼠标悬停在图片上时让图片变大
3）鼠标移出时让图片变回原始大小
3.2 方案
hover(mouseenter，mouseleave) 模拟光标悬停事件
3.3 步骤
步骤一：创建HTML
创建demo3.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>合成事件</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("img").hover(
function(){
$(this).width("300px").height("300px");
},
function(){
$(this).width("218px").height("218px");
}
);
$(":button").click(function(){
$("img").toggle();
});
});
</script>
</head>
<body>
<p><input type="button" value="切换"/></p>
<p><img src="../images/01.jpg" /></p>
</body>
</html>
步骤二：测试
打开demo3.html，效果如下图：
图-3
3.4 完整代码
demo3.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>合成事件</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("img").hover(
function(){
$(this).width("300px").height("300px");
},
function(){
$(this).width("218px").height("218px");
}
);
$(":button").click(function(){
$("img").toggle();
});
});
</script>
</head>
<body>
<p><input type="button" value="切换"/></p>
<p><img src="../images/01.jpg" /></p>
</body>
</html>
4 模拟操作示例
4.1 问题
1）增加一组姓名和文本框
2）点击[自动打分]按钮时，逐个切入文本框，并随机打分
4.2 方案
模拟光标切入事件：$obj.trigger(“focus”);
4.3 步骤
步骤一：创建HTML
创建demo4.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>模拟操作</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function auto_mark() {
var texts = $(":text");
var i = 0;
var timer = setInterval(function(){
if(i == texts.length) {
clearInterval(timer);
}
var score = Math.round(Math.random()*100);
texts.eq(i++).trigger("focus").val(score);
}, 1000);
}
</script>
</head>
<body>
<p><input type="button" value="自动打分" onclick="auto_mark();"/></p>
<p>张三：<input type="text" /></p>
<p>李四：<input type="text" /></p>
<p>王五：<input type="text" /></p>
<p>马六：<input type="text" /></p>
<p>周七：<input type="text" /></p>
</body>
</html>
步骤二：测试
打开demo4.html，效果如下图：
图-4
4.4 完整代码
demo4.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>模拟操作</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function auto_mark() {
var texts = $(":text");
var i = 0;
var timer = setInterval(function(){
if(i == texts.length) {
clearInterval(timer);
}
var score = Math.round(Math.random()*100);
texts.eq(i++).trigger("focus").val(score);
}, 1000);
}
</script>
</head>
<body>
<p><input type="button" value="自动打分" onclick="auto_mark();"/></p>
<p>张三：<input type="text" /></p>
<p>李四：<input type="text" /></p>
<p>王五：<input type="text" /></p>
<p>马六：<input type="text" /></p>
<p>周七：<input type="text" /></p>
</body>
</html>
5 jQuery动画示例
5.1 问题
1）增加一张图片
2）使用不同的方式实现该图片显示/隐藏的动画效果
3）自定义动画，使得改图片向右移动后再向下移动
5.2 方案
显示/隐藏动画效果
show() / hide()
slideDown() / slideUp()
fadeIn() / fadeout()
自定义动画效果
animate（偏移位置，执行时间，回调函数）
5.3 步骤
步骤一：创建HTML
创建demo5.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画</title>
<meta charset="utf-8" />
<style type="text/css">
#msg {
border:1px solid #ccc;
width:100px;
padding:10px;
text-align:center;
background-color:#ddd;
display:none;
}
img {
position:relative;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function show() {
$("img").show();
}
function hide() {
$("img").hide();
}
function hint() {
$("div").fadeIn(2000).fadeOut(1000);
}
function diy() {
$("img").animate({'left':'500px'},2000).animate({'top':'300px'},2000).fadeOut(2000);
}
</script>
</head>
<body>
<p>
<input type="button" value="显示" onclick="show();"/>
<input type="button" value="隐藏" onclick="hide();"/>
<input type="button" value="提示" onclick="hint();"/>
<input type="button" value="自定义" onclick="diy();"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
<div id="msg">操作成功</div>
</body>
</html>
步骤二：测试
打开demo5.html，效果如下图：
图-5
5.4 完整代码
demo5.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画</title>
<meta charset="utf-8" />
<style type="text/css">
#msg {
border:1px solid #ccc;
width:100px;
padding:10px;
text-align:center;
background-color:#ddd;
display:none;
}
img {
position:relative;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function show() {
$("img").show();
}
function hide() {
$("img").hide();
}
function hint() {
$("div").fadeIn(2000).fadeOut(1000);
}
function diy() {
$("img").animate({'left':'500px'},2000).animate({'top':'300px'},2000).fadeOut(2000);
}
</script>
</head>
<body>
<p>
<input type="button" value="显示" onclick="show();"/>
<input type="button" value="隐藏" onclick="hide();"/>
<input type="button" value="提示" onclick="hint();"/>
<input type="button" value="自定义" onclick="diy();"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
<div id="msg">操作成功</div>
</body>
</html>