html jquery

作者：嗜血苍狼发布日期:2025-10-21 浏览:26

<!DOCTYPE html>
<html>
<head>
    <title>HTML jQuery Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").toggle();
            });
        });
    </script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Toggle paragraphs</button>

</body>
</html>

解释说明：

HTML结构:
- 页面包含一个标题 (<h2>), 两个段落 (<p>), 和一个按钮 (<button>).
jQuery库引入:
- 使用<script>标签从CDN加载jQuery库 (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js)。
jQuery代码:
- $(document).ready(function(){ ... }); 确保DOM完全加载后再执行代码。
- $("button").click(function(){ ... }); 绑定点击事件到按钮上。
- $("p").toggle(); 切换所有段落的显示状态（隐藏或显示）。
功能描述:
- 当用户点击按钮时，页面中的所有段落会切换显示和隐藏状态。

上一篇：html中margin的用法

下一篇：html 框架