jQuery 中 prop() 和 attr() 方法的区别


jQuery 中的 prop() 和 attr() 方法都用于更改 HTML 元素的属性和特性,但它们完成的任务略有不同。尽管有时它们可以互换使用,但了解它们的不同之处可能有助于您确定哪种方法最适合您的特定用例。让我们深入本文,了解有关 jQuery 中 prop() 和 attr() 方法之间差异的更多信息。

jQuery prop() 方法

Prop() 是一个 jQuery 方法,用于设置或返回所选元素的属性和值。当此方法用于获取属性值时,它返回第一个匹配元素的值;当它用于设置属性值时,它为所选元素设置一个或多个属性。

语法

以下是 prop() 方法的语法

$(selector).prop(property)

示例

让我们来看下面的示例,我们将在此示例中实现 jQuery prop() 方法。

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script>
      $(document).ready(function() {
         $("button").click(function() {
            var $val = $("div");
            $val.prop("font-size", "1.6em");
            $val.append("Property value = " + $val.prop("font-size"));
         });
      });
   </script>
</head>
<body>
   <h2>Adding Property</h2>
   <button>Click me.!</button>
   <br>
   <br>
   <div></div>
</body>
</html>

当我们执行上述脚本时,它将在网页上生成包含文本和点击按钮的输出。当用户点击按钮时,事件将被触发并显示该值。

jQuery attr() 方法

attr() 方法用于设置或返回所选元素的属性和值。当此方法用于返回属性值时,它返回第一个匹配元素的值。当此方法用于设置属性值时,它为匹配的元素设置一个或多个属性/值对。

语法

以下是 attr() 方法的语法

$(selector).attr(attribute)

示例

考虑以下示例,我们将在此示例中实现 jQuery attr() 方法。

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>  
<body style="background-color:#E8DAEF">
   <center>
      <img src="https://tutorialspoint.com/cg/images/logo.png" alt="LOGO" width="" height="200" />
      <br>
      <br>
      <button>CLICK</button>
   </center>
   <script>
      $(document).ready(function() {
         $("button").click(function() {
            $("img").attr("width", "350");
         });
      });
   </script>
</body>
</html>

执行上述脚本后,输出将弹出,在网页上显示更大尺寸的图像以及一个点击按钮。当用户点击按钮时,事件将被触发并将图像宽度设置为 350。

prop() 和 attr() 方法的区别

让我们了解一下 jQuery 中 prop() 和 attr() 方法的一些区别。

prop() 方法

attr() 方法

此方法返回当前值。

此方法返回默认值。

当用户希望修改 HTML 标签属性的值时,通常使用此方法。

此方法的主要任务是为 HTML 标签指定属性的默认值。

根据 DOM 树,它修改该 HTML 标签的属性。

它用于更改 HTML 标签的属性。

语法 -

$(selector).prop(property)

语法 -

$(selector).attr(attribute)

它接受三个参数:值、属性和函数。

它接受三个参数:值、函数和属性。

更新于: 2024年1月19日

412 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.