案例：jQuery实现todoList、简单的tab选项卡、回到顶部、下拉菜单

这篇博客详细介绍了如何使用jQuery实现四个实用功能：1) todoList，包括添加任务、复选框状态更新和删除任务；2) 简单的tab选项卡切换；3) 回到顶部功能，滚动条不在顶部时点击按钮平滑滚动至页面顶部；4) 下拉菜单，鼠标悬停时显示下拉列表。

文章目录

一、todoList
二、tab选项卡切换
三、回到顶部
四、下拉菜单

一、todoList

代码如下：

<!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>todo布局</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <div class="todo-header">
                    <input id="newTodo" type="text" placeholder="请输入你的任务名称，按回车键确认" />
                </div>
                <ul class="todo-main">
                  <!-- <li>睡觉</li>
                  <li>烫头</li>
                  <li>吃饭</li> -->
                </ul>
                <div class="todo-footer">
                    <label>
                        <input id="checkAll" type="checkbox"/>
                    </label>
                    <span>
                        已完成<span id="allCompletedTodos">0</span> / 全部<span id="allTodos">2</span>
                    </span>
                    <button id="removeAllCompleted" class="btn btn-danger">清除已完成任务</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
    
    

            // 1.渲染数据
            var todoList=[
                {
    
    
                    "content":"吃饭"
                },
                {
    
    
                    "content":"睡觉"
                },
                {
    
    
                    "content":"打代码"
                },
            ];
            bindData(todoList);
            allTodo();
            allCompletedTodos();
            // 定义一个渲染数据的函数
            function bindData(data){
    
    
                // 得到所有的ul
                $ul=$(".todo-main")
                for(var i=0;i<data.length;i++){
    
    
                    $ul.append('<li class="todoItem">'+'<label><input type="checkbox" /></label><span>'+data[i].content+
                            '</span>'+'<button style="display:none" class="btn btn-danger">删除</button>'+'</li>')
                }
            }

            // 2.移入移出
            $ul.delegate(".todoItem","mouseenter",function(){
    
    
                $(this).css("background","#ccc").children("button").show()
            })
            $ul.delegate(".todoItem","mouseleave",function(){
    
    
                $(this).css("background","#fff").children("button").hide()
            })

            // 3.实现添加数据 使用事件委托实现
            $("#newTodo").keydown(function(event){
    
    
                if(event.keyCode===13){
    
    
                    if($