06-jQuery-DOM操作-属性操作-attr()prop()addClass() oggleClass()等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<input type="text" value="输入框" id="inputField" disabled>
<button id="enableButton">启用输入框</button>
<button id="disableButton">禁用输入框</button>
<button id="addClassButton">添加高亮类</button>
<button id="removeClassButton">移除高亮类</button>
<script>
$(document).ready(function() {
// 为按钮绑定事件处理函数
$('#enableButton').click(function() {
$('#inputField').attr('disabled', false); // 使用attr()移除属性
});
$('#disableButton').click(function() {
$('#inputField').attr('disabled', 'disabled'); // 使用attr()添加属性
});
$('#addClassButton').click(function() {
$('#inputField').addClass('highlight'); // 使用addClass()添加类
});
$('#removeClassButton').click(function() {
$('#inputField').removeClass('highlight'); // 使用removeClass()移除类
});
});
</script>
</body>
</html>这段代码使用jQuery为页面上的元素绑定了事件处理函数。当用户点击相应的按钮时，会使用jQuery的方法修改输入框的属性和类。其中，attr()用于设置或移除属性，prop()用于设置或移除属性的值，addClass()和removeClass()用于添加或移除类。
评论已关闭