jquery处理命名冲突的属性 jquery事件命名空间

转载

mob6454cc696f04 2024-01-12 22:05:52

文章标签 jquery处理命名冲突的属性 1024程序员节 html jquery javascript 文章分类 jQuery 前端开发

1、自定义事件

自定义事件，必须满足两个条件
1、事件必须是通过on绑定的
2、事件必须通过trigger来触发

<html>
    <style type="text/css">
    .father{ width: 200px; height: 200px; background-color: green;}
    .son{ width: 100px; height: 100px; background-color: yellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        $(function (){ 
            $(".son").on("myClick",function(){
                alert("son");
            });

            $(".son").trigger("myClick")
        });    

    </script> 
<head>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    
</body>

</html>

2、事件命名空间

添加事件命名空间需要
1、事件时通过on来绑定的
2、用trigger来区分

<html>
    <style type="text/css">
    .father{ width: 200px; height: 200px; background-color: green;}
    .son{ width: 100px; height: 100px; background-color: yellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        $(function (){


            $(".son").on("click.zs",function(){//事件里面填入相应的命名空间（zs或li）
                alert("click1");
            });
            $(".son").on("click.li",function(){
                alert("click2");
            });

            $(".son").trigger("click.zs");
            
        });    

    </script> 
<head>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    
</body>

</html>

再一例

<html>
    <style type="text/css">
    .father{ width: 200px; height: 200px; background-color: green;}
    .son{ width: 100px; height: 100px; background-color: yellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        $(function (){
            $(".father").on("click.li",function(){//事件里面填入相应的命名空间
                console.log("father click1");
            });

            $(".father").on("click",function(){//事件里面填入相应的命名空间
                console.log("father clickonly");
            });

            $(".son").on("click.li",function(){
                console.log("son click2");
            });
            //利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的时间也会被触发
            //而父元素没有命名空间的时间不会被触发
           $(".son").trigger("click.li");
           //利用trigger触发不带命名空间的事件,子元素所有相同类型的时间，和父元素所有相同类型的时间都会被触发
           $(".son").trigger("click");
        });    

    </script> 
<head>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    
</body>

</html>

3、事件委托

在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jquery会遍历所有找到的元素，给所有找到的元素添加事件。

实际就是将本元素的的事件委托给另外一个元素来实现，通常是委托给父元素来实现

<html>
    <style type="text/css">
    .father{ width: 200px; height: 200px; background-color: green;}
    .son{ width: 100px; height: 100px; background-color: yellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        $(function (){
            $("button").click(function(){
                $("ul").append("<li>我是新增加的li</li>");
            });
            //如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jquery会遍历所有找到的元素，给所有找到的元素添加事件。
            /*
            $("ul>li").click(function(){//>是子元素的表示符
                console.log($(this).html());
            });
            */
            //事件委托，将li的click事件委托给ul去监听
            $("ul").delegate("li","click",function(){
                console.log($(this).html());
            });
        });    

    </script> 
<head>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
    </ul>
    <button>新增一个li</button>  
</body>
</html>

事件委托的另外一例

<html>
    <style type="text/css">
    html,body{
        width: 100%; height: 100%;
    }
    .mask{width: 100%; height: 100%; position: fixed; top:0;left:0}
    .login{ width: 800px; height: 290px; margin:100px auto; position: relative;}
    .login>span{ display: block; width:70px; height: 30px; background-color: red; position: absolute; top: 0; right: 0;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        $(function (){
            $("a").click(function(){
                var $mask=$("<div class=\"mask\">\n"+
        "<div class=\"login\">\n"+
            "<img src=\"images/gril02.jpg\" >\n"+
            "<span>模拟关闭</span>\n"+
        "</div>\n"+
    "</div>");

            $("body").append($mask);
            //使用事件委托
            $("body").delegate(".login>span","click",function(){
                $mask.remove();
            });

                return false;
            });
        });    

    </script> 
<head>
</head>
<body>    
    <a href="http://www.sina.com.cn">点击登录</a> <br/>
    
    </div>
</body>
</html>

4、移入移除事件

1、mouseover,mouseout
会受到元素父子关系的干扰
2、mouseenter，mouseleave
不会受到元素父子关系的干扰
3、hover
传入两个函数，分别对应移入和移出，同时不会受到父子元素关系的干扰。
如果只传入一个函数，则，这个函数即监听移入又监听移出

<html>
    <style type="text/css">
   .father{ width: 200px; height: 200px; background-color: green;}
   .son{ width: 100px; height: 100px; background-color:yellow; }
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        $(function (){
            
            $(".father").mouseover(function(){
                console.log("移入到father中");
            });
            $(".father").mouseout(function(){
                console.log("移出father中");
            })
            
            $(".father").mouseenter(function(){
                console.log("移入到father中");
            });
            $(".father").mouseleave(function(){
                console.log("移出到father中");
            });
			$(".father").hover(function(){
                console.log("移入到father中");
            },function(){
                console.log("移出到father中");
            });
        });    

    </script> 
<head>
</head>
<body>    
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

同时监听移入和移除

5、一个电影排行榜（移入移除监听）

<html>
    <style type="text/css">
   .box{width: 300px; height: 590px; margin:50px auto; border:1px solid red}
   .box h1{ font-size: 20px; line-height: 35px; color:red;}
    ul>li{
        list-style: none; padding: 5px 10px; border:1px dashed gray;
    }
    ul>li:nth-child(-n+4) span{
        background-color: green;
    }
    ul>li>span{display: inline-block; width: 30px; height: 30px;
    text-align: center; line-height: 30px;background-color: gray;
    }
    .content{ clear: both; display: none;}
    .content>img{ width: 50px; height: 50px; float: left; clear: right;}
    .content>p{width: 150px; height: 110px;}

    .current .content{ display: block;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        $(function (){
          $("li").mouseenter(function (){
              //添加属性的方式
              //$(this).add("class","current");
              //直接添加类的方式
              $(this).addClass("current");
          })
          $("li").mouseleave(function (){
              $(this).removeClass("current");
          })
        });    

    </script> 
<head>
</head>
<body>    
    <div class="box">
        <ul>
            <h1>最新电影</h1>
            <li><span>1</span>电影名称
                <div class="content">
                    <img src="images/img1.PNG">
                    <p>关于影片的简介关于影片的简介关于影片的简介关于影片的简介关于影片的简介关于影片的简介</p>
                </div>
            </li>
            <li><span>2</span>电影名称</li>
            <li><span>3</span>电影名称</li>
            <li><span>4</span>电影名称</li>
            <li><span>5</span>电影名称</li>
            <li><span>6</span>电影名称</li>
            <li><span>7</span>电影名称</li>
            <li><span>8</span>电影名称</li>
            <li><span>9</span>电影名称</li>

        </ul>
    </div>
</body>
</html>

jquery处理命名冲突的属性 jquery事件命名空间_html

6、table选项卡（移入移除监听）

index属性的应用

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    li{list-style: none;}
    .box{ width:440px; height: 300px;border: 1px solid green; margin: 50px auto;}
    .nav>li{ list-style: none; width:110px; height: 50px; background-color: orange; text-align: center; line-height: 50px; float: left;}
    .nav>.current{ background-color: green;}
    img{width: 440px; height: 250px;}
    .content>li{ display: none;}
    .content>.show{ display: block;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        
        $(function (){
          $(".nav>li").mouseenter(function (){
              console.log("hello");
              $(this).addClass("current");
              //获取当前选项卡的索引
              var index=$(this).index();//获取当前项在数组中排行第几
              //根据索引找到对应的图片所在li
              $li=$(".content>li").eq(index);
              //显示找到的图片
              $li.addClass("show");
              //隐藏对应的图片
              
          })
          $("li").mouseleave(function (){
            $(this).removeClass("current");
            var index=$(this).index();
            $li=$(".content>li").eq(index);
              //显示找到的图片
              $li.removeClass("show");
          })
        });    

    </script> 
<head>
</head>
<body>    
    <div class="box">
        <ul class="nav">
            <li class="current">HTML5+CSS3</li>
            <li>jQuery</li>
            <li>C语言</li>
            <li>Go语言</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="images/gril01.jpg"></li>
            <li><img src="images/gril02.jpg" ></li>
            <li><img src="images/gril03.jpg"></li>
            <li><img src="images/gril04.jpg"></li>
        </ul>
    </div>
</body>
</html>

jquery处理命名冲突的属性 jquery事件命名空间_1024程序员节_02

再一例

使用siblings选择上的补集

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    li{list-style: none;}
    .box{ width:440px; height: 300px;border: 1px solid green; margin: 50px auto;}
    .nav>li{ list-style: none; width:110px; height: 50px; background-color: orange; text-align: center; line-height: 50px; float: left;}
    .nav>.current{ background-color: green;}
    img{width: 440px; height: 250px;}
    .content>li{ display: none;}
    .content>.show{ display: block;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        
        $(function (){
          $(".nav>li").mouseenter(function (){
          $(this).addClass("current");
          //还原其他兄弟项的样式
          $(this).siblings().removeClass("current");
          var index=$(this).index();
          var $li=$(".content>li").eq(index);
          $li.addClass("show");
          $li.siblings().removeClass("show");
        
          });

          
        });    

    </script> 
<head>
</head>
<body>    
    <div class="box">
        <ul class="nav">
            <li class="current">HTML5+CSS3</li>
            <li>jQuery</li>
            <li>C语言</li>
            <li>Go语言</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="images/gril01.jpg"></li>
            <li><img src="images/gril02.jpg" ></li>
            <li><img src="images/gril03.jpg"></li>
            <li><img src="images/gril04.jpg"></li>
        </ul>
    </div>
</body>
</html>

jquery处理命名冲突的属性 jquery事件命名空间_1024程序员节_03

7、动画显示、隐藏元素、切换隐藏及显示（show、hide、toggle）

<html>
    <style type="text/css">
    div{width: 200px; height: 200px; background-color: green; display: none;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        
        $(function (){
          $("button").eq(0).click(function (){
              //$("div").css({display:"block"});
              $("div").show(1000);//1000毫秒来显示
              $("div").show(1000,function(){
                  console.log("动画执行完毕之后调用");
              });//1000毫秒来显示
          });
          $("button").eq(1).click(function (){
              //$("div").css({display:"none"});
              $("div").hide(1000);//1000毫秒来显示
            });
          $("button").eq(2).click(function (){
            $("div").toggle(1000,function(){
                console.log("切换显示");
            });
          });  

          
        });    

    </script> 
<head>
</head>
<body>    
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button><br/>
    <div></div>
</body>
</html>

8、对联广告（使用scroll及scrollTop）

<html>
    <style type="text/css">
    .left{float: left; position: fixed; left: 0; top: 200px;}
    .right{float: right;position: fixed; right: 0; top: 200px;}
    img{display: none;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        
        $(function (){
          //对window进行监听
          $(window).scroll(function(){
              //获取网页滚动的偏移位
            var offset=$("html body").scrollTop();
            //判断网页是否滚动到了指定位置
            if(offset>=300){
                //动画显示
                $("img").show(500);
            }else{
                $("img").hide(500);
            }
          });
          
        });    

    </script> 
<head>
</head>
<body>    
    <img class="left" src="images/img3.PNG">
    <img class="right" src="images/img4.PNG">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   
</body>
</html>

9、展开及收起（使用slideDown、slideUp及slideToggle）

<html>
    <style type="text/css">
    div{width:100px; height: 300px; background-color: green; display: none;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        
        $(function (){
          $("button").eq(0).click(function (){
            $("div").slideDown(500,function(){
                console.log("展开了div");
            });
          });
          $("button").eq(1).click(function (){
            $("div").slideUp(500,function(){
                console.log("收起了div");
            });
          }); 
          $("button").eq(2).click(function (){
            $("div").slideToggle(500);
          });           
        });    

    </script> 
<head>
</head>
<body>    
    
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
</body>
</html>

10、折叠菜单

<html>
    <style type="text/css">
    *{margin:0; padding: 0;}
    li{list-style: none;}
    .nav{ list-style: none; width: 300px; margin: 100px auto;}
    .nav>li{
        border:1px solid gray; line-height: 35px;
        border-bottom: none;
        text-indent: 2em;
        position: relative;

    }
    .nav>li:last-child{
        border-bottom: 1px solid gray;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .nav>li:first-child{
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        position: relative;
    }
    .sub{ display: none; }
    .nav> li > span{
        position: absolute; right:5px; top: 0;
        display: inline-block; width: 35px; height: 35px; 
        background:url("images/cha1.png") no-repeat center center ;
    }
    .sub>li{background-color: pink; border-bottom: 1px solid white;}
    .sub>li:hover{background-color: purple;}
    .nav>.current>span{
        transform: rotate(90deg);
    }

    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
        
        $(function (){
            $(".nav>li").click(function (){
                //拿到二级菜单
                var $sub=$(this).children(".sub");
                //让二级菜单展开
                $sub.slideDown(500);
                //拿到所有非当前的二级菜单
                var $other=$(this).siblings().children(".sub");
                $other.slideUp(500);

                //被点击的1级菜单箭头旋转
                $(this).addClass("current");
                //非被点击的1级菜箭头还原
                $(this).siblings().removeClass("current");

            });
        });    

    </script> 
<head>
</head>
<body>    
    <ul class="nav">
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>


    </ul>
</body>
</html>

jquery处理命名冲突的属性 jquery事件命名空间_jquery_04