• jQuery事件


    加载DOM

        <script type="text/javascript">
            function one() {
                alert("one");
            }
    
            function two() {
                alert("two");
            }
            /*
            jQery加载DOM就绪后就能注册事件,而JS加载DOM完成后才能注册事件
            jQuery加载DOM就绪注册事件
            */
            //方式一
            $(document).ready(function () {
                one();
            })
            $(document).ready(function () {
                two();
            })
            方式二
            $(function () {
                one();
            })
            $(function () {
                two();
            })
            //方式三
            $().ready(function () {
                one();
            })
            $().ready(function () {
                two();
            })
        </script>
    View Code

    绑定事件

    <script type="text/javascript">
            //绑定单击事件
    //        $(function () {
    //            $("#panel h5.head").bind("click", function () {  //给<h5>绑定click事件
    //                //$(this).next("div.content").show();  //点击后显示文本内容
    
    //                if ($(this).next("div.content").is(":visible")) {  //判断是否显示
    //                    $(this).next("div.content").hide();
    //                } else {
    //                    $(this).next("div.content").show();
    //                }
    //            });
    //        });
            //绑定鼠标事件()
    //        $(function () {
    //            $("#panel h5.head").bind("mouseover", function () {  //给<h5>绑定click事件
    //                $(this).next("div.content").show();
    //                    }).bind("mouseout",function(){
    //                        $(this).next("div.content").hide();
    //                        });
    //                });
            //简写上述事件
    //        $(function () {
    //            $("#panel h5.head").mousemove(function () {
    //                $(this).next("div.content").show();
    //            }).mouseout(function () {
    //                $(this).next("div.content").hide();
    //            });
    //        })
            //合成事件
            //hover(function1(),function2()) //模拟光标悬停事件,移动到元素时触发第一个函数,移除元素时触发第二个函数
    //        $(function () {
    //            $("#panel h5.head").hover(function () {
    //                $(this).next("div.content").show();
    //            }, function () {
    //                $(this).next("div.content").hide();
    //            });
    //        });
    
            //toggle(fn1,fn2,fn3) //第一次单击触发第一个函数,第二次触发第二个,依次。。。
    //        $(function () {
    //            $("#panel h5.head").toggle(function () {
    //                $(this).next("div.content").show();
    //            }, function () {
    //                $(this).next("div.content").hide();
    //            });
    //        });
            //toggle() 点击切换元素的可见状态
            $(function () {
                $("#panel h5.head").toggle(function () {
                    $(this).addClass("highlight"); //添加class为"highlight"的样式
                    $(this).next("div.content").toggle();
                }, function () {
                    $(this).removeClass("highlight"); //移除class为"highlight"的样式
                    $(this).next("div.content").toggle();
                })
            });
    
            //one()绑定事件,点击以后自动移除,只能点击一次
            $(function () {
                $("#button").one("click", function () { 
                    //执行操作
                })
            })
    
            //绑定多个事件
            $(function () {
                $("div").bind("mouseover mouseout", function () {
                    $(this).toggleClass("over"); //切换样式
                });
            });
    
    
        </script>
    View Code

    事件冒泡(事件对象)

        <%--事件冒泡 --%>
        <script type="text/javascript">
            //点击内层绑定事件 外层也被触发
    //        $(function () {
    //            $("span").bind("click", function () {
    //                var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
    //                $("#msg").html(txt);
    //            });
    //            $("#content").bind("click", function () {
    //                var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
    //                $("#msg").html(txt);
    //            });
    //            $("body").bind("click", function () {
    //                var txt = $("#msg").html() + "<p>body元素被单击</p>";
    //                $("#msg").html(txt);
    //            });
    //        });
            //停止冒泡事件
            $(function () {
                $("span").bind("click", function (event) {
                    var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
                    $("#msg").html(txt);
                    //事件对象
                    event.stopPropagation();  //停止冒泡事件 可用return false 替换
                    event.preventDefault(); //组织默认行为(提交表单) 可用return false 替换
                    event.type();  //获取事件类型
                    event.target(); //获取触发事件的元素
                    event.relatedTarget(); //获取mouseover和moveout的触发元素
                    event.pageX(); //获取光标相对于页面X的坐标
                    event.pageY(); //获取光标相对于页面Y的坐标
                    event.which(); //获取点击鼠标的按键:1=左,2=中,3=右
                    event.metaKey(); //获取Ctrl键
                    event.originalEvent(); //获取原始的事件对象
                });
                $("#content").bind("click", function () {
                    var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
                    $("#msg").html(txt);
                });
                $("body").bind("click", function () {
                    var txt = $("#msg").html() + "<p>body元素被单击</p>";
                    $("#msg").html(txt);
                });
            });
            
            
        </script>
    View Code

    移除事件

     <%--移除事件 --%>
        <script type="text/javascript">
            //同一个元素绑定多个事件
            $(function () {
                $("#button").bind("click", function () {
                    //绑定函数1
                }).bind("fous", function () {
                    //绑定函数2 
                })
            })
            
            //为绑定的click事件指定变量
            $(function(){
                $("#button1").click(myFun=function(){
                    //执行操作
                })
            })
    
            //b移除按钮上以前注册的事件
            $("#delAll").click(function () {
                $("#button1").unbind(); //点击id为delAll的按钮移除id为button1按钮的事件 移除全部事件
    
                $(#button1).unbind("click",myFun) ; //删除绑定的myFun事件
            })
        </script>
    View Code

    模拟事件(自动触发)

      <%--模拟事件(自动触发) --%>
        <script type="text/javascript">
            $(function () {
                $("#panel h5.head").click(function () {
                    $(this).next("div.content").show();
                });
                $("#panel h5.head").trigger("click");  //自动点击
            });
            
        </script>
    View Code

    添加事件的命名空间

     <%--添加事件的命名空间 --%>
        <script type="text/javascript">
            $(function () {
                $("div").bind("click.plugin", function () {
                    $("body").append("<p>click事件</p>");
                }).bind("mouseover.plugin", function () {
                    $("body").append("<p>moveover事件</p>");
                }).bind("mouseout", function () {
                    $("body").append("<p>mouseout事件</p>");
                })
    
                $("#button1").click(function () {
                    $("div").unbind(".plugin"); //移除命名空间是.plugin的事件
    
                    $("div").unbind("click!"); //移除不包含命名空间的click
                })
            });
        </script>
    View Code
  • 相关阅读:
    QT导出csv
    QTableView右键删除功能实现
    搜索框实现
    centos同步时间报错问题解决
    git怎么撤回提交
    python2报错 ascii' codec can't decode byte 0xe4 in position 5: ordinal not in range python3没问题
    使用poython将文本转换成doc文档
    CSS层叠样式总结
    Jrebel热部署插件安装
    VMware为CentOS设置固定ip
  • 原文地址:https://www.cnblogs.com/zxd543/p/3512524.html
Copyright © 2020-2023  润新知