正文

掌握jQuery，轻松应对编程挑战：10个实战题目带你入门精通

/0 浏览量
0403

jQuery基础知识回顾

在深入实战题目之前，让我们先快速回顾一下jQuery的一些基础知识。jQuery是一个非常流行的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和AJAX操作。以下是一些jQuery的基础概念：

  • 选择器：用于选择HTML元素。
  • DOM操作：修改、添加或删除HTML元素。
  • 事件处理：响应HTML事件（如点击、鼠标悬停等）。
  • 动画和过渡：创建CSS效果和动画。
  • AJAX：在不重新加载整个页面的情况下与服务器交换数据。

实战题目一：简单的DOM操作

题目描述

编写一个简单的HTML页面，其中包含一个按钮和一个用于显示消息的<div>元素。当按钮被点击时，使用jQuery显示一个欢迎消息。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#showMessage").click(function(){
        $("#message").text("欢迎来到我的页面！");
    });
});
</script>
</head>
<body>

<button id="showMessage">显示消息</button>
<div id="message"></div>

</body>
</html>

解释

在这个例子中，我们使用了jQuery的选择器$("#showMessage")来选择按钮，并为其添加了一个点击事件监听器。当按钮被点击时，我们使用$("#message").text()来更新<div>元素的内容。

实战题目二：事件委托

题目描述

编写一个HTML列表，每个列表项都包含一个删除按钮。当点击删除按钮时，使用jQuery删除相应的列表项。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#list").on("click", ".delete-btn", function(){
        $(this).parent().remove();
    });
});
</script>
</head>
<body>

<ul id="list">
    <li><span>Item 1</span><button class="delete-btn">Delete</button></li>
    <li><span>Item 2</span><button class="delete-btn">Delete</button></li>
    <li><span>Item 3</span><button class="delete-btn">Delete</button></li>
</ul>

</body>
</html>

解释

在这个例子中，我们使用了事件委托来监听所有删除按钮的点击事件。我们给<ul>元素添加了一个点击事件监听器，并使用.delete-btn选择器来找到所有删除按钮。当点击删除按钮时，我们使用$(this).parent().remove()来删除按钮的父元素（即列表项）。

实战题目三：创建动画

题目描述

编写一个简单的HTML页面，其中包含一个按钮和三个<div>元素。当按钮被点击时，使用jQuery让第一个<div>元素向上移动，第二个<div>元素向右移动，第三个div元素向下移动。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#animate").click(function(){
        $("#div1").animate({ top: "-=50px" });
        $("#div2").animate({ left: "+=50px" });
        $("#div3").animate({ top: "+=50px" });
    });
});
</script>
</head>
<body>

<button id="animate">开始动画</button>
<div id="div1" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; background-color: blue; position: absolute; left: 150px;"></div>
<div id="div3" style="width: 100px; height: 100px; background-color: green; position: absolute; left: 150px; top: 150px;"></div>

</body>
</html>

解释

在这个例子中，我们使用了jQuery的animate()方法来创建动画。我们为每个<div>元素指定了要动画化的CSS属性和目标值。当按钮被点击时，每个<div>元素都会按照指定的动画进行移动。

实战题目四：AJAX请求

题目描述

编写一个简单的HTML页面，其中包含一个按钮。当按钮被点击时，使用jQuery向服务器发送一个GET请求，并在另一个<div>元素中显示返回的数据。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX请求示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#ajaxRequest").click(function(){
        $.ajax({
            url: "data.json",
            type: "GET",
            dataType: "json",
            success: function(data){
                $("#data").text(JSON.stringify(data));
            },
            error: function(xhr, status, error){
                $("#data").text("Error: " + error);
            }
        });
    });
});
</script>
</head>
<body>

<button id="ajaxRequest">发送请求</button>
<div id="data"></div>

</body>
</html>

解释

在这个例子中，我们使用了jQuery的$.ajax()方法来发送一个GET请求。我们指定了请求的URL、请求类型和响应的数据类型。当请求成功完成时，我们在success回调函数中将返回的数据转换为JSON字符串，并将其显示在<div>元素中。如果请求失败，我们在error回调函数中显示错误信息。

实战题目五：动态创建元素

题目描述

编写一个简单的HTML页面，其中包含一个按钮。当按钮被点击时，使用jQuery动态创建一个新的<p>元素，并将其添加到页面中的<body>元素中。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建元素示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#createElement").click(function(){
        $("<p>").text("这是一个动态创建的元素！").appendTo("body");
    });
});
</script>
</head>
<body>

<button id="createElement">创建元素</button>

</body>
</html>

解释

在这个例子中，我们使用了jQuery的$("<p>").text("这是一个动态创建的元素！").appendTo("body")来创建一个新的<p>元素，并设置其文本内容。然后，我们使用appendTo("body")方法将新元素添加到<body>元素中。

实战题目六：表单验证

题目描述

编写一个简单的HTML表单，其中包含一个文本输入框和一个提交按钮。使用jQuery验证输入框中的内容是否为有效的电子邮件地址，并在输入框旁边显示相应的验证信息。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#emailForm").submit(function(e){
        e.preventDefault();
        var email = $("#email").val();
        if(email.match(/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([\w-]+\.)+[\w-]{2,}))$/)){
            $("#emailError").hide();
            // 处理表单提交
        } else {
            $("#emailError").show();
        }
    });
});
</script>
</head>
<body>

<form id="emailForm">
    <input type="text" id="email" placeholder="Enter your email">
    <span id="emailError" style="color: red; display: none;">Please enter a valid email address.</span>
    <button type="submit">Submit</button>
</form>

</body>
</html>

解释

在这个例子中，我们使用了jQuery的$("#emailForm").submit()方法来监听表单的提交事件。我们使用正则表达式来验证输入框中的内容是否为有效的电子邮件地址。如果电子邮件地址无效，我们显示一个错误信息；如果有效，我们隐藏错误信息并处理表单提交。

实战题目七：响应式设计

题目描述

编写一个简单的HTML页面，其中包含一个导航栏和一个内容区域。使用jQuery根据屏幕宽度改变导航栏的样式，以实现响应式设计。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式设计示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $(window).resize(function(){
        if($(window).width() < 768){
            $("#navbar").css("background-color", "blue");
        } else {
            $("#navbar").css("background-color", "green");
        }
    });
});
</script>
</head>
<body>

<div id="navbar" style="background-color: green; width: 100%; padding: 10px;">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</div>

<div id="content" style="padding: 20px;">
    <p>Welcome to my website!</p>
</div>

</body>
</html>

解释

在这个例子中，我们使用了jQuery的$(window).resize()方法来监听窗口大小的变化。当窗口大小小于768像素时，我们改变导航栏的背景颜色；当窗口大小大于或等于768像素时，我们恢复导航栏的原始背景颜色。

实战题目八：动态加载内容

题目描述

编写一个简单的HTML页面，其中包含一个按钮和一个用于显示内容的<div>元素。当按钮被点击时，使用jQuery动态从服务器加载内容，并将其显示在<div>元素中。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态加载内容示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#loadContent").click(function(){
        $.ajax({
            url: "content.html",
            type: "GET",
            success: function(data){
                $("#content").html(data);
            },
            error: function(xhr, status, error){
                $("#content").text("Error: " + error);
            }
        });
    });
});
</script>
</head>
<body>

<button id="loadContent">加载内容</button>
<div id="content"></div>

</body>
</html>

解释

在这个例子中，我们使用了jQuery的$.ajax()方法来发送一个GET请求，并指定要加载的HTML文件路径。当请求成功完成时，我们使用$("#content").html(data)将返回的内容设置为<div>元素的HTML内容。如果请求失败，我们显示一个错误信息。

实战题目九：轮播图

题目描述

编写一个简单的HTML页面，其中包含一个轮播图。使用jQuery实现轮播图功能，使图片在指定的时间间隔自动切换。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    var currentIndex = 0;
    var slides = $("#carousel img");
    var slideInterval = setInterval(nextSlide, 3000);

    function nextSlide(){
        slides.eq(currentIndex).fadeOut();
        currentIndex = (currentIndex + 1) % slides.length;
        slides.eq(currentIndex).fadeIn();
    }

    $("#prev").click(function(){
        slides.eq(currentIndex).fadeOut();
        currentIndex = (currentIndex - 1 + slides.length) % slides.length;
        slides.eq(currentIndex).fadeIn();
        clearInterval(slideInterval);
        slideInterval = setInterval(nextSlide, 3000);
    });

    $("#next").click(function(){
        nextSlide();
    });
});
</script>
</head>
<body>

<div id="carousel" style="position: relative;">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2" style="display: none;">
    <img src="image3.jpg" alt="Image 3" style="display: none;">
    <button id="prev">Previous</button>
    <button id="next">Next</button>
</div>

</body>
</html>

解释

在这个例子中，我们创建了一个简单的轮播图，使用两个按钮来控制图片的切换。我们使用setInterval()方法来设置一个定时器，每隔3秒钟自动切换到下一张图片。当点击“Previous”或“Next”按钮时，我们手动切换到相应的图片，并更新定时器。

实战题目十：实时搜索

题目描述

编写一个简单的HTML页面，其中包含一个搜索框和一个用于显示搜索结果的<ul>元素。当用户在搜索框中输入文本时，使用jQuery动态搜索一个包含多个关键词的数组，并将匹配的结果显示在<ul>元素中。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时搜索示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    var keywords = ["apple", "banana", "cherry", "date", "fig", "grape"];

    $("#searchBox").on("keyup", function(){
        var searchValue = $(this).val().toLowerCase();
        var filteredKeywords = keywords.filter(function(keyword){
            return keyword.toLowerCase().includes(searchValue);
        });
        $("#results").empty();
        filteredKeywords.forEach(function(keyword){
            $("#results").append("<li>" + keyword + "</li>");
        });
    });
});
</script>
</head>
<body>

<input type="text" id="searchBox" placeholder="Search...">
<ul id="results"></ul>

</body>
</html>

解释

在这个例子中，我们创建了一个包含多个关键词的数组。当用户在搜索框中输入文本时，我们使用$.on("keyup", function() {...})来监听键盘事件。我们使用toLowerCase()方法将搜索框中的文本和关键词转换为小写，并使用filter()方法来筛选出匹配的结果。然后，我们使用forEach()方法将匹配的结果添加到<ul>元素中。

通过以上10个实战题目，你将能够掌握jQuery的基础知识和一些高级用法。这些题目将帮助你将理论应用到实践中，并在解决实际编程挑战时更加得心应手。祝你好运！

-- 展开阅读全文 --