jquery 事件 dblclick_change_blur_focus_one_hover_focusin_focusout_resize_select_submit.html

学无止境慢慢来

已于 2022-01-19 19:17:50 修改

阅读量237

点赞数

分类专栏： jQuery 文章标签： jquery html javascript

于 2019-07-26 17:54:45 首次发布

原文链接：https://www.runoob.com/jquery/jquery-ref-events.html

版权

jQuery 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 事件</title>
    <style>
        span {
            display: none;
        }
    </style>
    <script src="lib/jquery/jquery-3.2.1.js"></script>
</head>
<body>

<p class="dblclick">2.dblclick事件，双击这个段落。</p>
<input class="change" type="text" value="3.change 事件">
<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
<input name="blur" type="text" value="4.blur事件"><br>

<script>
    $(function () {

        // 2.dblclick
        // 参考：https://www.runoob.com/jquery/event-dblclick.html
        $("p.dblclick").dblclick(function () {
            alert("这个段落被双击了。");
        });

        // 3.change（触发条件：更改文本框后，回车或点击输入框外部）
        // 参考：https://www.runoob.com/jquery/event-change.html
        $("input.change").change(function () {
            alert("文本已被修改");
        });

        // 4.blur
        // 参考：https://www.runoob.com/jquery/event-blur.html
        // 以下两种写法都行。
        // $("input[name='blur']").blur(function () {
        $("input[name=blur]").blur(function () {
            alert("输入框失去了焦点");
        });

        // 5.focus
        // 参考：https://www.runoob.com/jquery/event-focus.html
        $("input.focus").focus(function () {
            // 设置span元素的样式及其动画效果（耗时2s，淡出）。
            $("span").css("display", "inline").fadeOut(2000);
        });

        // 8.one
        // 参考：https://www.runoob.com/jquery/event-one.html
        // 当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。
        $("p.oneClick").one("click", function () {
            // jquery动画。
            $(this).animate({fontSize: "+=6px"});
        });
        $("button.slide").click(function () {
            // 段落上、下滑动。
            $("p.oneClick").slideToggle();
        });

        // 9.hover
        // 参考：https://www.runoob.com/jquery/event-hover.html
        // hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
        // 方法触发 mouseenter 和 mouseleave 事件。
        // 注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
        $("p.hover").hover(
            function () {
                $(this).css({"color": "red", "font-size": "large"});
            },
            function () {
                $(this).css({"color": "black", "font-size": "medium"});
            }
        );

        // 10.focusin && focusout
        // 参考：https://www.runoob.com/jquery/event-focusin.html
        // 当 <div> 元素或其任意子元素获得焦点时，设置 <div> 元素的背景颜色。
        // 当 <div> 元素或其任意子元素失去焦点时，设置 <div> 元素的背景颜色。
        // 与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发。
        // 与 blur() 方法不同的是，focusout() 方法在任意子元素失去焦点时也会触发。
        // 获取焦点，貌似是输入框的特有功能。
        $("div").focusin(function () {
            $(this).css("background-color", "#FFFFCC");
        });
        $("div").focusout(function () {
            $(this).css("background-color", "#FFFFFF");
        });

        // 11.resize(调整浏览器窗口大小事件，拖动控制台边线，也算改变窗口大小。)
        // 参考：https://www.runoob.com/jquery/event-resize.html
        let x = 0;
        $(window).resize(function () {
            x++;
            // $("p.resize").html(x);
            // $("div p").html(x);
            $("div>p").html(x);
            console.log("x:", x);
        });

        // 12.select
        // 参考：https://www.runoob.com/jquery/event-select.html
        // 当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。
        $("input.select").select(function () {
            alert("文本已选中!");
        });

        // 13.submit（表单提交事件，点击提交按钮后，提交前触发。）
        // 参考：https://www.runoob.com/jquery/event-submit.html
        // 当提交表单时，会发生 submit 事件。
        // 该事件只适用于 <form> 元素。
        $("form").submit(function () {
            alert("提交");
        });
    });
</script>

<input class="focus" value="5.focus事件">
<span>请输入你的电话号码?</span>
<p>点击输入框获取焦点。</p>
<p class="oneClick">8.oneClick事件，这是一个段落 。</p>
<p class="oneClick">8.oneClick事件，这是另外一个段落。</p>
<p class="oneClick">8.oneClick事件，点击任意一个段落来修改段落的字体大小，每个段落只会执行一次。</p>
<button class="slide">滑动8的三个段落</button>
<p class="hover">9.hover事件，鼠标移动到该段落。</p>
<div style="border: 1px solid black;padding:10px;">
    10.First name: <input type="text"><br>
    Last name: <input type="text">
</div>
<p>输入框获取焦点，输入框失去焦点。</p>
<div>
    11.resize事件，窗口重置了
    <p class="resize">0</p>
    次大小。
</div>
<input class="select" type="text" value="12.select事件，www.runoob.com">
<p>在输入框中选取文本</p>
<form action="">
    13.submit事件，First name:
    <input type="text" name="FirstName" value="Mickey"><br>
    Last name:
    <input type="text" name="LastName" value="Mouse"><br>
    <input type="submit" value="提交">
</form>
<input class="trigger" type="text" value="14.trigger.select事件，Hello World">
<br><br>
<button class="trigger">触发输入框的 select 事件</button>
<br>
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button>
<br><br>
<p>执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，而 .triggerHandler 仅仅
    执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。</p>
<input class="triggerHandler" type="text" value="将获取焦点">
<input class="triggerHandler" type="text" value="将获取焦点">

<script>
    $(function () {
        // 14.trigger(用于，触发某元素的某事件。)
        // 参考：https://www.runoob.com/jquery/event-trigger.html
        // trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交, 浏览器的行为、动作）。
        $("input.trigger").select(function () {
            // $("input").before("文本已选中!&nbsp;&nbsp;");
            $(this).after("&nbsp;&nbsp;文本已选中!");
        });
        $("button.trigger").click(function () {
            // 触发 <input.trigger> 元素的 select 事件
            $("input.trigger").trigger("select");
        });

        // 15.trigger vs triggerHandler
        // 参考：https://www.runoob.com/jquery/event-trigger.html
        // trigger方法与triggerHandler方法类似，不同的是triggerHandler不触发事件的默认行为。
        // trigger方法会操作jQuery对象匹配的所有元素，而triggerHandler方法只影响第一个匹配元素。
        // 由triggerHandler()创建的事件不会在DOM树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
        $("#old").click(function () {
            $("input.triggerHandler").trigger("focus");
        });
        $("#new").click(function () {
            $("input.triggerHandler").triggerHandler("focus");
        });
        $("input.triggerHandler").focus(function () {
            $(this).after(" 文本已选中！");
            $(this).css({"color": "red", "font-size": "large"});
            // $("<p>获取焦点!</p>").appendTo("body").fadeOut(2000);
            // $("body").append("<p>获取焦点!</p>");
        });
    });
</script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 事件 dblclick_change_blur_focus_one_hover_focusin_focusout_resize_select_submit.html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery事件</title> <style> span { display: none; ...
复制链接

扫一扫