今天完成的事情:今天学习了JQ的change() 方法,resize() 方法,mouseenter() 方法,keyup() 方法,focus() 方法,scroll() 方法
明天计划的事情:继续学习后续内容
遇到的问题:还是不太熟练需要多进行练习
收获:今天学习了很多的事件方法,如change() 方法
当元素的值改变时发生 change 事件(仅适用于表单字段)。
change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("文本已被修改");
});
});
</script>
</head>
<body>
<input type="text">
<p>在输入框写一些东西,然后按下 enter 键或点击输入框外部。</p>
</body>
</html>
运行结果

随意输入

resize() 方法,当调整浏览器窗口大小时,发生 resize 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x = 0;
$(document).ready(function () {
$(window).resize(function () {
$("span").text(x += 1);
});
});
</script>
</head>
<body>
<p>窗口重置了 <span>0</span> 次大小。</p>
<p>尝试重置窗口大小。</p>
</body>
</html>
运行结果

尝试调整窗口的大小


每次调整都会记录
mouseenter() 方法,
当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件,或添加当发生 mouseenter 事件时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("p").mouseenter(function () {
$("p").css("background-color", "yellow");
});
$("p").mouseleave(function () {
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>
运行结果

移动鼠标


有明显的的颜色变化
keyup() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("input").keydown(function () {
$("input").css("background-color", "yellow");
});
$("input").keyup(function () {
$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
</body>
</html>
运行结果

随意输入

输入内容颜色背景变化
jQuery 与 keyup 事件相关的事件顺序:
keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开
当键盘键被松开时发生 keyup 事件。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
提示:请使用 event.which 属性来返回哪个键被按下。
focus() 方法,
当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("input").focus(function () {
$("span").css("display", "inline").fadeOut(2000);
});
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input>
<span>请输入你的电话号码?</span>
<p>点击输入框获取焦点。</p>
</body>
</html>
运行结果

点击


出现焦点然后逐渐消失
scroll 事件
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x = 0;
$(document).ready(function () {
$("div").scroll(function () {
$("span").text(x += 1);
});
});
</script>
</head>
<body>
<p>尝试滚动 div 中的滚动条</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术,更是梦想!菜鸟教程 ——
学的不仅是技术,更是梦想!
<br><br>
菜鸟教程 —— 学的不仅是技术,更是梦想!菜鸟教程 —— 学的不仅是技术,更是梦想!</div>
<p>滚动了 <span>0</span> 次。</p>
</body>
</html>
运行结果

进行滚动

可以看出滚动的多少
剩下的明天继续进行
评论