淘先锋技术网

首页 1 2 3 4 5 6 7

前端老白-jquery .html
jQuery是一个流行的JavaScript库，它使得DOM操作变得非常容易。.html()是jQuery的一个方法，可以用来获得或设置元素的HTML内容。在这篇文章中，我将会介绍如何使用jquery .html()方法来操作HTML元素。

首先，让我们看一个简单的例子：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">这是一个测试</div>
<script>
var htmlContent = $('#myDiv').html();
console.log(htmlContent);
</script>
</body>
</html>

在这个例子中，我们使用了jQuery基础语法“$()”来选取ID为“myDiv”的元素。我们然后使用jQuery的.html()方法获取“myDiv”元素的HTML内容，并将结果存储在一个变量“htmlContent”中。我们最后使用console.log()方法把结果打印在控制台中。如果你打开控制台，你将会看到“这是一个测试”被打印了出来。

接下来，我们将会展示如何使用.html()方法来设置元素的HTML内容：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">这是一个测试</div>
<button id="changeContent">改变内容</button>
<script>
$('#changeContent').click(function() {
$('#myDiv').html('新的测试内容');
});
</script>
</body>
</html>

在这个例子中，我们创建了一个按钮并给它赋予了一个ID“changeContent”。我们还绑定了一个点击事件，当按钮被点击时，我们调用了.html()方法并传递了一个新的文本值“新的测试内容”作为参数。这将会更新我们原来的“myDiv”元素的HTML内容。

.html()方法可以极大地简化DOM操作。以上是一个基础教程。祝大家使用愉快！