Educoder Jquery事件
·
Educoder 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 () {
$(this).css("background", "#e7e7e7");
$("p").html("这是个mouseenter事件");
});
$("input").mouseleave(function () {
$(this).css("background", "#4CAF50");
$("p").html("这是个mouseleave事件");
});
//------------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(){
$(".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表单事件
<!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文件/窗口事件
<!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>
欢迎加入西安开发者社区！我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动，与专家分享最新技术趋势，解决挑战，探索创新。加入我们，共同打造技术社区！
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)