以下是使用jQuery进行HTML属性操作、CSS样式修改以及事件绑定的基本示例：
<!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>
<button id="changeAttr">改变属性</button>
<input type="text" id="myInput" value="输入内容" />
<button id="changeStyle">改变样式</button>
<div id="myDiv">这是一个DIV元素</div>
<button id="bindEvent">绑定点击事件</button>
<div id="animateMe">这是一个可以动画的元素</div>
<script>
$(document).ready(function() {
// 改变HTML属性
$('#changeAttr').click(function() {
$('#myInput').attr('value', '改变了属性');
});
// 改变CSS样式
$('#changeStyle').click(function() {
$('#myDiv').toggleClass('highlight');
});
// 事件绑定
$('#bindEvent').click(function() {
$('#animateMe').on('click', function() {
$(this).animate({
'font-size': '20px',
'opacity': '0.5'
}, 1000);
});
});
});
</script>
</body>
</html>在这个示例中，我们定义了一些按钮和其他HTML元素，并在<head>中包含了jQuery库。我们使用jQuery为这些元素添加了点击事件处理程序，并在事件处理程序中执行了相关的操作：
- 改变HTML属性：当点击
#changeAttr按钮时，文本输入框的value属性会被改变。 - 改变CSS样式：当点击
#changeStyle按钮时，#myDiv元素的背景色会在高亮和非高亮状态之间切换。 - 事件绑定：当点击
#bindEvent按钮时，#animateMe元素被绑定了一个点击事件，当点击该元素时，它的字体大小和透明度会以动画效果变化。
这些操作是jQuery最基本和常用的功能，对于学习jQuery的开发者来说，这是一个很好的入门示例。