当前位置：首页 > jquery

html jquery

2026-01-13 16:13:36jquery

HTML 与 jQuery 基础

HTML 是超文本标记语言，用于构建网页的结构和内容。jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

HTML 基本结构

HTML 文档由一系列标签组成，定义了网页的结构和内容。一个基本的 HTML 文档结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

<!DOCTYPE html> 声明文档类型为 HTML5。
<html> 是 HTML 文档的根元素。
<head> 包含文档的元信息，如标题和引用的外部资源。
<body> 包含可见的页面内容。

jQuery 基本用法

jQuery 通过 $ 符号作为快捷方式，提供了简洁的语法来操作 HTML 元素。以下是一些常见的 jQuery 操作：

引入 jQuery

在 HTML 文档中引入 jQuery 库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

选择元素

jQuery 使用 CSS 选择器语法来选择元素：

// 选择所有段落元素
$("p");

// 选择 ID 为 "myId" 的元素
$("#myId");

// 选择类为 "myClass" 的元素
$(".myClass");

修改元素内容

使用 text() 或 html() 方法修改元素内容：

// 修改段落文本
$("p").text("新的文本内容");

// 修改段落 HTML
$("p").html("<strong>加粗文本</strong>");

事件处理

jQuery 提供了简单的事件绑定方法：

// 点击按钮时触发
$("#myButton").click(function() {
    alert("按钮被点击了！");
});

修改 CSS

使用 css() 方法修改元素的样式：

// 修改段落颜色
$("p").css("color", "red");

动画效果

jQuery 提供了内置的动画方法：

// 隐藏元素
$("#myElement").hide();

// 显示元素
$("#myElement").show();

// 淡入淡出
$("#myElement").fadeIn();
$("#myElement").fadeOut();

示例：动态添加元素

以下示例展示了如何使用 jQuery 动态添加元素到页面：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="addButton">添加段落</button>
    <div id="content"></div>

    <script>
        $("#addButton").click(function() {
            $("#content").append("<p>新添加的段落</p>");
        });
    </script>
</body>
</html>