如何使用 jQuery 检索 HTML 标签的属性？

在本文中，我们将学习如何使用 jQuery 检索 HTML 标记的属性。我们可以使用 JQuery 用几行代码来完成这项工作。在这里，我们将构建一个图像缩放系统，其中将了解如何检索和更改 HTML 标记的属性。

使用 attr() 方法：该方法既可用于设置属性，也可用于返回完全取决于此函数中传递的参数的属性。

句法：

// Retrieve the value of the attribute
// of the first matched element
$(selector).attr(attribute)

// Set the value of matched element's attribute
$(selector).attr(attribute, value)

// Set multiple attributes and values
$(selector).attr({attribute1: value1, attribute2: value2,...})

HTML

  

    
    

  

    
    
    Zoom


    $(document).ready(function () {
        $("button").click(function () {
  
            // Setting width and image attribute
            $("img").attr(
              { "width": 500, "height": 500 }
            );
  
            // Retrieving alt attribute value from the image tag
            const heading = $("img").attr("alt");
            $("h1").text(heading);
        });
    });

  

输出：

正如您在输出中看到的那样，单击缩放按钮时，图像标签的宽度和高度属性发生了变化。此外，我们从图像标签中检索了 alt 属性值并将其设置在 h1 标签中。

上述任务也可以通过将attr() 方法替换为不会对输出进行任何更改的prop方法来完成。现在出现的问题是使用哪一个？

attr() 和 prop() 之间的区别： attr() 方法更改该 HTML 标记的属性，而prop()根据 DOM 树更改 HTML 标记的属性。让我们通过一个例子来理解这一点。

例子：

HTML

  

    
    

  

    
    Test


    $(document).ready(function () {
        $("button").click(function () {
            console.log(
              "When using attr() method: " +
              $("#test").attr("value")
            );
            console.log(
              "When using prop() method: " +
              $("#test").prop("value")
            );
        })
    })

  

输出：

上面的输出表明，如果您想要任何 HTML 标记的默认值，请使用attr()函数。如果您希望用户更改属性值（例如输入、复选框、收音机等），则使用prop()函数获取更新后的值。