首页 > Web开发 > 详细

JQuery切换事件

时间:2019-07-12 23:01:20      阅读:89      评论:0      收藏:0      [点我收藏+]

JQuery切换事件

hover

汉意:盘旋。指鼠标移入移出事件。

$("XXX").hover(
    function() { /*鼠标移入*/},
    function() { /*鼠标移出*/}
);
<html>
    <head>
        <meta charset="UTF-8">
        <title>hover</title>
        <style>
            li {
                color: white;
                list-style: none;
                float: left;
                width: 100px;
                text-align: center;
                background-color: #e1e1e1;
            }
            a {
                font-size: 20px;
                font-weight: bold;
                text-decoration: none;
            }
            a:link {
                color: white;
            }
            a:visited {
                color: white;
            }
            .current {
                background-color: #666;
            }
        </style>

        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#menu li").hover(
                    function() {
                        //当鼠标移入#menu li元素时
                        $(this).addClass("current");
                    },
                    function() {
                        //当鼠标移出#menu li元素时
                        $(this).removeClass("current");
                    });
            });
        </script>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">酒店</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">KTV</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">生活服务</a></li>
            </ul>
        </div>
    </body>
</html>

toggle

(1.9版本以上已不支持)

jQuery对象.toggle(
   function(){},  //第一次单击时触发
   function(){},  //第二次单击时触发
   function(){},  //第三次单击时触发
   …
);

trigger

触发被选元素上指定的事件以及事件的默认行为

应用:文本框内容默认选中

<html>
    <head>
        <meta charset="UTF-8">
        <title>trigger</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                // (1)文本框内容默认选中
                $("#txtName").trigger("select");
                
                // (2)*自定义事件(与 bind() 一起使用)
                $("#txtName").bind("myEvent", function(event, message1, message2) {
                    // 业务:传两个参数进来,在控制台打印输出
                    console.log(message1 + ',' + message2);
                }).trigger("myEvent", ["Hello", "World!"]);
            });
        </script>
    </head>
    <body>
        用户名:
        <input type="text" id="txtName" value="江流儿" />
    </body>
</html>

JQuery切换事件

原文:https://www.cnblogs.com/tigerlion/p/11178745.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!