JQuery切换事件

最新推荐文章于 2021-11-29 15:04:45 发布

weixin_30610755

最新推荐文章于 2021-11-29 15:04:45 发布

阅读量246

点赞数

原文链接：http://www.cnblogs.com/tigerlion/p/11178745.html

版权

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>

转载于:https://www.cnblogs.com/tigerlion/p/11178745.html

weixin_30610755

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery切换事件

JQuery切换事件hover汉意：盘旋。指鼠标移入移出事件。$("XXX").hover( function() { /*鼠标移入*/}, function() { /*鼠标移出*/});<html> <head> <meta charset="UTF-8"> <title>ho...
复制链接

扫一扫