[分享]破解jQuery实战技巧：100道经典练习题助你提升编程能力

引言jQuery 是一款广泛使用的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。为了帮助读者深入理解和掌握 jQuery，本文将提供 100 ...

引言

jQuery 是一款广泛使用的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。为了帮助读者深入理解和掌握 jQuery，本文将提供 100 道经典练习题，通过实战演练提升编程能力。

练习题

1. 基础选择器

题目描述：使用 jQuery 选择页面中所有的

元素。

答案：

$(document).ready(function() { $("p").css("background-color", "yellow");
});

2. 属性操作

题目描述：给所有 元素添加 target="_blank" 属性。

答案：

$(document).ready(function() { $("a").attr("target", "_blank");
});

3. 事件处理

题目描述：为按钮添加点击事件，当点击时显示一个警告框。

答案：

$(document).ready(function() { $("#myButton").click(function() { alert("按钮被点击了！"); });
});

4. 动画效果

题目描述：使页面中的

元素在 2 秒内淡入淡出。

答案：

$(document).ready(function() { $("#myDiv").fadeIn(2000).fadeOut(2000);
});

5. AJAX 请求

题目描述：使用 jQuery 发起一个 AJAX 请求，获取服务器上的数据，并在页面中显示。

答案：

$(document).ready(function() { $.ajax({ url: "data.json", type: "GET", dataType: "json", success: function(data) { $("#result").html(data.name); } });
});

6. 选择器组合

题目描述：选择所有类名为 “myClass” 且包含 “anotherClass” 的

元素。

答案：

$(document).ready(function() { $(".myClass.anotherClass").css("border", "1px solid red");
});

7. DOM 操作

题目描述：创建一个新的

元素，并设置其文本为 “Hello, jQuery!“，然后将其添加到页面的末尾。

答案：

$(document).ready(function() { $("
").text("Hello, jQuery!").appendTo("body");
});

8. 事件委托

题目描述：为动态添加到容器中的所有

元素绑定点击事件，点击时显示其文本。

答案：

$(document).ready(function() { $("#myList").on("click", "li", function() { alert($(this).text()); });
});

9. 事件冒泡

题目描述：阻止点击

元素时触发其父元素的事件。

答案：

$(document).ready(function() { $("#myDiv").click(function(event) { event.stopPropagation(); });
});

10. 选择器优先级

题目描述：选择所有类名为 “myClass” 的

元素，但它们的父元素不是 。

答案：

$(document).ready(function() { $("p.myClass:not(#body)").css("color", "blue");
});

总结

通过以上 10 道练习题，读者可以逐步掌握 jQuery 的基本用法和实战技巧。接下来，我们将继续提供更多练习题，帮助读者进一步提升编程能力。

收藏 分享

社交分享

×

扫一扫分享

QQ分享微博分享

关闭