jQuery笔记-事件4

一dblclick（双击事件）

当双击元素时，发生 dblclick 事件。

例子：当按钮被两次点击时，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").dblclick(
        function () {
            $(div1).css("background-color","blue",);

        },
    )
</script>

二focus()

当元素获得焦点时触发 blur 事件。

例子：当所有与表单同辈的 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").focus( function () { alert("获得焦点"); } );
</script>

三focusin（获得焦点）

当元素获得焦点时，触发 focusin 事件。

focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

例子：当文本框获得焦点，显示文本框后面的字，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").focusin(function() {
        $(this).find("span").css('display','inline').fadeOut(1000);
    });
</script>

 

 

 

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