jQuery：jq操作html属性；jq修改css样式；jq事件；jq动画

以下是使用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的开发者来说，这是一个很好的入门示例。

jQuery：jq操作html属性；jq修改css样式；jq事件；jq动画

评论已关闭

推荐阅读