jQuery基础之jQuery和原生js实现tab选项卡和电影排行榜

小鱼儿 2024-04-17 23:14 54阅读 0赞

### 相关知识点 ###

###### $("li").mouseenter()和 $("li").mouseleave()与("li").hover() ######

###### $(this).addClass("current");//添加样式 ######

###### $(".content>li").eq(index);//选择一个jQuery对象，还有一个get方法一样，不过get方法会返回一个节点，就不能用jQuery操作了 ######

###### $li.removeClass("show");// 移除演示 ######

###### $(this).siblings().removeClass("current");//选择除了自己之外的兄弟元素 ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>电影排行榜</title>
    </head>
    <style>
        * { 
            padding: 0;
            margin: 0;
        }
    
        .box { 
            width: 300px;
            height: 500px;
            margin: 50px auto;
            border: 1px solid #000;
        }
    
        .box>h1 { 
            font-size: 20px;
            padding-left: 10px;
        }
    
        .content>img { 
            width: 80px;
            height: 120px;
            float: left;
            overflow: hidden;
        }
    
        .content>p { 
            width: 180px;
            height: 120px;
            float: left;
            margin-left: 10px;
            font-size: 12px;
            line-height: 20px;
        }
    
        .content { 
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }
    
        li { 
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
            cursor: pointer;
        }
    
        .box span { 
            margin-right: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: #ccc;
        }
    
        ul>li:nth-child(-n+3) span { 
            background: deeppink;
        }
    
        .current .content { 
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        //使用jQuery方式
        $(function() { 
            //方法一
            // 1.监听li的移入事件
            // $("li").mouseenter(function() { 
            // $(this).addClass("current");
            // })
            // // 1.监听li的移出事件
            // $("li").mouseleave(function() { 
            // $(this).removeClass("current")
            // })
    
            //方法二
            // $("li").hover(function() { 
            // $(this).addClass("current")
            // }, function() { 
            // $(this).removeClass("current")
            // })
    
            //方法三,只是会留下当前所对应的内容不会消失，这是和上面的区别
            // $("li").mouseenter(function() { 
            // $(this).addClass("current");
            // $(this).siblings().removeClass("current")
            // })
        })
    
        //使用原生js
        window.onload = function() { 
            var oLi = document.getElementsByClassName("box")[0].getElementsByTagName('li');
            //方法一
            // for (var i = 0; i < oLi.length; i++) { 
            // oLi[i].onmouseenter = function() { 
            // this.className = "current";
            // }
            // oLi[i].onmouseleave = function() { 
            // this.className = "";
            // }
            // }
    
            //方法二，只是会留下当前所对应的内容不会消失，这是和上面的区别
            for (var i = 0; i < oLi.length; i++) { 
                oLi[i].index = i;
                oLi[i].onmouseenter = function() { 
                    this.className = "current";
                    console.log(siblingsOf(oLi[this.index]));//(5) [li, li, li, li, li]
                    //除当前元素外全部隐藏
                    for(var n=0;n< siblingsOf(oLi[this.index]).length;n++){ 
                        siblingsOf(oLi[this.index])[n].className="";
                    }
                }
            }
            //函数为 获的除自身之外的所有兄弟节点
            function siblingsOf(elem) { 
                var len = 0;
                var children = elem.parentNode.childNodes; //获取目标元素的所有兄弟元素和它自身
                var siblings = new Array();
                for (var i = 0, len = children.length; i < len; i++) { 
                    //判断此元素是一个元素节点而且不是调用元素的本身
                    //若为真放进数组里面
                    if (children[i] != elem) { 
                        siblings.push(children[i]);
                    }
                }
                //返回最后得出的结果数组
                return siblings;
            }
        }
    </script>
    
    <body>
        <div class="box">
            <h1>电影排行榜</h1>
            <ul>
                <li><span>1</span>demo
                    <div class="content">
                        <img src="img/demo (1).png" alt="">
                        <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
    
                    </div>
                </li>
                <li><span>2</span>demo
                    <div class="content">
                        <img src="img/demo (1).png" alt="">
                        <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
    
                    </div>
                </li>
                <li><span>3</span>demo
                    <div class="content">
                        <img src="img/demo (1).png" alt="">
                        <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
    
                    </div>
                </li>
                <li><span>4</span>demo
                    <div class="content">
                        <img src="img/demo (1).png" alt="">
                        <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
    
                    </div>
                </li>
                <li><span>5</span>demo
                    <div class="content">
                        <img src="img/demo (1).png" alt="">
                        <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
    
                    </div>
                </li>
                <li><span>6</span>demo
                    <div class="content">
                        <img src="img/demo (1).png" alt="">
                        <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
    
                    </div>
                </li>
            </ul>
        </div>
    </body>
    
    </html>