JQuery一些方法的使用小案例_jquery 鼠标上浮-优快云博客

本文链接：https://blog.youkuaiyun.com/Z_2010317/article/details/126312960

案例一

利用鼠标悬浮mouseover与选择器:

html部分：

 <div class="bor">
        <ul>
            <li><a href="#"><img src="./img/01.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/02.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/03.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/04.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/05.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/06.jpg" alt=""></a></li>
        </ul>
    </div>

JQuery代码部分:

$(function(){
            //首先给li设置一个悬浮事件
            $('ul li').mouseover(function(){
                $(this).css('opacity','1').siblings().css('opacity','0.5');
            })
            $('ul li').mouseout(function(){
                $(this).css('opcity','1');
            })
        })

效果图:

通过写此小案例巩固了对鼠标悬浮事件与选择器的掌握。

案例二：

    <style>
        ul{
            display: flex;
        }
        ul li{
            list-style: none;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin-left: 10px;
        }
        #one{
            margin-left: 50px;
        }
        .basic{
            background-color: green;
        }
        .bigger{
            background-color: pink;
        }
    </style>

    <script>
        $(function(){
            // 获取第一个input标签，绑定点击事件
            //添加basic类
            $("input:first").click(function(){
                //先获取所有的li
                // 然后给li添加class
                $('ul li').addClass('basic');
            })
            // 移除basic类
            $('input').eq(1).click(function(){
                $('ul li').removeClass('basic');
            })
            //添加bigger类
            // addclass()：给元素添加class，如果元素已经在其他的classname，
            // 那么将新添加的追加到现有的classname后面。
            $("input").eq(2).click(function(){
                //先获取所有的li
                // 然后给li添加class
                $('ul li').addClass('bigger');
            })
            
            //移除bigger类
            $("input").eq(3).click(function(){
                //先获取所有的li
                // 然后给li添加class
                // removeClass();可以将元素的某个class移除，如果未传参数，则可以将元素
                // 上的所有class移除掉。
                $('ul li').removeClass('bigger');//移除class为bigger的元素
                $('ul li').removeClass();//将元素上的所有class移除
            })
            // 判断bigger类
            $("input").eq(4).click(function(){
                //先获取所有的li
                // 然后给li添加class
                if(!$('ul li').hasClass('bigger')){
                    $('ul li').addClass('bigger');
                }
            })

            // 切换类
            $("input").eq(5).click(function(){
                //先获取所有的li
                // 然后给li添加class
                $('ul li').toggleClass('bigger');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="添加basic类" id="one">
    <input type="button" value="移除basic类">
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断bigger类">
    <input type="button" value="切换类">

    <ul>
        <li class="listOne">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

效果图:

案例三:

利用.text();方法可以改变标签中的文字( .html(); )

HTML部分:

 <div>
        <h2>图书分类</h2>
        <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="#">社科</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="#">引进版</a></li>
            <li><a href="#">其他类</a></li>
        </ul>
        <a href="#" id="jianh">简化</a>
    </div>

JS部分：

 $(function(){
            $('#jianh').click(function(){
                if($(this).text()=="简化"){
                    //获取大于索引值为4与不选取最后一个元素进行隐藏
                    $('ul li:gt(4):not(:last)').hide();
                    $(this).text('更多');
                }else{
                    //设置显示，文字更改为"简化"
                    $('ul li:gt(4):not(:last)').show();
                    $(this).text('简化');
                }
            })
        })

效果图:

案例四：

append 给某个元素添加元素

appendTo 将某个元素添加到目标元素中

prepend ()、都是给某元素前面或者后面添加元素

before 在标签元素外开头添加元素，相邻

after 在标签外后面添加元素

<style>
        ul li{
            list-style: none;
            width: 200px;
            background-color: green;
        }
        ul li:nth-child(2n-1){
            background-color: red;
        }
    </style>

    <script>
        $(function(){
            // $('ul li').odd().css('background','red');
            $('#btn1').click(function(){
                $('ul').append('<li>黄瓜</li>');
            })
            $('#btn2').click(function(){
                $('<li>苦瓜</li>').appendTo('ul');
            })
            $('#btn3').click(function(){
                $('ul').prepend('<li>甜瓜</li>');
            })
            $('#btn4').click(function(){
                $('<li>傻瓜</li>').prependTo('ul');
            })
            $('#btn5').click(function(){
                $('ul').before('<h2>一群小瓜瓜</h2>');
            })
            $('#btn6').click(function(){
                $('ul').after('<span>注意:不要吃太多的瓜哦!</span>');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="append" id="btn1">
    <input type="button" value="appendTo" id="btn2">
    <input type="button" value="prepend" id="btn3">
    <input type="button" value="prependTo" id="btn4">
    <input type="button" value="before" id="btn5">
    <input type="button" value="after" id="btn6">
    <ul>
        <li>西瓜</li>
        <li>南瓜</li>
        <li>冬瓜</li>
    </ul>
</body>

效果图: