jQuery笔记6

keyup

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

例子：当输入值按键抬起时时，所有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").keyup (function(){

        $("input").css("background-color","rgb(0,255,255)");
    });
</script>

二mousedown

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

例子：按钮被点击时，输入框变成蛋蛋色

<!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>
<button>按钮</button>
<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"))
    $("button").mousedown (function(){

        $("input").css("background-color","rgb(0,255,255)");
    });
</script>

三mouseenter

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

例子：当鼠标指针穿过元素时，文本框变为蛋蛋色

<!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>
<button>按钮</button>
<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"))
    $("button").mouseover (function(){

        $("input").css("background-color","rgb(0,255,255)");
    });
</script>

 

 

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