jQuery .html() 的回调函数

JS

使用jQuery的html()方法可以获取或设置一个元素的内容。在获取时，html()方法返回指定元素的HTML内容。在设置时，html()方法用于将指定的HTML内容设置给元素。

html()方法也可以接受一个回调函数作为参数。回调函数将在每个匹配的元素上执行，并返回用于设置元素的HTML内容。回调函数的参数是元素的索引和旧的HTML内容。在回调函数中，可以根据需要对旧的HTML内容进行修改，并返回新的HTML内容。

下面是一个使用html()方法的案例代码：

html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
<div id="content">
  <h2>Hello, jQuery!</h2>
  
This is a paragraph.
</div>
<script>
$(document).ready(function(){
  // 获取元素的HTML内容
  var oldHTML = $("#content").html();
  console.log("旧的HTML内容：" + oldHTML);
  // 使用html()方法设置元素的HTML内容
  $("#content").html(function(index, oldHTML){
    // 在回调函数中修改HTML内容
    return "<h2><strong>新的</strong>标题</h2>" + oldHTML;
  });
  
  // 获取修改后的HTML内容
  var newHTML = $("#content").html();
  console.log("新的HTML内容：" + newHTML);
});
</script>
</body>
</html>

在上面的例子中，我们首先使用html()方法获取了id为content的元素的旧的HTML内容，并将其打印到控制台上。然后，我们使用html()方法设置了一个回调函数。在回调函数中，我们在旧的HTML内容的前面添加了一个新的标题，并使用标签使标题加粗。最后，我们再次使用html()方法获取修改后的HTML内容，并将其打印到控制台上。

运行上面的代码，我们可以在控制台上看到输出的旧的和新的HTML内容。在页面上，我们可以看到标题被加粗并且前面添加了一个新的标题。

使用html()方法的回调函数可以方便地对元素的HTML内容进行修改和处理，为网页开发带来了更多的灵活性和便利性。