jQuery 如何更改 DOM 值

在前端开发中，使用 jQuery 更改 DOM 值是一项基础且常用的操作。jQuery 作为强大的 JavaScript 库，极大地简化了我们对 HTML 文档中元素的操作过程。

要使用 jQuery 更改 DOM 值，需要确保页面引入了 jQuery 库。这可以通过本地引入或使用 CDN 链接的方式来完成。

更改文本值是较为常见的需求。假设 HTML 中有一个段落元素 <p id="myPara">原始文本</p>，若要将其文本内容修改为新的文本，可以使用 text() 方法。在 jQuery 代码中，通过 $(document).ready() 函数来确保文档加载完成后再执行操作，代码如下：

$(document).ready(function() {
    $('#myPara').text('新的文本内容');
});

这里，$('#myPara') 是通过元素的 id 选择器选中了特定的段落元素，然后调用 text() 方法并传入新的文本值，就实现了文本内容的更改。

如果要修改元素的属性值，例如修改一个图片的 src 属性。假设有 <img id="myImg" src="oldImage.jpg">，可以使用 attr() 方法来实现。代码如下：

$(document).ready(function() {
    $('#myImg').attr('src', 'newImage.jpg');
});

上述代码中，attr() 方法的第一个参数是要修改的属性名称，第二个参数是新的属性值。

对于表单元素的值修改也很简单。比如有一个输入框 <input type="text" id="myInput" value="初始值">，要修改其输入的值，使用 val() 方法，代码如下：

$(document).ready(function() {
    $('#myInput').val('新的输入值');
});

另外，当需要修改元素的 HTML 内容时，html() 方法就派上用场了。若有一个 <div id="myDiv"></div>，想要向其中添加一些 HTML 标签和内容，代码可以这样写：

$(document).ready(function() {
    $('#myDiv').html('<p>这是新添加的 HTML 内容</p>');
});

通过这些方法，无论是简单的文本修改，还是复杂的 HTML 结构和属性调整，利用 jQuery 都可以轻松实现更改 DOM 值的操作，从而为用户带来更丰富、动态的页面交互体验。掌握这些技巧，能在前端开发中更加高效地完成各种功能需求。