jQuery笔记5

一focusout

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

focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

例子：当文本框失去焦点，文本框后面的字，1秒后逐渐消失

<!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>
<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>
</body>
</html>
<script>
    $("p").focusout(function() {
        $(this).find("span").css('display','inline').fadeOut(1000);
    });
</script>

二keydown

当键盘或按钮被按下时，发生 keydown 事件。输入值得时候生效

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

例子：当输入值时，所有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>
    $("form ~ input").keydown(function(){
        $("input").css("background-color","yellow");
    });
</script>

三keypress

当键盘或按钮被按下时，发生 keypress 事件。

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

例子：当输入值时，所有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>

    $("form ~ input").keypress (function(){

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

 

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