第八周学习周记
学习内容
本节课学习了可以极大地简化 JavaScript 编程的 jQuery
jQuery 是一个 JavaScript 库
1.jQuery 事件
包含click事件、dblclick事件、mousedown事件、mouseup事件、focus事件以及blur事件
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
$("p1").dblclick(function(){
$(this).hide();
});
$("#p2").mousedown(function(){
alert('我出现了!');
});
$("#p3").mouseup(function(){
alert("我消失了!");
});
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
<p>点我就消失了!</p>
<p id="p1">双击我就消失了!</p>
<p id="p2">鼠标放在此处!</p>
<p id="p3">鼠标离开此处!</p>
Name: <input type="text" name="fullname"><br>
</body>
</html>
展示:
点击“点我就消失了!”和“双击我就消失了!”之后,段落隐藏
当鼠标移动到“鼠标放在此处!”上方,并按下鼠标按键时,弹出窗口
当在“鼠标离开此处!”上松开鼠标按钮时,弹出窗口
当元素获得焦点时
2.jQuery 效果
包含隐藏和显示、淡入和淡出、向下滑动的效果
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#p1").hide();
});
$("#show").click(function(){
$("#p1").show();
});
});
</script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
<script>
$(document).ready(function(){
$("#button2").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#ffd9c2;
border:solid 1px #ffaa7f;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">
<p id="p1">我可以消失,也可以出现!</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<p>我可以变颜色!</p>
<button id="button1">淡入</button>
<button id="button2">淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</div>
</body>
</html>
展示:
点击“点我滑下面板”
点击“隐藏”,点击“显示”可以恢复
点击“淡入”,点击“淡出”可以恢复