引言

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它简化了 HTML 文档遍历与操作、事件处理、动画和 Ajax 交互，使前端开发变得更加容易。本文将详细介绍如何使用 jQuery 进行 DOM 操作，包括修改元素内容、属性及 CSS 样式。

1. 修改元素内容

jQuery 提供了多种方法来修改元素的内容，包括 `text()`, `html()`, 和 `val()`。

1.1 使用 `text()` 方法

`text()` 方法用于获取或设置匹配元素的文本内容。

            // 设置文本内容
            $("#myElement").text("新的文本内容");

            // 获取文本内容
            var content = $("#myElement").text();
        

1.2 使用 `html()` 方法

`html()` 方法用于获取或设置匹配元素的 HTML 内容。

            // 设置 HTML 内容
            $("#myElement").html("新的 HTML 内容");

            // 获取 HTML 内容
            var htmlContent = $("#myElement").html();
        

1.3 使用 `val()` 方法

`val()` 方法主要用于获取或设置表单元素（如 input、select 和 textarea）的值。

            // 设置 input 的值
            $("#myInput").val("新的输入值");

            // 获取 input 的值
            var inputValue = $("#myInput").val();
        

2. 修改元素属性

jQuery 提供了 `attr()` 方法来获取或设置匹配元素的属性值。

            // 设置属性
            $("#myElement").attr("title", "新的标题");

            // 获取属性
            var title = $("#myElement").attr("title");
        

3. 修改元素 CSS 样式

jQuery 提供了 `css()` 方法来获取或设置匹配元素的 CSS 样式。

            // 设置 CSS 样式
            $("#myElement").css("color", "red");

            // 获取 CSS 样式
            var color = $("#myElement").css("color");
        

4. 案例讲解

以下是一个完整的案例，演示了如何使用 jQuery 修改元素的内容、属性和 CSS 样式。

4.1 HTML 结构

            <div id="example">
                <p id="text">这是一个段落。</p>
                <input type="text" id="inputField" placeholder="输入一些文字">
                <button id="changeButton">修改内容</button>
            </div>
        

4.2 jQuery 代码

            $(document).ready(function() {
                $("#changeButton").click(function() {
                    // 修改段落内容
                    $("#text").text("段落内容已被修改！");

                    // 修改 input 的值
                    $("#inputField").val("默认值已被修改！");

                    // 修改 div 的背景颜色
                    $("#example").css("background-color", "yellow");

                    // 修改 div 的标题属性
                    $("#example").attr("title", "这是一个示例 div");
                });
            });
        

总结

通过本文，我们了解了如何使用 jQuery 进行 DOM 操作，包括修改元素内容、属性及 CSS 样式。这些操作在前端开发中非常常见，希望本文对你有所帮助。