jquery元素筛选和事件

1>元素筛选方法

jquery元素筛选和事件

       $(function(){

         //jquery的遍历方法 .each()
         $('ul').children().each(function(index,ele){

                console.log(index);
            console.log(ele);

            var isDanger = $(this).hasClass('danger');  //class包含danger

            if(isDanger){
               $(this).css('color','red'); //字体设置红色

            }else{
//             $(this).css('font-size','20px');
            }

         });
            
         console.log($('ul').children('.danger'));
         console.log($('li'));
         console.log($('a').parent());
            console.log('------------------------');
         console.log($('li').last().prev());
         console.log($('li').prevAll());
         console.log($('li').siblings('li'));

         //siblings

         console.log($('#anchor').siblings('a'));

         $('li').hover(function(){   //鼠标悬停，class增加active，也就是字体设置为50px，毗邻元素移除active
            $(this).addClass('active').siblings('li').removeClass('active');
         })

      })

2>轮播图案例

    <style type="text/css">
         *{padding: 0;margin: 0;}
         ul,ol{list-style: none;}

         #box{width: 650px;height: 250px;margin: 100px auto 0;background: red;overflow: hidden;position: relative;}
         #box ul{height: 250px;position: relative;z-index: 1;}
         #box ol{height: 30px;position: absolute;z-index: 2;bottom: 0;right: 0;}

         #box>ul>li{
            position: absolute;
            top:0;
            left: 0;
         }

         #box>ol>li{
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid white;
            background: gray;
            margin-right: 5px;
         }
         #box>ol>li:hover{
            cursor: pointer;
         }

         #box li.active{
            padding: 2px;
            color: orange;
            margin-top: -4px;
            border: 1px solid orange;
         }

    </style>
</head>
<body>

    <div id="box">
        <ul>
            <li style="z-index: 1"><a href="#"><img src="./images/01.jpg"></a></li>
            <li><a href="#"><img src="./images/02.jpg"></a></li>
            <li><a href="#"><img src="./images/03.jpg"></a></li>
            <li><a href="#"><img src="./images/04.jpg"></a></li>
            <li><a href="#"><img src="./images/05.jpg"></a></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>

</body>

<script src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function(){

        var index=0;
        $('#box>ol>li').hover(function(){
            index++;

            //更改下标的class
            $(this).addClass('active').siblings('li').removeClass('active');

            //根据下标设置对应的图片显示,index控制显示优先级
            $('#box>ul>li').eq($(this).index()).css({left:650,'z-index':index}).animate({left:0},1000);
//            $('#box>ul>li').eq($(this).index()).css({'z-index':index})
            
        })
        
    })


</script>

3>jquery常用事件

jquery元素筛选和事件

jquery元素筛选和事件

相关推荐