jQuery
写在前面：educoder是真的坑，改代码改到我差点崩溃，我也不知道为啥一会儿必须用background一会让用background-color，一会儿只可以用类定位元素，一会儿只可以用标签，无语子，老师说检查代码不好写，他也想哭...
出错时提供两个比较有用的方法：
1.看评论区，很多同学走过的坑都有在那儿提到
2.大家可以看测试文件，但是不是每一个关卡都可以看
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 x=$("#content");
x.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基本选择器
编程要求
jQuery已经引入，在右侧编辑器补充begin至end间的代码，实现点击按钮，添加相应内容的功能。要求如下：
用
id选择器，获取id="box"的div，添加内容为我是id选择器添加的内容；用类选择器，获取
class="box"的div，添加内容为我是类选择器添加的内容；用元素选择器，获取
p标签，添加内容为我是元素选择器添加的内容。提示：
$(this)指的是当前操作的DOM元素。
<!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----------
let x=$("#box");
x.html("我是id选择器添加的内容");
//----------end------------
}
if(inner == "类"){
//----------begin----------
let x=$(".box");
x.html("我是类选择器添加的内容");
//----------end------------
}
if(inner == "元素"){
//----------begin----------
let x=$("p");
x.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>
Jquery事件
第1关：Jquery鼠标事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>step1</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>鼠标事件演示</h1>
<input type="button" value="button" class="button">
<p></p>
</div>
<script>
$(function(){
//-----------begin-----------
$("input").click(function(){
$("p").html("这是个click事件");
});
$("input").dblclick(function(){
$("p").html("这是个dblclick事件");
});
$("input").mouseenter(function(){
$("p").html("这是个mouseenter事件");
$("input").css("background","#e7e7e7");
});
$("input").mouseleave(function(){
$("p").html("这是个mouseleave事件");
$("input").css("background","#4CAF50");
});
//------------end------------
})
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
.button{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
</body>
</html>
第2关：Jquery键盘事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>step2</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>键盘事件演示</h1>
<input type="text" class="input1" placeholder="输入你的名字">
<p>按键的次数: <span>0</span></p>
<input type="text" class="input2" placeholder="这里输入文字">
</div>
<script>
$(function(){
//-----------begin-----------
i=0;
$(".input1").keypress(function(){
$("span").text(i+=1);
});
$(".input2").keydown(function(){
$(this).css("background-color","yellow");
});
$(".input2").keyup(function(){
$(this).css("background-color","pink");
})
//------------end------------
});
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
</style>
</body>
</html>
第3关：Jquery表单事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>step3</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>表单事件演示</h1>
<input type="text" class="input1">
<br><br><select id="mySelect">
<option value ="显示">显示</option>
<option value ="不显示" selected = "selected">不显示</option>
</select>
<br><div id="box" style="width:200px;height:100px;background:red;display:none;"></div>
<br><br><input type="text" class="input2" value="www.educoder.net">
</div>
<script>
$(function(){
//-----------begin-----------
//1.获取焦点失去焦点事件
$(".input1").focus(function(){
$(this).css("background-color","yellow");
});
$(".input1").blur(function(){
$(this).css("background-color","green");
});
//2.改变文本事件
$("#mySelect").change(function(){
$(this).find("option:selected").text()=="显示"?$("#box").show():$("#box").hide();
});
//3.选中文本事件
$(".input2").select(function() {
$(".input2").after("Textselect!")
});
//------------end------------
});
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
</style>
</body>
</html>
第4关：Jquery文件/窗口事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>step4</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>文档/窗口事件演示</h1>
<div id="target" style="overflow: scroll; width: 300px; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>
<p>滚动状态 - <span>Scroll not happened</span></p>
</div>
<script>
$(function(){
//-----------begin-----------
//1.窗口大小改变事件
$(window).resize(function(){
alert("不建议调整窗口大小!");
})
//2.滚动文本内容事件
$("#target").scroll(function(){
$("p").html("Scroll happened!").css("display","inline").fadeOut("slow");
})
//------------end------------
});
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
</style>
</body>
</html>
jQuery DOM操作
第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>
<style>
.container{
width: 300px;
margin: 30px auto;
}
.box{
border: 2px solid #000;
background: #eee;
padding: 10px;
}
p{
font-size: 18px;
}
input{
height: 30px;
}
button{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<button class="btn1">获取文本内容</button>
<button class="btn2">获取内容</button>
<button class="btn3">获取表单value值</button>
<div class="box">
<p>我是第一行</p>
<p>我是第二行</p>
输入框:<input class="getVal" type="text" value="Hello Educoder"/>
</div>
</div>
<script>
$(function(){
//------------ Begin -----------
$(".btn1").click(function(){
alert($(".box").text());
})
$(".btn2").click(function(){
alert($(".box").html());
})
$(".btn3").click(function(){
var getValue = $(".getVal").val() + "---" + $(".getVal").attr("type");
alert(getValue);
})
//------------ End --------------
})
</script>
</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>
<style>
.container{
width: 300px;
margin: 30px auto;
}
.box{
border: 2px solid #000;
background: #eee;
padding: 10px;
}
p{
font-size: 18px;
}
input{
height: 30px;
}
button{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<button class="btn1">填充文本内容</button>
<button class="btn2">填充内容</button>
<button class="btn3">填充value值</button>
<div class="box">
<p class="first"></p>
<p class="second"></p>
输入框:<input class="getVal" type="text" value="Hello Educoder"/>
</div>
</div>
<script>
$(function(){
//------------ Begin -----------
$(".btn1").click(function(){
$(".first").text("我是第一行");
})
$(".btn2").click(function(){
$(".second").html("<span>我是第二行</span>");
})
$(".btn3").click(function(){
var typeAttr=$(".getVal").attr("type","password");
$(".getVal").val(typeAttr);
})
//------------ End --------------
})
</script>
</body>
</html>第3关：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>
<style>
button{
margin-top:20px;
}
</style>
</head>
<body>
<table class="tab" border="1" width="100%" cellspacing="0" cellpadding="10" align="center">
<tr id="tb-head">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>30</td>
<td>洛杉矶</td>
</tr>
<tr>
<td>3</td>
<td>丽丽</td>
<td>女</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>男</td>
<td>26</td>
<td>河南</td>
</tr>
</table>
<script>
$(function(){
var count = 4;
//---------表格下面添加【添加内容】按钮-------------
//------------------- Begin ---------------
var addBtn='<button class="btn">添加内容</button>';
$(".tab").after(addBtn);
//------------------- End -----------------
function loadData(){
for(var i =0; i<2; i++){
count ++;
var tr = '<tr>' +
'<td>' + count + '</td>'+
'<td>王五</td>'+
'<td>男</td>'+
'<td>26</td>'+
'<td>河南</td>'+
'</tr>';
//---------表格底部添加内容------------
//------------------- Begin ---------------
$(".tab").append(tr);
//------------------- End -----------------
}
}
//-------------点击事件-----------------
//------------------- Begin ---------------
$(".btn").click(function(){
loadData();
})
//------------------- End -----------------
})
</script>
</body>
</html>第4关：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>
<style>
button{
margin-top:20px;
}
</style>
</head>
<body>
<table class="tab" border="1" width="100%" cellspacing="0" cellpadding="10" align="center">
<tr class="line">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th class="final">住址</th>
</tr>
<tr class="line">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td class="final">北京</td>
</tr>
<tr class="line">
<td>2</td>
<td>李四</td>
<td>男</td>
<td>30</td>
<td class="final">洛杉矶</td>
</tr>
<tr class="line">
<td>3</td>
<td>丽丽</td>
<td>女</td>
<td>24</td>
<td class="final">上海</td>
</tr>
<tr class="line">
<td>4</td>
<td>王五</td>
<td>男</td>
<td>26</td>
<td class="final">河南</td>
</tr>
</table>
<button class="btn1">删除最后一行</button>
<button class="btn2">删除最后一个住址</button>
<script>
//-----------begin-----------
$(".btn1").click(function(){
$(".line").last().remove();
})
$(".btn2").click(function(){
$(".final").last().empty();
})
//------------end------------
</script>
</body>
</html>
