发表于: 2020-03-03 23:42:25

1 1653


今天完成的事情:今天学习了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 {
            displaynone;
        }
    </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>

运行结果

进行滚动

可以看出滚动的多少

剩下的明天继续进行


返回列表 返回列表
评论

    分享到