jQuery笔记-事件3

一blur（失去焦点）

当元素失去焦点时触发 blur 事件。

例子：当所有与表单同辈的 input 元素（案例中符合条件的是最后一个input）失去焦点，出现提示框，输出Hello World，注意需要先给焦点，才能失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" />
    </fieldset>
</form>
<input name="none" />
</body>
</html>
<script>
    console.log($("form ~ input"))
    $("form ~ input").blur( function () { alert("Hello World!"); } );
</script>

二change

当元素的值发生改变时，会发生 change 事件。

当元素的值改变时发生 change 事件（仅适用于表单字段）。

change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

例子：当所有与表单同辈的 input 元素（案例中符合条件的是最后一个input）发生改变，出现提示框，输出"改变"，注意需要先给焦点，才能失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" />
    </fieldset>
</form>
<input name="none" />
</body>
</html>
<script>
    console.log($("form ~ input"))
    $("form ~ input").change( function () { alert("改变!"); } );
</script>

三click（单击事件）

当单击元素时，发生 click 事件。

例子：当按钮被点击时，div背景色变黄

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<button>click me</button>
<div id="div1">
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
</div>
</body>
</html>
<script>
    const div1=document.getElementById('div1')
    $("button").click(
        function () {
            $(div1).css("background-color","yellow",);

        },
    )
</script>

 

posted @ 2021-12-12 20:08  蘑菇萌萌哒  阅读(40)  评论(0)    收藏  举报