基于jQuery的todolist案例基于jQuery的todolist的简单案例，可以进行添加项目、切换状态等。点击a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/JQuery.3.6.0.js"></script>
    <style>
        .run {
            color: black;
        }
        .done {
            color: red;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <input type="text"><button class="add-btn">add</button>
    <ul>
        <li class="run">html</li>
        <li class="run">css</li>
        <li class="run">javascript</li>
    </ul>
    <a href="#">all</a>
    <a href="#">run</a>
    <a href="#">done</a>
    <script>
        //添加
        $('body').on('click','.add-btn',function(){
            var $input = $(this).prev();
            //新增标签
            $('ul').append(`<li>${$input.val()}</li>`);
        });
        //切换run或done状态
        $('body').on('click','ul li',function(){
            var className = $(this).prop('class');
            if(className == "run"){
                $(this).prop('class','done');
            }else{
                $(this).prop('class','run');
            }
        });

        //点击a标签实现显示对应状态的列表项li
        $('body').on('click','a',function(e){
            //取消默认行为防止跳转或刷新
            e.preventDefault();
            var text = $(this).text();
            switch (text) {
                case "all":liShow(text);break;
                case "run":liShow(text);break;
                case "done":liShow(text);break;
                    
            }
        });

        function liShow(text){
            if(text=="all"){
                $('ul li').show();
            }else if(text=="run"){
                $('ul .run').show();
                $('ul .done').hide();
            }else{
                $('ul .donw').show();
                $('ul .run').hide();
            }
            //去掉点击的a标签的href属性
            $('a').each(function(){
                if($(this).text()==text){
                    $(this).removeAttr('href');
                }else{
                    $(this).prop('href','#');
                }
            })
        }
    </script>
</body>
</html>