第1关：Jquery鼠标事件
相关知识
问：什么是事件？
答：页面对不同访问者的响应叫做事件。
问：那事件处理程序又是什么呢？
答：事件处理程序指的就是当HTML中发生某些事件时所调用的方法。
为了完成本关任务，你需要掌握：
click() 事件方法；
dblclick()事件方法；
mouseenter()事件方法；
mouseleave()事件方法；
了解其他鼠标事件。
click事件
当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
一次点击事件click是指鼠标指针悬停在元素上，点击（按下并松开）鼠标左键一次。
基本语法：
//function 为处理函数
$(selector).click(function(){
…
})
说明:selector表示要操作的dom元素
示例：点击按钮时，按钮背景颜色变为灰色。
$(".button").click(function () { $(this).css("background","grey"); });dblclick事件
当双击元素时，触发dblclick事件。dblclick()方法触发dblclick事件，或规定当发生dblclick事件时运行的函数。
一次双击事件dblclick是指鼠标指针悬停在元素上，快速连续点击鼠标左键两次。
基本语法：
//function 为处理函数
$(selector).dblclick(function(){
…
});
示例：双击按钮时，弹出框显示“鼠标双击事件dblclick()”。
mouseenter事件
当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。
基本语法：
//function 为处理函数
$(selector).mouseenter(function(){
…
})
示例：当鼠标移入btn时，btn背景颜色变为蓝色。
mouseleave事件
当鼠标指针离开被选元素时，会发生mouseleave事件。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。
基本语法：
//function 为处理函数
$(selector).mouseleave(function(){
…
})
示例：当鼠标移出btn时，btn背景颜色变为绿色。
其他鼠标事件方法
mouseover()当鼠标指针位于元素上方时触发。与 mouseenter 事件不同，mouseover事件在鼠标指针进入被选元素或任意子元素时都会被触发；
mouseout()当鼠标指针离开被选元素时触发。与 mouseleave 事件不同，mouseout 事件在鼠标指针离开被选元素或任意子元素时都会被触发；
mousedown()当鼠标按下时触发，如果一直按着鼠标不放，只触发一次mousedown事件；
mouseup()当鼠标松开按键时触发；
hover()方法规定当鼠标指针悬停到移开过程中触发 mouseenter 和 mouseleave 事件。
编程要求
在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：
单击button元素，p标签内文字显示为“这是个click事件”；
双击button元素，p标签内文字显示为“这是个dblclick事件”；
鼠标指针移入button元素，button的背景颜色为#e7e7e7，p标签内文字显示为“这是个mouseenter事件”；
鼠标指针移出button元素，button的背景颜色为#4CAF50,p标签内文字显示为“这是个mouseleave事件”。
注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。
<!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事件");
$(this).css("background","#e7e7e7");
});
$("input").mouseleave(function () {
$("p").html("这是个mouseleave事件");
$(this).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键盘事件
相关知识
为了完成本关任务，你需要掌握：
keydown()和keyup()事件方法；
keypress()事件方法。
keydown事件与 keyup事件
keydown事件是在键盘上按下某键时触发，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码。
keyup事件是当用户松开某一个按键时触发
基本语法：
$(selector).keydown(function(){
…
})
$(selector).keyup(function(){
…
})
说明:selector表示要操作的dom元素
示例：在键盘上输入按键，当触发keydown事件时数值+1，当触发keyup事件时数值+2。
按键的次数: 0
i=0; $("input").keydown(function(){ $("span").text(i+=1); }); $("input").keyup(function(){ $("span").text(i+=2); });注意：观察效果图我们可以明显的看到中间有一个值的过渡的过程，也就说明按下一个按键它触发了二个方法。
keypress事件
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键。
我们可以理解为keypress事件将keydown事件和keyup事件进行组合。
基本语法：
$(selector).keypress(function(){
…
})
示例：记录按键按下的次数，没按下一次键盘的按键相应的值+2。
按键的次数: 0
i=0; $(".button").keypress(function () { $("span").text(i+=2); });编程要求
根据提示，在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：
从键盘上输入数据到第一个输入框中，并记录按键的次数；
从键盘上输入数据到第二个输入框中，当键盘按下时将输入框的背景色设置为yellow色，当按键抬起时将输入框的背景颜色设置为pink色。
提示：页面有两个输入框，操作对象已经为你提供了class属性名。
注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。
<!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(){
$(".input2").css("background-color", "yellow");
});
$(".input2").keyup(function(){
$(".input2").css("background-color", "pink");
});
//------------end------------
});
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
</style>
</body>
</html>
第3关：Jquery表单事件
相关知识
为了完成本关任务，你需要掌握：
focus()和blur()事件方法；
change()事件方法;
select()事件方法；
submit()事件方法。
focus事件和blur事件
当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），触发 focus 事件。
当元素失去焦点时发生 blur 事件。
基本语法：
$(selector).focus(function(){
…
})
$(selector).blur(function(){
…
})
说明:selector表示要操作的dom元素
示例：当鼠标获取焦点时，在输入框后显示“获取到焦点”，当鼠标失去焦点时，弹框说明失去焦点，并将文字隐藏。
获取到焦点 $("input").focus(function() { $("span").css("display","inline"); }) $("input").blur(function() { alert("失去焦点"); $("span").css("display","none"); })change事件
当输入框的值改变的时候失去焦点触发change事件。
基本语法：
$(selector).change(function(){
…
})
示例：在输入框中改变数据后弹出数据被改变的提示框。
select事件
当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。
基本语法：
$(selector).select(function(){
…
})
示例：选中输入框中的文本弹出提示框“文本已选中！”。
submit事件
当提交表单时，会发生 submit 事件。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
该事件只适用于 元素。
基本语法：
$(selector).submit(function(){
…
})
示例：提交表单时弹出提示框，并将提交内容显示在url中。
编程要求
根据提示，在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：
获取第一个输入框时，输入框的背景颜色变成yellow色，当失去焦点时，输入框的背景颜色为green；
选中下拉框的显示项时，将有红色背景色的div（已提供在任务文件中）显示出来，选中不显示时，将其隐藏。（默认div为隐藏）；
当选中第二个输入框中的文本时，在输入框后面追加“Text select!”文本。
提示：相应的操作对象已经为你提供了class属性名和id属性名。
注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。
<!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() {
// $(".input1").css("display","inline");
$(".input1").css("background-color","yellow");
})
$(".input1").blur(function() {
$(".input1").css("background-color","green");
})
//2.改变文本事件
$("#mySelect").change(function(){
if($(this).find("option:selected").text()=="显示"){
$("#box").show();
}else{
$("#box").hide();
}
});
//3.选中文本事件
$(".input2").select(function(){
$(".input2").after("Text select!");
});
//------------end------------
});
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
</style>
</body>
</html>
第4关：Jquery文件/窗口事件
相关知识
为了完成本关任务，你需要掌握：
resize()事件方法；
scroll()事件方法。
resize事件
当调整浏览器窗口大小时，发生 resize 事件。
基本语法：
$(selector).resize(function(){
…
})
说明:selector表示要操作的dom元素
示例：记录改变窗口大小的次数。
窗口重置了 0 次大小。
x=0; $(window).resize(function(){ $("span").text(x+=1); });scroll事件
当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
基本语法：
$(selector).scroll(function(){
…
})
示例：滚动文本内容，记录其滚动次数。
滚动了 0 次。
x=0; $("div").scroll(function(){ $("span").text(x+=1); }); ## 编程要求 根据提示，在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：当改变窗口大小时，弹出提示框“不建议调整窗口大小!”；
当滚动文本内容时，将下方文字Scroll not happened改成Scroll happened!，并使得每次滚动内容时文本都有淡出fadeOut的动画效果。
提示：相应的操作对象已经为你提供了class属性名和id属性名。
注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。
<!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(){
//$("span").html("Scroll happened!");
$("span").css("display", "inline").fadeOut("slow");
});
//------------end------------
});
</script>
<style>
.container{
width: 500px;
margin: 40px auto;
}
</style>
</body>
</html>