Educoder jQuery 入门
第1关：jQuery入门
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
//------------begin---------
var content = $("#content");
content.html("这是我的第一个jquery程序");
//-----------end------------
</script>
<style>
#content{
width: 300px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 30px auto;
font-size: 20px;
border: 2px solid #000;
}
</style>
</body>
</html>
第2关：jQuery基本选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul class="container">
<li class="item">
<button>id</button>
<div id="box"></div>
</li>
<li class="item">
<button>类</button>
<div class="box"></div>
</li>
<li class="item">
<button>元素</button>
<p></p>
</li>
</ul>
<script>
$(function(){
$("button").click(function(){
//inner是当前点击的button元素的内容
var inner = $(this).html();
if(inner == "id"){
//----------begin----------
var box = $("#box");
box.html("我是id选择器添加的内容");
//----------end------------
}
if(inner == "类"){
//----------begin----------
var box = $(".box");
box.html("我是类选择器添加的内容");
//----------end------------
}
if(inner == "元素"){
//----------begin----------
var box = $("p");
box.html("我是元素选择器添加的内容");
//----------end------------
}
})
})
</script>
<style>
ul,li{
list-style-type: none;
}
.container{
width: 400px;
margin: 40px auto;
}
.container .item{
height: 60px;
line-height: 60px;
margin: 0 20px 20px 0;
overflow: hidden;
}
.container .item button{
float:left;
width: 60px;
line-height: 40px;
text-align: center;
font-size: 18px;
margin-right: 20px;
}
.container .item div{
width: 240px;
height: 40px;
line-height: 40px;
border: 2px solid #ccc;
text-align: center;
float: left;
}
.container .item p{
width: 240px;
height: 40px;
line-height: 40px;
border: 2px solid #ccc;
text-align: center;
margin-top: 0px;
float: left;
}
</style>
</body>
</html>
第3关：过滤选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" align="center">
<!--<caption>Monthly savings</caption>-->
<tr id="tb-head">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>30</td>
<td>洛杉矶</td>
</tr>
<tr>
<td>丽丽</td>
<td>女</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>26</td>
<td>河南</td>
</tr>
</table>
<script>
//-----------begin-----------
$("tr:odd").css("background","lightyellow");
$("tr:even").css("background","lavenderblush");
$("tr:first").css("background","yellowgreen");
//------------end------------
</script>
</body>
</html>
第4关：过滤选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul class="container">
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
<li class="item">
点赞！中国自主卫星电话正式放号，从此告别“不在服务
</li>
</ul>
<script>
$(function(){
//------------- begin -------------
$(".item:eq(2)").css("background","#eee");
$(".item:not(:last)").css("border-bottom","1px dashed #ccc");
//------------ end ---------------
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
margin: 40px auto;
border: 2px solid #ccc;
padding: 0 20px;
}
.container .item{
height: 40px;
line-height: 40px;
padding: 0;
overflow: hidden;
}
.container .item span{
width: 30px;
height: 40px;
line-height: 40px;
padding: 0;
overflow: hidden;
}
/*.container .item:not(:last-child){
border-bottom: 1px dashed #ccc;
}*/
</style>
</body>
</html>
第5关：tab选项卡
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<ul class="head">
<li>全部实训</li>
<li>实训路径</li>
<li>在线课堂</li>
<li>讨论区</li>
</ul>
<div class="content">
<div>我是全部实训的内容</div>
<div>我是实训路径的内容</div>
<div>我是在线课堂的内容</div>
<div>我是讨论区的内容</div>
</div>
</div>
<script>
$(function(){
//tab的初始化
$(".head li").removeClass('active').eq(0).addClass('active');
$(".content div").hide().eq(0).show();
$(".head li").on('click', function(){
// index是点击的li的索引
var index = $(this).index();
//-----------begin-----------
$(".head li").removeClass("active").eq(index).addClass("active");
$(".content div").hide().eq(index).show();
//------------end------------
})
})
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
ul,li{
list-style-type: none;
}
.container ul{
overflow: hidden;
background: #000;
color: #fff;
}
.container li{
width: 100px;
float: left;
text-align: center;
line-height: 60px;
font-size: 18px;
cursor: pointer;
}
.container li.active{
color: orange;
}
.container .content{
width: 460px;
height: 200px;
padding: 20px;
background: #ccc;
font-size: 18px;
}
</style>
</body>
</html>