您的位置：首页 > Web前端 > JQuery

JavaScript jQuery 复习知识

2016-05-30 01:15 453 查看

再一次对jQuery复习了一部分的内容，下面写一段代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-2.2.4.js" ></script>
<script>
$(document).ready(function(e) {
$("#demo1").click(function(e) {
$("#do").hide(2000)
});
$("#demo2").click(function(e) {
$("#do").show(2000);
});
$("#demo3").click(function(e) {
$("#do").css("background-color","#F00");
});
$("#demo4").click(function(e) {
$("#do").html("ceshi123");
$("#do").addClass("cl");
});
//next is fadetoggle

$("#test1").click(function(e) {
$("#div1").fadeIn(1000);
$("#div2").fadeIn(2000);
$("#div3").fadeIn(3000);
$("#test2").css("display","inline-block");
$("#test1").css("display","none");
});
$("#test2").click(function(e) {
$("#div1").fadeOut(1000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(3000);
$("#test1").css("display","inline-block");
$("#test2").css("display","none");
});
});
</script>
<style type="text/css">
div{
width:300px;
height:200px;
background-color:#666;
}
.cl
{
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:24px;
}
</style>
</head>

<body>
<div id="do">
</div>
<button id="demo1" type="button">单击影藏</button>
<button id="demo2" type="button">单击显示</button>
<button id="demo3" type="button">单击改变背景颜色</button>
<button id="demo4" type="button">添加文字</button>
<br />
<button type="button" id="test1" style="display:inline-block">单击淡入</button>
<button type="button" id="test2" style="display:none">单击淡出</button>
<div id="div1" style="width:200px; height:100px; background-color:#F00; display:none;"></div>
<div id="div2" style="width:200px; height:100px; background-color:#0F0; display:none;"></div>
<div id="div3" style="width:200px; height:100px; background-color:#00F; display:none;"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航