.prop() 与 .attr()

使用 .prop() 与 .attr() 方法是在 jQuery 中操作元素属性的常见方式。这两个方法有着相似的功能，但在某些情况下会有差异。本文将介绍这两个方法以及它们的用法和案例。

.prop() 方法用于获取或设置元素的属性值。它主要用于操作元素的布尔属性，如 "checked"、"disabled"等。当使用.prop() 方法设置属性值时，会改变元素的状态，并且这种改变是实时的，即使在设置属性后，元素的状态发生了变化，使用.prop() 方法获取属性值时也会反映出这种变化。例如：

html
<input type="checkbox" id="myCheckbox" checked>
<script>
  // 获取属性值
  var isChecked = $('#myCheckbox').prop('checked');
  console.log(isChecked);  // 输出: true
  // 设置属性值
  $('#myCheckbox').prop('checked', false);
</script>

上述代码中，我们通过.prop() 方法获取了复选框的 "checked" 属性值，并将其输出到控制台。然后，我们使用.prop() 方法将复选框的 "checked" 属性值设置为 false，即取消选中复选框。

.attr() 方法用于获取或设置元素的属性值。与.prop() 方法不同的是，.attr() 方法主要用于操作元素的非布尔属性，如 "src"、"href" 等。当使用.attr() 方法设置属性值时，会改变属性的值，但不会改变元素的状态。例如：

html
点击这里
<script>
  // 获取属性值
  var linkHref = $('#myLink').attr('href');
  console.log(linkHref);  // 输出: #
  // 设置属性值
  $('#myLink').attr('href', 'https://www.example.com');
</script>

上述代码中，我们通过.attr() 方法获取了链接元素的 "href" 属性值，并将其输出到控制台。然后，我们使用.attr() 方法将链接元素的 "href" 属性值设置为 "https://www.example.com"。

案例代码：

下面的案例代码演示了如何使用.prop() 和 .attr() 方法来操作元素的属性：

html
<div id="myDiv">这是一个示例</div>
<script>
  // 使用 .prop() 方法设置和获取属性值
  $('#myDiv').prop('title', '这是一个示例的标题');
  var title = $('#myDiv').prop('title');
  console.log(title);  // 输出: 这是一个示例的标题
  // 使用 .attr() 方法设置和获取属性值
  $('#myDiv').attr('data-custom', 'custom value');
  var customValue = $('#myDiv').attr('data-custom');
  console.log(customValue);  // 输出: custom value
</script>

上述代码中，我们首先使用.prop() 方法将 div 元素的 "title" 属性值设置为 "这是一个示例的标题"。然后，使用.prop() 方法获取属性值并将其输出到控制台。接下来，我们使用.attr() 方法将 div 元素的 "data-custom" 属性值设置为 "custom value"。再次使用.attr() 方法获取属性值并将其输出到控制台。

：

.prop() 和 .attr() 方法是 jQuery 中常用的操作元素属性的方法。.prop() 方法主要用于操作布尔属性，并且改变属性值会实时反映在元素的状态上；.attr() 方法主要用于操作非布尔属性，并且改变属性值不会改变元素的状态。根据具体的需求，选择合适的方法来操作元素的属性。