📌  相关文章
📜  网络技术问题 | jQuery 测验 |第 3 组 |问题 5(1)

📅  最后修改于: 2023-12-03 15:27:40.295000             🧑  作者: Mango

网络技术问题 | jQuery 测验 | 第 3 组 | 问题 5

简介

本次测试涉及到 jQuery 相关的问题，主要包括 jQuery 的选择器、事件处理、效果、动画等方面。对于一名熟练的前端工程师来说，掌握 jQuery 的使用是必不可少的。

问题描述

下面的代码段中，想要实现点击按钮时，将文本框内的内容加粗显示，但是当前代码段有误，请修复代码，并在下方作答。代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Test</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<input type="text" id="input" value="hello world!">
	<button id="btn">加粗</button>
	<script>
		$(document).on('click', '#btn', function() {
			$('#input').css('font-weight', 'bold');
		});
	</script>
</body>
</html>

请问该代码中存在什么问题？应该如何修改？

问题分析

分析代码，发现代码中使用了 jQuery 的事件处理函数 $(...).on()，在点击按钮时会触发该事件处理函数实现加粗文字效果。但是使用的 CSS 属性名 font-weight 可能存在问题。

问题解答

正确修改代码中的 CSS 属性名应该为 font-weight，因为该属性用于控制文本的字体粗细程度，我们需要使用该属性来实现将文本框内的内容加粗显示的效果。修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Test</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<input type="text" id="input" value="hello world!">
	<button id="btn">加粗</button>
	<script>
		$(document).on('click', '#btn', function() {
			$('#input').css('font-weight', 'bold');
		});
	</script>
</body>
</html>
参考资料