引言
jQuery 是一个广泛使用的前端JavaScript库,它简化了HTML文档的遍历、事件处理、动画和Ajax操作等任务。通过学习和实践jQuery,可以显著提升前端开发效率。本文将提供一系列jQuery实战练习题,帮助你巩固知识,提升编程能力。
练习题
1. 选择器基础
题目:编写jQuery代码,选择页面中所有的段落(<p>标签)。
答案:
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
2. 事件处理
题目:编写jQuery代码,当用户点击任何链接时,弹出一个提示框显示链接的文本。
答案:
$(document).ready(function() {
$("a").click(function() {
alert($(this).text());
});
});
3. 动画
题目:编写jQuery代码,当用户将鼠标悬停在任意一个<div>元素上时,使其背景颜色变为红色,当鼠标移开时,恢复原始颜色。
答案:
$(document).ready(function() {
$("div").hover(
function() {
$(this).css("background-color", "red");
},
function() {
$(this).css("background-color", "");
}
);
});
4. Ajax
题目:编写jQuery代码,使用Ajax从服务器获取数据,并显示在页面的<div id="content">元素中。
答案:
$(document).ready(function() {
$("#button").click(function() {
$.ajax({
url: "server.php",
type: "GET",
success: function(response) {
$("#content").html(response);
}
});
});
});
5. 表单验证
题目:编写jQuery代码,当用户提交表单时,检查用户名和密码字段是否为空。
答案:
$(document).ready(function() {
$("#form").submit(function() {
var username = $("#username").val();
var password = $("#password").val();
if (username === "" || password === "") {
alert("用户名和密码不能为空!");
return false;
}
return true;
});
});
6. DOM操作
题目:编写jQuery代码,创建一个新的<li>元素,内容为“新项目”,并将其添加到<ul>列表的第一个位置。
答案:
$(document).ready(function() {
$("<li>").text("新项目").prependTo("ul");
});
7. CSS操作
题目:编写jQuery代码,使所有<h1>标签的字体颜色变为蓝色。
答案:
$(document).ready(function() {
$("h1").css("color", "blue");
});
8. 媒体操作
题目:编写jQuery代码,当用户点击一个按钮时,播放页面中第一个<audio>元素。
答案:
$(document).ready(function() {
$("#playButton").click(function() {
$("#audio")[0].play();
});
});
总结
通过这些实战练习题,你可以巩固jQuery的基础知识,并提高实际操作能力。不断练习和探索jQuery的更多高级功能,将有助于你在前端开发领域取得更大的进步。
